flutter - How to change the size of FloatingActionButton?

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
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: () {}),
                Without a FittedBox, the FAB's child does not scale. Everything works fine with the FittedBox though. This is the best solution I've found, it would be nice if a proper "size" property was added though.
– UnicornsOnLSD
                Aug 2, 2020 at 13:04
                Whichever property you make smaller seems to define the size. If you increase the height beyond the width, it does not make an oval as you may expect; instead it moves the button up vertically along the y-axis. So if you're OK with the button at its default bottom, you need only set its width.
– chemturion
                May 25, 2021 at 2:22
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"),
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: () {},
                This works even with a notched bottom navbar and floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, thanks!
– Aleksandar
                Oct 6, 2020 at 15:20
                One difference I notice between this approach and the Container -> FittedBox approach, is that with SizedBox parent alone, the icon in the FAB does not also scale accordingly.
– chemturion
                May 25, 2021 at 2:32
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: () {}),
                Yes. This method does not change the center point of the button, so if the scale is too big, the sides get cut.
– chemamolins
                Oct 12, 2018 at 21:36
                another option is to use - CircleAvatar(         radius: 42.0,         child: Icon(Icons.add), it has radius parameter.
– anmol.majhail
                Oct 12, 2018 at 21:48
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),
FloatingActionButton has a property called mini which can be set to true.
floatingActionButton: FloatingActionButton(
    mini: true,
    onPressed: (){
    child: Icon(Icons.play_arrow_outlined),
you can use extendedPadding. it works for me
floatingActionButton: FloatingActionButton.extended(
    onPressed: () {
      // Add your onPressed code here!
    extendedPadding:
        const EdgeInsets.only(left: 100, right: 100, top: 20, bottom: 20),
    label: const Text('Approve'),
    icon: const Icon(Icons.thumb_up),
    backgroundColor: Colors.pink,
Please use the following option in theme.
floatingActionButtonTheme: const FloatingActionButtonThemeData(
  sizeConstraints: BoxConstraints.expand(
    width: 60,
    height: 60,
https://api.flutter.dev/flutter/material/FloatingActionButton/FloatingActionButton.html
use mini: true
FloatingActionButton(
        child: Icon(
          Icons.delete
        onPressed: () {
        }, mini: true,
                While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply. Note that a link to explanation is appreciated but a summary right here would be preferred.
– Yunnosch
                May 31, 2021 at 7:17
                I tried to help you with formatting, but am not sure about first and last line. Please double check, using stackoverflow.com/editing-help
– Yunnosch
                May 31, 2021 at 7:18
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),
                Welcome to Stack Overflow, and thank you for contributing an answer. Would you kindly edit your answer to to include an explanation of your code? That will help future readers better understand what is going on, and especially those members of the community who are new to the language and struggling to understand the concepts. That's especially important when there's already an answer that's been validated by the community. Under what conditions might your approach be preferred? Are you taking advantage of new capabilities?
– Jeremy Caney
                Nov 14, 2021 at 0:59
                Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
– Community
                Nov 14, 2021 at 3:37
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.