Comment créer un bouton combinant texte et icône dans Flutter ?
Le framework Flutter est conçu pour vous permettre de créer votre application à destination des systèmes d'exploitation mobiles. Il fonctionne avec un système de widgets que l'on agence pour former l'interface. Un widget peut contenir du texte, des images ou bien d'autres widgets. Flutter fournit des classes spécifiques pour des widgets spécifiques, afin de faciliter le développement. Vous pouvez ainsi créer des boutons avec des icônes et du texte en même temps.
Le framework Flutter propose dans ces boutons des constructeurs acceptant à la fois une icône et un label en même temps. Les classes "FlatButton" et "RaisedButton" ont toutes les 2 cette possibilité grâce à leur méthode "icon".
FlatButton.icon(onPressed: null, icon: null, label: null); RaisedButton.icon(onPressed: null, icon: null, label: null);
Il est également possible d'utiliser plusieurs éléments du framework pour faire un bouton avec une image. Lorsque vous définissez votre bouton avec une des classes, vous pouvez utiliser l'attribut "Child" pour positionner, à l'intérieur, une colonne. Mettez ensuite dans cette colonne l'icône suivie du texte pour que l'icône soit au-dessus. L'inverse permet de positionner l'icône en dessous du texte. Pour obtenir une icône et un texte alignés horizontalement, utilisez une ligne à la place de la colonne.
//Alignement vertical
FlatButton(
onPressed: () => {},
color: Colors.blue,
padding: EdgeInsets.all(10.0),
child: Column(
children: [
Icon(Icons.add),
Text("Ajouter")
],
),
)
//Alignement horizontal
FlatButton(
onPressed: () => {},
color: Colors.blue,
padding: EdgeInsets.all(10.0),
child: Row(
children: [
Icon(Icons.add),
Text("Ajouter")
],
),
)