Je souhaite aligner un bouton plat vers la gauche avec les autres éléments, mais certaines propriétés m'empêchent de le faire.

flutter outline screenshot

Voici le code:

      body: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Container(
        child: Padding(
          padding:
              EdgeInsets.only(top: 60, left: 30, right: 30, bottom: 30),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              FlatButton(
                padding: EdgeInsets.symmetric(horizontal: 0, vertical: 0),
                onPressed: () {
                  _scaffoldKey.currentState.openDrawer();
                },
                child: Icon(
                  Icons.list,
                  size: 30,
                  color: Colors.tealAccent,
                ),
              ),

Que puis-je faire ici?

0
Ashwin 15 oct. 2020 à 17:04

2 réponses

Meilleure réponse

Flat Button y ajoute automatiquement un remplissage fantôme, voir ce problème. La solution est d'utiliser le widget InkWell. Votre exemple implémenté avec InkWell pour supprimer le remplissage dans le bouton ressemblerait à ceci:

Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            child: Padding(
              padding:
                  EdgeInsets.only(top: 60, left: 30, right: 30, bottom: 30),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  InkWell(
                    child: Icon(
                      Icons.list,
                      size: 30,
                      color: Colors.tealAccent,
                    ),
                    onTap: () {}
                  ),
                ],
              ),
            ),
          ),
        ],
      ),

L'avantage d'utiliser un InkWell au lieu d'un GestureDetector est qu'il vous donne l'effet d'éclaboussure d'aspect matériel qu'un FlatButton aurait. Si cela n'est pas souhaitable, vous pouvez remplacer le widget InkWell par un FlatButton.

1
Gabe 15 oct. 2020 à 14:31

Vous pouvez utiliser GestureDetector au lieu de FlatButton comme le code ci-dessous:

Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
          Container(
              child: Padding(
                  padding:
                      EdgeInsets.only(top: 60, left: 30, right: 30, bottom: 30),
                  child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        GestureDetector(
                          onTap: () {
                            _scaffoldKey.currentState.openDrawer();
                          },
                          child: Icon(
                            Icons.list,
                            size: 30,
                            color: Colors.tealAccent,
                          ),
                        ),
                        Text('hhfhdhh')
                      ])))
        ])));
1
Ali Mohammadzadeh 15 oct. 2020 à 14:31