How to make FAB wider

Question

How can I make bottom FAB like below image?

Here is the my current code example:

class _ItemDetailsState extends State<ItemDetails> {
  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height * 0.42;
    return Scaffold(
        body: Stack(children: <Widget>[
      CustomScrollView(
        slivers: <Widget>[
          ...
        ],
      ),
      Positioned(
          bottom: 0,
          child: FloatingActionButton(
              elevation: 4,
              onPressed: () {},
              child: Text("SAVE THE CHANGES"),
            ),
          ))
    ]));
  }
}

I tried lot but no luck :( Is there any solutions? Thank you for advice :)

You want it to be this way all the time or have the regular size then in some point expand? If you want it to be this way all the time, why don't you use a regular button? — Hugo Passos, May 18 '19 at 14:58
Because I want to FAB not regular button and wide in bottom. See the photo. Sorry for bad English. BTW thank you for reply :D — Zeck, May 18 '19 at 15:02
What do the FAB does the a regular button doesn't? Seem like you are just complicating your life by using a FAB in this situation. — Hugo Passos, May 18 '19 at 15:09
Just to make it clear, a FAB is in the end just a `RawMaterialButton` with specific `BoxConstraints`. By the way, its constraints are also constant, so it's not possible to change it. — Hugo Passos, May 18 '19 at 15:14
Hmmm, Regular button doesn't float right? I need a floating button at the bottom of screen. — Zeck, May 18 '19 at 15:14
It's called floating because it has an elevation attribute, so it makes it seems like it's floating. You can copy FAB's elevation attribute, so your button will also seems to float. — Hugo Passos, May 18 '19 at 15:15
Ok. Can u post a sample code pls? I'm following this tutorial https://proandroiddev.com/flutter-how-to-using-bottomappbar-75d53426f5af but no luck :( — Zeck, May 18 '19 at 15:15

Hugo Passos · Accepted Answer · 2019-05-18T16:22:55.393

It's not possible to set FAB's size. Instead, you must use a RawMaterialButton, copy FAB's default attributes and change the size:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      alignment: Alignment.bottomCenter,
      children: <Widget>[
        CustomScrollView(
          slivers: <Widget>[
            ...
          ],
        ),
        RawMaterialButton(
          elevation: 6,
          highlightElevation: 12.0,
          constraints: BoxConstraints(
            minHeight: 48.0,
            minWidth: double.infinity,
            maxHeight: 48.0,
          ),
          fillColor: Theme.of(context).accentColor,
          textStyle: Theme.of(context).accentTextTheme.button.copyWith(
            color: Theme.of(context).accentIconTheme.color,
            letterSpacing: 1.2,
          ),
          child: Text("SAVE THE CHANGE"),
          onPressed: () {},
        )
      ],
    ),
  );
}

Thank you for help. But it's placed in the top of the screen. How to make it bottom? — Zeck, May 18 '19 at 15:37
I think you did not copied my whole code. Take a look a my `Stack`. The property `alignment: Alignment.bottomCenter` makes the button go to the bottom. Please add it to your code as well. — Hugo Passos, May 18 '19 at 16:22

How to make FAB wider

1 Answers1