How to create rectangle icon button without label in flutter?

Question

we can create the icon button with FlatButton.icon() but it requires label parameter. we can also use IconButton() but it makes a circular icon button.

how to make a rectangle icon button like FlatButton() but with just icon in flutter?

just use FlatButton(child: Icon(Icons.add), minWidth: 0, ) – dlohani Dec 02 '19 at 09:14 — dlohani, Dec 02 '19 at 09:14

score 5 · Accepted Answer · answered Dec 02 '19 at 09:07

5

Container(
  height: 100.0,
  width: 100.0,
  child: FlatButton(
    child: Icon(Icons.place),
    onPressed: () {},
  ),
),

answered Dec 02 '19 at 09:07

Stellar Creed

384
5
14

I see no rectangle button there, it just shows a (pretty big) rectangle when you clock on it. – Gigili Jul 01 '21 at 10:50

score 1 · Answer 2 · answered Dec 02 '19 at 09:10

You can create a container with an icon as a child and wrap the container with the InkWell widget to make it clickable. This way you can shape your container to your need, which in this case is a rectangle.

Here's a code sample -

InkWell(
        child: Container(
          decoration: BoxDecoration(
              shape: BoxShape.rectangle,
              border: Border.all(
                width: 1,
              )),
          child: Icon(Icons.add, color: Colors.black),
        ),
        onTap: () {},
      ),

score 0 · Answer 3 · answered Jan 27 '23 at 12:59

Using Inkwell combination with container you can make customized button easily as done in above example

InkWell(
        child: Container(
          decoration: BoxDecoration(
              shape: BoxShape.rectangle,
              border: Border.all(
                width: 1,
              )),
          child: Icon(Icons.add, color: Colors.black),
        ),
        onTap: () {},
      ),

How to create rectangle icon button without label in flutter?

3 Answers3