web-dev-qa-db-fra.com

Comment définir la couleur d'arrière-plan d'un bouton d'icône?

Je souhaite appliquer la couleur d'arrière-plan au bouton icône, mais je ne vois pas de propriété backgroundColor explicite pour celui-ci. Je veux y parvenir:

enter image description here

Actuellement, j'ai pu réaliser jusqu'ici:

enter image description here

Voici le code jusqu'à présent:

@override
  Widget build(BuildContext context) {

return Scaffold(
    resizeToAvoidBottomPadding: false,
    backgroundColor: Color(0xFF13212C),
    appBar: AppBar(
      title: Text('Demo'),
    ),
    drawer: appDrawer(),
    body: new Center(
    child: new Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
 //     mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      new Column(
        children: <Widget>[
       //   new Flexible(
    new TextField(
        style: new TextStyle(
        color: Colors.white,
      fontSize: 16.0),
      cursorColor: Colors.green,
      decoration: new InputDecoration(

        suffixIcon: new IconButton(
            icon: new Image.asset('assets/search_icon_ivory.png'),onPressed: null),

      fillColor: Colors.black,
        contentPadding: new EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 20.0),
        filled: true,
        hintText: 'What Do You Need Help With?',
        hintStyle: new TextStyle(
          color: Colors.white
        )
    )
    )
      //    )
    ]
),
6
Darshan

Vous pouvez utiliser un avatar circulaire avec la hauteur du champ de texte radius = text/2 ou la hauteur que vous préférez.

Pour comprendre les spécifications des champs de texte, vous pouvez visiter material.io

Donc, le morceau de code va ressembler à ceci:

CircleAvatar(
                radius: 30,
                backgroundColor: Color(0xff94d500),
                child: IconButton(
                  icon: Icon(
                    Icons.search,
                    color: Colors.black,
                  ),
                  onPressed: () {
                    ...
                  },
                ),
              ),

De cette façon, vous obtenez un bouton icône avec une couleur d'arrière-plan. J'espère que cela peut vous aider.

Icon button with background

1
FJCG