Deep dive into FloatingActionButton in Flutter

FloatingActionButton is a valuable Widget in a MaterialApp. It normally is (and ought to be) utilized as an essential activity in a Scaffold, which is a high level compartment in MaterialApp.

In this post, I need to discuss how to utilize FloatingActionButtons and investigate their conceivable outcomes however much I can.

Vacillate made it simple to utilize FloatingActionButton to any page that has a Scaffold as a high level compartment:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("FloatingActionButtons"),
      ),
      body: Center(
        child: Text('exerror.com'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

The default position is consistently base right corner of the page and the default foundation shading comes from primarySwatch or primaryColor of the subject of the MaterialApp class.

Deep dive into FloatingActionButton in Flutter

In the event that you need to utilize the more modest form of the FAB you can set small: valid.

Step by step instructions to change FloatingActionButton’s position

For this we can use FloatingActionButtonLocation which has the following options:

  • centerDocked
  • centerFloat
  • endDocked
  • endFloat
  • endTop
  • miniStartTop
  • startTop

Start, focus and end represent themselves as they just position the FAB in like manner. The fascinating part is docked and coast ones which prove to be useful when FAB is utilized along with BottomNavigationBar. Docked implies that the focal point of FAB will pleasantly line up with the highest point of the BottomNavigationBar and buoy implies that FAB will be situated over the BottomNavigationBar.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("FloatingActionButtons"),
      ),
      body: Center(
        child: Text('mrflutter.com'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 50.0,
        ),
      ),
    );
  }

Here Is Screen shot of Above Code

Deep dive into FloatingActionButton in Flutter

If you would like to align the FAB with the AppBar, just use startTop or endTop as location.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("FloatingActionButtons"),
        backgroundColor: Colors.greenaccent,
      ),
      body: Center(
        child: Text('exerror.com'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.startTop,
    );
  }

It will then look like this:

Deep dive into FloatingActionButton in Flutter

How to use FloatingActionButton.extended

On the off chance that you need to add text to your FAB, there is a more extensive rendition that upholds a book name along with a symbol. Clearly, name turns into a required boundary, however symbol gets discretionary. The kid boundary disappears as it would now be able to contain various gadgets.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("FloatingActionButtons"),
      ),
      body: Center(
        child: Text('exerror.com'),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {},
        tooltip: 'Tap to call',
        label: Text('CALL'),
        icon: Icon(Icons.call),
      ),
    );
  }
Deep dive into FloatingActionButton in Flutter

I trust this post assisted you with doing with FloatingActionButtons. In the following part, I will clarify how you can manage FABs and movements.

Summery

So it’s all About All possible solutions. Hope this above all solution helped you a lot. Comment below Your thoughts and your queries. Comment Below on your suggestion.

Check Out Below Article

TypeError: this.getOptions is not a function in vue.js

Leave a Comment

x