How to change the size of 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.

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: () {}),
        ),
      ),

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

final 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: () {},
  ),
);

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

Update

Just using a SizedBox does not seem to scale the child inside the FAB. You need to use a FittedBox in between.

  floatingActionButton: SizedBox(
    height: 100.0,
    width: 100.0,
    child: FittedBox(
      child: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {},
      ),
    ),
  ),

Thanks chemturion for the comment.

Please checkout Raouf Rahiche's answer for more details.

---

Old Answer

Use a SizedBox

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

Screenshot:

---

• Small (40 x 40)

  FloatingActionButton.small(
    onPressed: onPressed,
    child: Icon(Icons.edit),
  )
  

• Regular (56 x 56)

  FloatingActionButton(
    onPressed: onPressed,
    child: Icon(Icons.edit),
  )
  

• Large (96 x 96)

  FloatingActionButton.large(
    onPressed: onPressed,
    child: Icon(Icons.edit),
  )
  

• Extended

  FloatingActionButton.extended(
    onPressed: onPressed,
    label: Text('Extended'),
    icon: Icon(Icons.edit),
  )
  

• Custom size (A x B):

  SizedBox(
    width: 20,
    height: 20,
    child: FittedBox(
      child: FloatingActionButton(
        onPressed: onPressed,
        child: Icon(Icons.edit),
      ),
    ),
  )
  

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:

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

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

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.

FloatingActionButton has a property called mini which can be set to true.

floatingActionButton: FloatingActionButton(
    mini: true,
    onPressed: (){

    },
    child: Icon(Icons.play_arrow_outlined),
  ),

This is how I have implemented in one of my apps:

floatingActionButton: Container(
    height: 100.0,
    width: 100.0,
    child: FittedBox(
      child: FloatingActionButton(
        onPressed: _loadProgress,
        child: Icon(Icons.ac_unit_outlined),
        child: Text(
          'Get Joke!',
          textAlign: TextAlign.center,
          style: TextStyle(fontWeight: FontWeight.w700, fontSize: 10.0),
        ),
      ),
    ),
  ),

https://api.flutter.dev/flutter/material/FloatingActionButton/FloatingActionButton.html

use mini: true

FloatingActionButton(
        child: Icon(
          Icons.delete
        ),
        onPressed: () {
        }, mini: true,
      ),

Try this:

floatingActionButton: Container(
    height: 50.0,
    width: MediaQuery.of(context).size.width * 0.92,
    decoration: BoxDecoration(
        color: Colors.blue, borderRadius: BorderRadius.circular(30)),
    child: Center(
      child: Text(
        'SAVE',
        textAlign: TextAlign.center,
        style: TextStyle(
            fontWeight: FontWeight.w700,
            fontSize: 16.0,
            color: whiteTextColor),
      ),
    ),
  ),