How to Set the Size to FloatingActionButton In Flutter ??

· 4 min read
How to Set Size to FloatingActionButton In Flutter
How to Set Size to FloatingActionButton In Flutter

The floating Action Button represents the primary action of the screen and generally located at the right bottom of the screen. In today’s article, we will go through how to set the size to FloatingActionButton in Flutter.

How to Set the Size to FloatingActionButton In Flutter?

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

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

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

We will get output like a below:

Floating Action Button Flutter
Floating Action Button Flutter
  • You can wrap your button with a Transform.scale() widget:
    floatingActionButton: Transform.scale(
      scale: 1.5,
      child: FloatingActionButton(onPressed: () {}),
    )
  • Use a SizedBox Widget
    SizedBox(
      width: 200.0,
      height: 200.0,
      child: FloatingActionButton(
        onPressed: () {},
      ),
    )
  • You can also use RawMaterialButton like a below:
    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,
      ),
    )
  • Instead of using regular FloatingActionButton() use FloatingActionButton.extended()
    FloatingActionButton.extended(
      onPressed: () {},
      icon: Icon(Icons.save),
      label: Text("DOWNLOAD"),
    ),

    We will get output like a below:

    Floating Action Button
    Floating Action Button
  • This makes FAB 40 logical pixels wide and tall compared to its original size of 56.
    FloatingActionButton(
      mini: true, // set it to true
      onPressed: () {},
    )
    
  • 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 the same across the devices. The above code will give us output like a below:

    Floating Action Button Widget
    Floating Action Button Widget
Here is an Extra tip of the day for you :

Why Should Mobile App Startups Choose Flutter…Flutter uses its own graphics rendering engine called Skia which is google’s performance graphics engine.

This gives you complete control over the entire pixels which are present on the screen, opening the door to new possibilities. Continue reading on Think Future Technologies.

Conclusion:

Hope you have learned from this article !!!

Keep Learning!!! Keep Fluttering !!!

So in this article, we have been through how to set the size to FloatingActionButton in flutter.

Do not forget to drop your valuable suggestions/feedback. We would love to assist you.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply