How to set size to FloatingActionButton

问题

I'm trying to set a size to a FloatingActionButton in flutter, I wanna set width/height, I mean, make the button bigger, I was looking for a circular button, but the only one that I got was this one, so, I started to work with this, but I need it a little bigger.

回答1:

Use a Container where you can specify width and height, then use a RawMaterialButton, like this:

myFabButton = Container(
      width: 200.0,
      height: 200.0,
      child: new RawMaterialButton(
        shape: new CircleBorder(),
        elevation: 0.0,
        child: Icon(
          Icons.favorite,
          color: Colors.blue,
         ),
      onPressed: (){},
  );

回答2:

wrap your FAB with a FittedBox inside a Container or SizedBox and then change the width and the height of it.

example :

floatingActionButton: Container(
        height: 100.0,
        width: 100.0,
        child: FittedBox(
          child: FloatingActionButton(onPressed: () {}),
        ),
      ),

回答3:

Use a SizedBox

SizedBox(
  width: 200.0,
  height: 200.0,
  child: FloatingActionButton(
    onPressed: () {},
  ),
)

回答4:

You do not have to reinvent the wheel, flutter team knew it will be needed.

Instead of using regular FloatingActionButton() use FloatingActionButton.extended()

example code:

FloatingActionButton.extended(
  onPressed: () {},
  icon: Icon(Icons.save),
  label: Text("DOWNLOAD"),
),

src: proandroiddev

回答5:

FloatingActionButton(
  mini: true, // set it to true
  onPressed: () {},
)

This makes FAB 40 logical pixels wide and tall compare to its original size 56.

回答6:

Most of the answers here using hardcoded values, but actually we have to apply generic solutions here, which should be constant in all the UI.

Scaffold(
      floatingActionButton: Container(
        height: MediaQuery.of(context).size.width * 0.2, 
        width: MediaQuery.of(context).size.width * 0.2,
        child: FloatingActionButton(onPressed: () {}),
      ),

Set width and height using MediaQuery which will be same across the devices.

Output:

回答7:

RawMaterialButton(
  elevation: 2.0,
  shape: CircleBorder(),
  fillColor: Colors.red,
  onPressed: (){},
  child: Icon(
    Icons.add,
    color: Colors.white,
    size: 20.0,
  ),
  constraints: BoxConstraints.tightFor(
    width: 56.0,
    height: 56.0,
  ),
)

BY this way .. you can add any type of button.

回答8:

You can wrap your button with a Transform.scale() widget:

  floatingActionButton: Transform.scale(
    scale: 1.5,
    child: FloatingActionButton(onPressed: () {}),
  )

来源：https://stackoverflow.com/questions/52786652/how-to-set-size-to-floatingactionbutton

标签

dart

Flutter