web-dev-qa-db-fra.com

Comment supprimer le grand rembourrage Flutter IconButton?

Je veux avoir une rangée d'IconButtons, tous côte à côte, mais il semble y avoir un assez grand remplissage entre l'icône réelle et les limites d'IconButton. J'ai déjà mis le rembourrage du bouton à 0.

Ceci est mon composant, assez simple:

class ActionButtons extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return Container(
        color: Colors.lightBlue,
        margin: const EdgeInsets.all(0.0),
        padding: const EdgeInsets.all(0.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            IconButton(
              icon: new Icon(ScanrIcons.reg),
              alignment: Alignment.center,
              padding: new EdgeInsets.all(0.0),
              onPressed: () {},
            ),
            IconButton(
              icon: new Icon(Icons.volume_up),
              alignment: Alignment.center,
              padding: new EdgeInsets.all(0.0),
              onPressed: () {},
            )
          ],
        ),
      );
    }
}

enter image description here

Je veux me débarrasser de la plupart de l'espace bleu clair, faire démarrer mes icônes plus tôt à gauche et plus près les unes des autres, mais je ne trouve pas le moyen de redimensionner le IconButton lui-même.

Je suis presque sûr que cet espace est occupé par le bouton lui-même, car si je change leurs alignements en centerRight et centerLeft ils ressemblent à ceci:

enter image description here

Réduire les icônes réelles n'aide pas non plus, le bouton est toujours grand:

enter image description here

merci pour l'aide

flutterflutter-layout
6
Pablote

Ce n'est pas tant qu'il y a un rembourrage. IconButton est un widget Material Design qui suit la spécification selon laquelle les objets exploitables doivent être au moins 48 pixels de chaque côté. Vous pouvez cliquer sur l'implémentation IconButton à partir de n'importe quel IDE.

Vous pouvez également prendre de manière semi-triviale le code source icon_button.Dart et créer votre propre IconButton qui ne suit pas les spécifications Material Design car le fichier entier ne fait que composer d'autres widgets et ne compte que 200 lignes qui sont principalement des commentaires.

8
xster

Deux façons de contourner ce problème.

Toujours utiliser IconButton

Enveloppez le IconButton à l'intérieur d'un conteneur qui a une largeur.

Par exemple:

Container(
  padding: const EdgeInsets.all(0.0),
  width: 30.0, // you can adjust the width as you need
  child: IconButton(
  ),
),

Utilisez GestureDetector au lieu de IconButton

Vous pouvez également utiliser GestureDetector au lieu de IconButton, recommandé par Shyju Madathil.

GestureDetector( onTap: () {}, child: Icon(Icons.volume_up) )
11
sgon00

J'étais confronté à un problème similaire en essayant de rendre une icône à l'emplacement où l'utilisateur touche l'écran. Malheureusement, la classe Icon enveloppe votre icône choisie dans un SizedBox.

En lisant un peu la source de la classe Icon, il s'avère que chaque icône peut être traitée comme du texte:

Widget iconWidget = RichText(
      overflow: TextOverflow.visible,
      textDirection: textDirection,
      text: TextSpan(
        text: String.fromCharCode(icon.codePoint),
        style: TextStyle(
          inherit: false,
          color: iconColor,
          fontSize: iconSize,
          fontFamily: icon.fontFamily,
          package: icon.fontPackage,
        ),
      ),
    );

Donc, par exemple, si je veux rendre Icons.details pour indiquer où mon utilisateur vient de pointer, sans aucune marge, je peux faire quelque chose comme ceci:

Widget _pointer = Text(
      String.fromCharCode(Icons.details.codePoint),
      style: TextStyle(
        fontFamily: Icons.details.fontFamily,
        package: Icons.details.fontPackage,
        fontSize: 24.0,
        color: Colors.black
      ),
    );

Le code source de Dart/Flutter est remarquablement accessible, je recommande fortement de creuser un peu!

1
Aaron Myatt