Question 79494 in Flutter Question posted in
The official Flutter documentation can be found here.

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

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

my code result picture

Tags:

3

Answers


  1. 0

    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:

    image

    Other way:

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

    Result:

    image

    Login or Signup to reply.
  2. 0

    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.

    enter image description here

    Login or Signup to reply.
  3. 0

    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

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search