1
votes

Réduisez le remplissage dans les boutons de la barre d'application en scintillement

Comment puis-je réduire l'espacement entre les boutons?

Vous pouvez voir que quatre boutons sur la barre d'applications prennent tellement d'espace, j'ai essayé les lignes. mais pas fonctionné

Voici mon code -

 AppBar(
  backgroundColor: Colors.deepOrange,
  iconTheme: new IconThemeData(color: Colors.white),
  title: Text(
    titleString,
    style: TextStyle(color: Colors.white),
  ),

  actions: <Widget>[

    IconButton(

      icon: Icon(
        Icons.search,
        color: Colors.white,
      ),
      //iconSize: 20,
      onPressed: null,
    ),
    IconButton(
      icon: Icon(
        Icons.notifications_none,
        color: Colors.white,
      ),
     // iconSize: 20,

      onPressed: null,
    ),
    //Add more icon here

  ],
);

flutter dart appbar

2 commentaires

Pouvez-vous décrire comment vous avez essayé de le faire avec Row?

Ajout de toutes les icônes dans la ligne et définition de la taille de l'axe au minimum ... mais ne fonctionne pas

3 Réponses :

3
votes

Le problème vient du widget IconButton . par défaut, IconButton a une taille de 48x48 pixels et vous pouvez en savoir plus sur le réponse principale à cette question .

Une solution de contournement serait d'utiliser le widget GestureDetector pour gérer votre méthode onPressed () . Voici un exemple.

actions: <Widget>[
          GestureDetector(
              onTap: (){
                //your code
              },
              child: Icon(Icons.search)
          ),
          GestureDetector(
              onTap: (){},
              child: Icon(Icons.notifications)
          )
          //Add more icon here
        ],

0 commentaires

0
votes

Essayez d'utiliser sizedbox

    Padding(
      padding: const EdgeInsets.all(5.0),
      child: SizedBox.fromSize(
        size: Size(25, 20), // button width and height
        child: InkWell(
          splashColor: Colors.white, // splash color
          onTap: () {}, // button pressed
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Icon(Icons.search), // icon
            ],
          ),
        ),
      ),
    ),

0 commentaires

2
votes

Vous pouvez utiliser les arguments VisualDensity et padding ensemble pour réduire les choses:

actions: <Widget>[

IconButton(
  visualDensity: VisualDensity(horizontal: -4.0, vertical: -4.0),
  padding: EdgeInsets.zero,
  icon: Icon(
    Icons.search,
    color: Colors.white,
  ),
  //iconSize: 20,
  onPressed: null,
),
//Add more icon here

],

Cela a fonctionné au moins dans mon application. J'espère que c'est utile!

0 commentaires