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

CodePudding user response：

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

Other way:

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

Result:

CodePudding user response：

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.

CodePudding user response：

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