Flutter, How To Align The Cross ICON To Center Position?

Contents hide

1 flutter, how to align the cross ICON to center position?

Problem Description:

SizedBox(
        width: 20,
        height: 20,
        child: FloatingActionButton(
          onPressed: null,
          child: Icon(Icons.add),
        ),
),

I want to size Button and also want to put the ICON to center position, but it aligns bottomright little bit… how can I do it? (button size should be 20×20)

my code result picture

Solution – 1

Try to use Container instead of SizedBox and set alignment:Alignment.center, refer Align:

   Container(
            alignment: Alignment.center,
            width: 20,
            height: 20,
            child: FloatingActionButton(
              onPressed: null,
              child: Icon(
                Icons.add,
                size: 15,
              ),
            ),
          ),

Result:

Other way:

     FloatingActionButton(
            onPressed: null,
            child: Icon(Icons.add),
          ),

Result:

Solution – 2

You need to add size for icon too:

SizedBox(
    width: 20,
    height: 20,
    child: FloatingActionButton(
      onPressed: null,
      child: Icon(
        Icons.add,
        size: 20,
      ),
    ),
  ),

by default Icon size is 24, so when you want smaller size than that you need to change Icon size too.

Solution – 3

FloatingActionButton has a parameter named as mini which is false default and can be used. Someone might be interested on it.

FloatingActionButton(
  onPressed: null,
  mini: true,
  child: Icon(Icons.add),
),

Left one is using mini:true

Rate this post