CODEWITHSUNDEEP
flutterflutter-layouticonbutton
Darshan
Darshan

Reputation: 11634

How to set background color for an icon button?

I want to apply background color for icon button but I don't see an explicit backgroundColor property for it. I want to achieve this:

enter image description here

Currently I was able to achieve till here:

enter image description here

Below is the code so far:

@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
        )
    )
    )
      //    )
    ]
),

Upvotes: 83

Views: 152020

Answers (20)

Vivek
Vivek

Reputation: 5213

enter image description here

Container(
  width: 40,
  height: 40,
  decoration: BoxDecoration(
    color: Theme.of(context)
        .primaryColor
        .withAlpha(200), // Background color
    shape: BoxShape.circle, // Shape of the container (optional)
  ),
  child: Center(
    child: IconButton(
        color: Colors.white,
        onPressed: () {},
        icon: const Icon(
          Icons.call,
          size: 20,
        )),
  ),
);

Upvotes: 1

Sanan Asrhad
Sanan Asrhad

Reputation: 1

SizedBox(

            height: 45,
            child: TextField(
                decoration: InputDecoration(
                  suffixIcon: Container(
                    width: 100,
                    child: Row(
                      children: [
                        IconButton(
                          onPressed: () {
                            print('Media button pressed');
                          },
                          icon: Icon(Icons.camera_alt_outlined),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(4.0),
                          child: Container(
                            width: 50,
                            decoration: BoxDecoration(
                              color: Colors.black,
                              borderRadius: BorderRadius.circular(20)
                            ),
                            child: IconButton(
                              onPressed: () {
                                print('Searching');
                              },
                              icon: Icon(Icons.search, color: Colors.white,),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  filled: true,
                  fillColor: Colors.grey.shade200,
                    label: Text('Search here...'),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(60),
                      borderSide: BorderSide(
                        color: Colors.black,
                      )[enter image description here][1]
                    ),
                ),
            ),
          ),

Upvotes: 0

Rajvi Raval
Rajvi Raval

Reputation: 26

suffixIcon: Container(
decoration: BoxDecoration(
  color: Colors.blue, 
  borderRadius: BorderRadius.circular(8), 
),
child: IconButton(
  icon: Icon(Icons.add),
  onPressed: () {
  },
  color: Colors.white, 
),

),

Upvotes: 1

FGoo
FGoo

Reputation: 375

If you're using Material 3, Flutter has introduced IconButton.filled() constructor which gives it a background color automatically based on the material colorScheme. It also has the added benefit of adjusting to different icon sizes.

Example:

IconButton.filled(
    icon: const Icon(Icons.phone)
)

dark mode filled IconButton light mode filled IconButton
Dark mode and light mode filled IconButtons

If you want to specify a color, use this answer

Upvotes: 16

NearHuscarl
NearHuscarl

Reputation: 81270

From the official Flutter docs:

Adding a filled background

Icon buttons don't support specifying a background color or other background decoration because typically the icon is just displayed on top of the parent widget's background. Icon buttons that appear in AppBar.actions are an example of this.

It's easy enough to create an icon button with a filled background using the Ink widget. The Ink widget renders a decoration on the underlying Material along with the splash and highlight InkResponse contributed by descendant widgets.

Tl;dr: IconButton doesn't support background color out-of-the-box. Use this workaround to add the background color and the splash effect when clicking the button:

Ink(
  decoration: ShapeDecoration(
    color: Colors.blue,
    shape: CircleBorder(),
  ),
  child: IconButton(
    icon: Icon(Icons.add),
    color: Colors.white,
    onPressed: () {},
  ),
),

Live Demo

This is now the officially recommended way to set background color on an IconButton, and the flutter docs have been updated to reflect this.

Upvotes: 35

Aaron Kennedy
Aaron Kennedy

Reputation: 91

You can solve this with a GestureDetector and a container. I like using this solution because of the variety of controls it gives you from the combination.

Additionally, GestureDetector opens up more interaction events if you want to incorporate those across devices.

GestureDetector(
      onTap: () {},
      child: ClipOval(
        child: Container(
          //add extra margin to visual center icon if icon isn't balanced
          color: backgroundColor,
          width: size,
          height: size,
          child: Icon(
            Icons.question_mark_sharp,
            size: size * 0.6, //size to your preference
            color: iconColor,
          ),
        ),
      ),
    );

Alternatively you can do this from another question circle icon button

RawMaterialButton(
  onPressed: () {},
  elevation: 2.0,
  fillColor: Colors.white,
  child: Icon(
    Icons.pause,
    size: 35.0,
  ),
  padding: EdgeInsets.all(15.0),
  shape: CircleBorder(),
)

Upvotes: 1

Satyajyoti Biswas
Satyajyoti Biswas

Reputation: 927

With latest flutter and material-3 design system, this is just a piece a cake.

IconButton(
  onPressed: () { ... },
  icon: const Icon(Icons.search),
  style: IconButton.styleFrom(backgroundColor: Colors.redAccent),
),

Upvotes: 40

R.Raman
R.Raman

Reputation: 82

You can use FloatingActionButton for such case But you cannot use FAB in a widget for multi use, it shows error. In such case use this code. It will work on images also.

  Card(
    color: Colors.blue,
    shape: CircleBorder(), 
    child: IconButton(
        icon: const Icon(
          Icons.edit,
          size: 20,
          color: Colors.white,
        ),
        onPressed: () {
          print('tapped');  
        },
      ));

Upvotes: -1

Hammad Parveez
Hammad Parveez

Reputation: 346

I've used multiple colors to demonstrate You can do as you want. And I say that You put your IconButton into Material widget. This will also solve your Splash Color (which is slightly grey color with some transparency).

enter image description here

Upvotes: 1

Eng
Eng

Reputation: 1704

SizedBox(
  height: 38,
  width: 38,
  child: ElevatedButton(
    style: ElevatedButton.styleFrom(
    primary: Colors.grey,
    onPrimary: Colors.red,
    padding: EdgeInsets.zero,
    shape: const CircleBorder(),
  ),
  onPressed: () {},
  child: const Icon(Icons.refresh),
);

Upvotes: 1

Robson Gehl
Robson Gehl

Reputation: 1

ElevatedButton with Theme.

 ElevatedButton(
  style: ButtonThemes.iconButton,
  child: Icon(
    icon,
    color: color,
  ),
  onPressed: () {},
)

static ButtonStyle get iconButton=> ButtonStyle(
  backgroundColor: MaterialStateProperty.all(
    backgroundColor,
  ),
  ...
);

Upvotes: -1

AnasSafi
AnasSafi

Reputation: 6224

Official solution:

Depends on official documentation of flutter about IconButton Class:

Adding a filled background

Icon buttons don't support specifying a background color or other background decoration because typically the icon is just displayed on top of the parent widget's background. Icon buttons that appear in [AppBar.actions] are an example of this.

It's easy enough to create an icon button with a filled background using the [Ink] widget. The [Ink] widget renders a decoration on the underlying [Material] along with the splash and highlight [InkResponse] contributed by descendant widgets.

So the code will be like this:

   Material(
    color: Colors.transparent,
    child: Ink(
      decoration: ShapeDecoration(
        color: Colors.white,
        shape: CircleBorder(),
      ),
      child: IconButton(
        tooltip: "Some Text...",
        icon: Icon(Icons.flash_off),
        color: Colors.black,
        onPressed: () {},
      ),
    ),
  );

See official example code from flutter, click here ...

Note: Reason to wrap it with Material widget because Ink is drawn on the underlying Material widget, if you remove it decoration will not appear.

Upvotes: 1

Dean Villamia
Dean Villamia

Reputation: 636

Add a Material

Material(
color:Colors.green
child:IconButton(
    icon: Icon(Icons.add),
    color: Colors.white,
    onPressed: () {},
  ));

Upvotes: 1

Mukta
Mukta

Reputation: 1547

Hope, this will satisfied you

Ink(
  decoration: ShapeDecoration(
     color: Colors.red,
     shape: CircleBorder(),
  ),
  child: IconButton(
    icon: Icon(Icons.delivery_dining),
    onPressed: () {
    print('pressed');
    },
  ),
),

Upvotes: 12

ulusoyca
ulusoyca

Reputation: 881

You can achieve it with TextButton

    TextButton(
      style: TextButton.styleFrom(
        backgroundColor: colorScheme.primary,
        shape: CircleBorder(),
      ),
      child: Icon(
        MdiIcons.send,
        color: colorScheme.onPrimary,
      ),
      onPressed: () {},
    ),

The output will look like this: enter image description here

Upvotes: 29

WSBT
WSBT

Reputation: 36323

IconButton does not support that, and RaisedButton recently is deprecated in favour of ElevatedButton, which supports changing background colours as well as shapes, but you cannot easily make it a perfect circle.

So to think out of the box, why not use a FloatingActionButton? They are just widgets too, so they can appear anywhere on the screen. For example, I'm using a FAB in a video chat demo app to toggle cameras.

Use a FAB at a random location on the screen

Example code:

FloatingActionButton(
  child: Icon(
    Icons.flip_camera_ios_outlined,
    color: Colors.white,
  ),
  onPressed: () {
    // do your thing here
  },
)

And if you aren't happy about its default size, you can always wrap it with a SizedBox to change the width however you see fit.

Upvotes: 4

Daniel Vilela
Daniel Vilela

Reputation: 607

If you want it raised, you can use RaisedButton like this:

                          ConstrainedBox(
                            constraints: BoxConstraints(maxWidth: 50),
                            child: RaisedButton(
                              color: kColorLightGrey,
                              padding: EdgeInsets.symmetric(
                                vertical: 12,
                              ),
                              shape: StadiumBorder(),
                              child: Icon(Icons.refresh),
                              onPressed: () {
                              },
                            ),
                          ),

Upvotes: 0

FJCG
FJCG

Reputation: 1128

You can use a Circular Avatar with the radius = text field's height/2 or whatever height you prefer.

To figure out text field specs you can visit material.io

So the chunk of code is going to be like the following:

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

This way you get an Icon button with background color. I hope this can help you guys.

Icon button with background

Upvotes: 90

Viren V Varasadiya
Viren V Varasadiya

Reputation: 27137

you can wrap your IconButton with Container and use color property to achieve desire output. May Following Example help You.

 suffixIcon: Container(
              color: Colors.green,
              child: new IconButton(
                  icon: new Icon(Icons.search,color: Colors.white,),onPressed: null),
            ),

Upvotes: 59

olexa.le
olexa.le

Reputation: 1807

You can not do that with IconButton widget yet. Good news is that you may replace it with FlatButton like that:

suffixIcon: new FlatButton(
                      color: Colors.green,
                      disabledColor: Colors.green[100],
                      child: Icon(Icons.search)),

color will be used in case onPressed handler is defined, otherwise it will be rendered with disabledColor background.

Upvotes: 7

Related Questions