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

Question

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 20x20)

my code result picture

Answer 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:

Answer 2

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

Answer 3

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.