Working with FloatingActionButton in Flutter

Proceed to our Flutter learning venture, in this post, I will show you that it is so natural to work with FloatingActionButton in Flutter.

FloatingActionButton in Flutter

In Material Design, FloatingActionButton, additionally called FAB, is to speak to the fundamental activity of the screen, and it shows pretty strong to center client regard for. It is normally put at base right of the screen.

Ripple UI depends on Material Design, so FAB is essential for its help, exceptionally simple to make it.

We should add FloatingActionButton to our Flutter applications.

We will begin with this default page format.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: HomeScreen(),
  ));
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green,
          title: Text('fluttermaster.com'),
        ),
        body: Container(
          child: Center(
            child: Text('Working with FloatingActionButton', style: TextStyle(fontSize: 20.0),),
          ),
        ),
        floatingActionButton: (1)
        ,
    );
  }
}

Take a gander at the position (1) on above code, you see the floatingActionButton property of the Scaffold gadget. Why would that be?

It is straightforward, I can clarify this way. Framework is the fullscreen gadget to draft the essential design structure of a Material screen, and it frequently contains three primary components: appbar, body substance, and coasting activity button. Since coasting activity button speaks to the essential activity of the screen, the floatingActionButton on Scaffold thoroughly bodes well. Without this, designers should compose more code to add gliding activity button for each screen, and it isn’t extremely DRY.

Default FloatingActionButton

As a matter of course, just onPressed property is required, and this is a VoidCallback that is set off upon client tap.

floatingActionButton: FloatingActionButton(
  onPressed: () { print('Clicked'); },
),
Default FloatingActionButton
Default FloatingActionButton

Indeed, it has no content or symbol of course as should be obvious.

Add symbol for FloatingActionButton

We need to give symbol to demonstrate the activity of the screen, it ought not be vacant. We can accomplish this by giving through the kid property.

floatingActionButton: FloatingActionButton(
  child: Icon(Icons.add),
  onPressed: () { print('Clicked'); },),
Add icon to FloatingActionButton
Add icon to FloatingActionButton

The + sign is normally utilized for the adding new substance activity for screen. You can transform it to any proper symbol to speak to your screen principle activity. Something like +1 is likewise fascinating.

child: Icon(Icons.plus_one),
Use +1 icon for FloatingActionButton
Use +1 icon for FloatingActionButton 

Change color

There are two properties you can use to change tone for FloatingActionButton.

foregroundColor is for text/symbol tone.

backgroundColor is for button foundation tone.

floatingActionButton: FloatingActionButton(
  foregroundColor: Colors.black54,
  backgroundColor: Colors.yellow[600],
  child: Icon(Icons.plus_one),
  onPressed: () { print('Clicked'); },
),

This code will make a yellow coasting activity button with dark content tone.

Change color of FloatingActionButton
Change color of FloatingActionButton 

Change rise esteem

The FloatingActionButton has default estimation of rise = 6.0. You can change to any esteem you need. On the off chance that you need a shadowless catch, just put it down to 0.

floatingActionButton: FloatingActionButton(
  foregroundColor: Colors.black54,
  backgroundColor: Colors.yellow[600],
  elevation: 0,
  child: Icon(Icons.plus_one),
  onPressed: () { print('Clicked'); },
),

At that point we have a shadowless, no height, button.

Change elevation value of FloatingActionButton
Change elevation value of FloatingActionButton 

Make smaller than normal FloatingActionButton

In the event that you feel like the catch is kinda huge for the UI, you can make it more modest by designing the small scale esteem. It is a Boolean, and is bogus as a matter of course. Set little: consistent with make it more modest.

floatingActionButton: FloatingActionButton(
  foregroundColor: Colors.black54,
  backgroundColor: Colors.yellow[600],
  child: Icon(Icons.plus_one),
  mini: true,
  onPressed: () { print('Clicked'); },
),

Also, it decreases.

Make mini FloatingActionButton
Make mini FloatingActionButton 

Change FloatingActionButton area

To uphold the consistency of Material Design, the FloatingActionButton can’t be changed by means of its property. It very well may be changed just through the floatingActionButtonLocation of Scaffold gadget.

There are four positions you can decide to set area for FloatingActionButton.

  • FloatingActionButtonLocation.centerDocked : sticked to buttom focus.
  • FloatingActionButtonLocation.centerFloat : drift at focus of the base.
  • FloatingActionButtonLocation.endDocked : sticked to buttom focus.
  • FloatingActionButtonLocation.endFloat : drift at base focus.

The default position is endFloat.

You can attempt to place it in buttom focus position.

floatingActionButton: FloatingActionButton(
  child: Icon(Icons.add),
  onPressed: () { print('Clicked'); },
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
Change location of FloatingActionButton
Change location of FloatingActionButton –

Summary

FloatingActionButton in Flutter is anything but difficult to deal with and redo as should be obvious. You can do anything with it, however make a point to adhere to the Material Design to have the best client encounters for the application.

Leave a Comment