web-dev-qa-db-fra.com

Bouton rond avec texte et icône en flutter

comment avoir un bouton avec du texte et une icône pour la variable flutter?

Je voulais avoir une button qui ressemble à une icône avec un texte qui est capable de mettre au bas de l'écran

Par exemple, l'icône est comme ici: Android-button-with-icon-and-text

 enter image description here

iconsflutter
4
Daniel Mana

Vous pouvez simplement utiliser des constructeurs nommés pour créer différents types de boutons avec des icônes. Par exemple

FlatButton.icon(onPressed: null, icon: null, label: null);
RaisedButton.icon(onPressed: null, icon: null, label: null);

Mais si vous avez des exigences spécifiques, vous pouvez toujours créer un bouton personnalisé avec différentes dispositions ou simplement envelopper un widget dans GestureDetector .

9
ap14

Vous pouvez y parvenir en utilisant une variable FlatButton contenant un Column (pour afficher un texte sous l'icône) ou une Row (pour le texte situé près de l'icône), puis en ayant un enfant Icon et un widget Text.

Voici un exemple:

class MyPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) =>
      Scaffold(
        appBar: AppBar(
          title: Text("Hello world"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              FlatButton(
                onPressed: () => {},
                color: Colors.orange,
                padding: EdgeInsets.all(10.0),
                child: Column( // Replace with a Row for horizontal icon + text
                  children: <Widget>[
                    Icon(Icons.add),
                    Text("Add")
                  ],
                ),
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => {},
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      );
}

Cela produira les éléments suivants:

 Result

3
Xavi Rigau

Utilisez Column ou Row dans un enfant Button, Row pour le bouton horizontal, Column pour la verticale, et n'oubliez pas de contient le avec la taille dont vous avez besoin:

Container(
  width: 120.0,
  height: 30.0,
  child: RaisedButton(
    color: Color(0XFFFF0000),
    child: Row(
      children: <Widget>[
        Text('Play this song', style: TextStyle(color: Colors.white),),
        Icon(Icons.play_arrow, color: Colors.white,),
      ],
    ),
  ),
),
1
Mariano Argañaraz

Flutter vous donne un guide pour créer une mise en page. vous pouvez voir les exemples ici https://flutter.io/tutorials/layout/

0
Manoj Kumar

Vous pouvez faire quelque chose comme

RaisedButton.icon( elevation: 4.0,
                    icon: Image.asset('images/image_upload.png' ,width: 20,height: 20,) ,
                      color: Theme.of(context).primaryColor,
                    onPressed: getImage,
                    label: Text("Add Team Image",style: TextStyle(
                        color: Colors.white, fontSize: 16.0))
                  ),
0
Manoj Perumarath