CODEWITHSUNDEEP
flutterflutter-layout
JayVDiyk
JayVDiyk

Reputation: 4487

How To Make a Squared App Bar Button in Flutter?

I am wondering how do we make an App Bar action button like the one in the picture. It seems that adding a background or wrapping a widget on an Icon will not achieve the look of the button in the picture below.

enter image description here

Upvotes: 0

Views: 2802

Answers (2)

timilehinjegede
timilehinjegede

Reputation: 14053

I made a demo of what you are trying to achieve:

  return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text(
          'Title',
        ),
        centerTitle: true,
        actions: [
          // squared button/icon
          Padding(
            padding: const EdgeInsets.only(right: 20.0, top: 10.0, bottom: 10.0),
            child: Container(
              width: 35,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8.0),
                color: Colors.white.withOpacity(0.5),
              ),
              child: Center(
                child: Icon(
                  Icons.settings,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ],
      ),
  body: .... YOUR WIDGETS ...

RESULT:

result

Upvotes: 3

Stefano Leone
Stefano Leone

Reputation: 703

You can use an Icon inside a Container with equal width and heigth (so you obtain a square), then you can round it with BorderRadius to obtain that effect.

Of course you should use the color property of the Container to fill the background.

Upvotes: 0

Related Questions