web-dev-qa-db-fra.com

Flutter padding pour tous les widgets?

J'essaie d'ajouter un peu de remplissage en haut et en bas du texte et des icônes d'un widget Carte. J'ai trouvé que le flutter était un moyen facile de faire cela pour les conteneurs, mais ne semblait pas pouvoir le faire avec d'autres widgets (sauf pour les emballer dans un conteneur). C'est le code que j'ai jusqu'à présent:

  body: new Container(
    padding: new EdgeInsets.all(10.0),
    child: new Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget> [
        new Card(
          color: Colors.white70,
          child: new Container(
            padding: new EdgeInsets.all(10.0),
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget> [ //Padding between these please
                new Text("I love Flutter", style: new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold)),
                new Icon(Icons.favorite, color: Colors.redAccent, size: 50.0)
              ]
            )
          )
        )
      ]
    )
  )

Ainsi, dans mes enfants de column, j'aimerais ajouter un peu de rembourrage en haut et en bas sans avoir à insérer un nouveau conteneur. Est-ce possible?

androidiosflutter
26
Bram Vanbilsen

Vous pouvez utiliser Padding, qui est un très simple Widget qui prend simplement un autre Widget comme un objet child et un objet EdgeInsets comme le celui que vous utilisez déjà comme padding.

Cette approche de la "composition par héritage" dans Flutter est très intentionnelle. Vous pouvez trouver une discussion récente sur les avantages et les inconvénients de canal Gitter de Flutter.

44
david.mihola

Voici une réponse supplémentaire qui fournit du code. Comme l'indique la réponse acceptée, vous pouvez utiliser le widget Remplissage. Flutter est différent de Android ou iOS car Padding est un widget plutôt qu'une propriété. (Il s'agit d'une propriété de Container, mais il s'agit toujours d'un widget en interne.)

Ceci est un widget Texte entouré d'un widget Padding.

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

Voir ma réponse plus complète ici .

18
Suragch