Comment ajouter des marges à mon widget? Comprendre l'effet des EdgeInsets

Question

J'essaie de comprendre ma position dans Flutter. Donc, j'ai actuellement quelque chose qui ressemble à ceci  

J'aimerais ajouter un petit espace n/b à la recherche dans Textfield et le bouton . Voici à quoi ressemble le contrôle de mon code. J'essaie d'appeler ma textFieldSearchBox afin qu'il ait une petite marge à droite. J'ai essayé d'augmenter les incrustations Edge, mais cela semble augmenter la taille du champ TextField. Je ne sais pas pourquoi? Je sais que je pourrais ajouter un élément de remplissage après TextField, mais je voulais savoir quelles sont mes autres options. Pourquoi augmenter les EdgeInsets dans la décoration de textFieldSearchBox augmente-t-il la taille de la zone de texte? Ma situation idéale serait d’ajouter une marge autour de toutes les bordures de cette zone de texte (LTRB) . Des suggestions?

TextField textFieldSearchBox = new TextField(
            keyboardType: TextInputType.text,
            controller: filterController,
            autofocus: false,
            decoration: new InputDecoration(
                contentPadding: new EdgeInsets.fromLTRB(20.0, 10.0, 100.0, 10.0),
                border:
                new OutlineInputBorder(borderRadius: BorderRadius.only()),
            ),
        );

    var optionRow = new Row(
            children: <Widget>[
                new Expanded(child:textFieldSearchBox),
                searchButton,
                new IconButton(
                    icon: new Icon(Icons.filter),
                    onPressed: (){print("Called....");},
                ),
            ],
        );

    return new Scaffold(
                appBar: new AppBar(
                    title: new Text("Title goes here.."),
                    backgroundColor: Colors.lightBlueAccent,
                ),
                body: new Container(
                    child:new Column(
                        children: <Widget>[
                            optionRow,

                        ],
                    ),
                ),
        );

Answer 1

C'est une réponse plus généralisée pour les futurs lecteurs.

Comment ajouter de la marge à un widget

Dans Flutter, nous parlons généralement d'ajouter Padding autour d'un widget plutôt que de la marge. Le widget Conteneur a un paramètre marginname__, mais même ceci l'enveloppe simplement enfant (et toute décoration qu'il a) avec un widget Padding en interne.

Donc, si vous avez quelque chose comme ça

et vous voulez ajouter de l'espace autour du widget comme celui-ci

alors vous venez d'envelopper le widget avec Padding. C’est facile à faire si vous placez votre curseur sur le nom du widget et appuyez sur Alt+Enter (ou Option+Return sur un Mac) dans Android Studio. Ensuite, choisissez Ajouter un rembourrage dans le menu.

qui te donne quelque chose comme ça

Padding(
  padding: const EdgeInsets.all(8.0),
  child: Text(
      "text",
      style: TextStyle(fontSize: 20.0),
    ),
);

Signification de EdgeInsets

Lorsque vous définissez un remplissage, vous ne pouvez pas utiliser directement un entier ou un double. Vous devez spécifier l'espace (nombre de pixels logiques) à l'aide des EdgeInsets. Vous pouvez définir tous les côtés en même temps (comme nous l'avons vu dans l'exemple ci-dessus), ou vous pouvez les définir individuellement comme suit:

Widget myWidget() {
  return  Padding(
    padding: const EdgeInsets.only(
      left: 40,
      top: 20,
      right: 40,
      bottom: 20,
    ),
    child: Text("text"),
  );
}

Puisque, dans cet exemple, leftet rightsont identiques et que topet bottomsont identiques, nous pouvons simplifier EdgeInsets en

padding: const EdgeInsets.symmetric(
  horizontal: 40,
  vertical: 20,
),

Utilisation d'un conteneur pour définir le remplissage et la marge

Une autre méthode consiste à envelopper votre widget dans un conteneur. Le widget Conteneur possède à la fois une propriété de remplissage et une marge. (Cela ne serait toutefois nécessaire que si vous ajoutiez également une décoration comme une couleur d'arrière-plan ou une bordure.)

Widget myWidget() {
  return Container(
    margin: EdgeInsets.all(30),
    padding: EdgeInsets.all(20),
    decoration: BoxDecoration(
        color: Colors.yellow,
        border: Border.all(color: Colors.black),
    ),
    child: Text(
      "Flutter",
      style: TextStyle(
          fontSize: 50.0
      ),
    ),
  );
}

Answer 2

Pourquoi l'augmentation des EdgeInsets dans la décoration de textFieldSearchBox augmente-t-elle la taille de la zone de texte?

Parce que ce remplissage est utilisé pour le internal padding. Celui que vous voyez entre les bordures et le texte actuel.

Ma situation idéale serait d’ajouter une marge autour de toutes les limites de cette zone de texte (LTRB). Aucune suggestion ?

Enveloppez votre TextField dans une Padding. C’est le moyen idéal d’obtenir la disposition désirée en flutter.

final textFieldSearchBox = new Padding(
  padding: const EdgeInsets.only(right: 8.0),
  child: new TextField(
    keyboardType: TextInputType.text,
    controller: filterController,
    autofocus: false,
    decoration: new InputDecoration(
      contentPadding: new EdgeInsets.fromLTRB(20.0, 10.0, 100.0, 10.0),
      border: new OutlineInputBorder(borderRadius: BorderRadius.only()),
    ),
  ),
);

Answer 3

Vous pouvez mettre le composant dans un rembourrage, comme ceci

var optionRow = new Row(
            children: <Widget>[
                new Expanded(child:textFieldSearchBox),
                new Padding(padding: new EdgeInsets.all(20.0),child:button,),
                new IconButton(
                    icon: new Icon(Icons.filter),
                    onPressed: (){print("Called....");},
                ),
            ],
        );

Answer 4

Puisque la disposition de vos widgets est Row, pourquoi n’ajoutez-vous pas la propriété mainAxisAlignment comme ceci:

mainAxisAlignment : MainAxisAlignment.spaceAround

Ou

mainAxisAlignment : MainAxisAlignment.spaceBetween