Flutter – FloatingActionButton
A floating action button is a circular icon button that hovers over content to promote a primary action in the application. Floating action buttons are most commonly used in the Scaffold.floatingActionButton field.
Constructor:
Syntax: FloatingActionButton({Key key, Widget child, String tooltip, Color foregroundColor, Color backgroundColor, Color focusColor, Color hoverColor, Color splashColor, Object heroTag: const _DefaultHeroTag(), double elevation, double focusElevation, double hoverElevation, double highlightElevation, double disabledElevation, @required VoidCallback onPressed, MouseCursor mouseCursor, bool mini: false, ShapeBorder shape, Clip clipBehavior: Clip.none, FocusNode focusNode, bool autofocus: false, MaterialTapTargetSize materialTapTargetSize, bool isExtended: false})
Properties:
- autofocus: This property takes in a boolean value as an object (final) to decide whether the button will be selected on the initial focus.
- backgroundColor: background color of button.
- child: the widget to be displayed.
- clipBehaviour: This property takes clip enum as the object to decide content will be clipped or not.
- disabledElevation: With a double value as the object this property decides the location of the button on the z-coordinate when the button is disabled.
- elevation: Again this property takes in a double as the object. And it controls the location on the z-coordinate on which the button will be placed.
- focusColor: This property decided the color to be filled in the button at the time of input focus. It takes in Color class as the object.
- focusElevtion: It decided the location of the button on the z-axis to place the button at the time of input focus.
- focusNode: It provides an additional focus node for the button.
- foregroundColor: It controls the default color of the text and icon inside the button.
- heorTag: This is to add a hero tag to one of the widgets in the button.
- highlightElevation: This property controls the location of the z-axis on which to place the button while the user interacts with it.
- hoverColor: This property holds the Color class as the object. It controls the color to be painted in the button at the event of hover.
- hoverElevation: This property takes in a double value as the parameter to decide the height of the button on the z-axis on which the button should be place t the time of hover.
- isExtended: This property takes in a boolean value as the object. If it is set to true then the button becomes an extended floating action button.
- materialTapTargetSize: This property is there to control the tap target size of the button.
- mini: it controls the size of the button.
- mouseCursor: This property takes in MouseCursor property as the object. It controls the cursor for the mouse pointer when it interacts with the button.
- onPressed: callback function.
- splashColor: splash color of FloatingActionButton.
- shape: the shape of the button.
- We also have floatingActionButtonLocation to set the location of the button.
Example:
The main.dart file.
Dart
import 'package:flutter/material.dart' ; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'FAB' , theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), debugShowCheckedModeBanner: false , ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int i=0; @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.lightBlue[50], appBar: AppBar( title: Text("FloatingActionButton",), backgroundColor: Colors.green, actions: <Widget>[ Text("GFG",textScaleFactor: 3,) ], ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text("Floating action button pressed this many times"), Text("$i",textScaleFactor: 3,) ],), ), floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, floatingActionButton: FloatingActionButton( // isExtended: true, child: Icon(Icons.add), backgroundColor: Colors.green, onPressed: () { setState(() { i++; }); }, ), ); } } |
Output:
If the properties are defined as below:
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, floatingActionButton: FloatingActionButton( child: Icon(Icons.add), backgroundColor: Colors.green, onPressed: () { setState(() { i++; }); }, ),
The following design changes can be observed:
If the properties are defined as below:
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked, floatingActionButton: FloatingActionButton( child: Icon(Icons.add), backgroundColor: Colors.green, onPressed: () { setState(() { i++; }); }, ),
The following design changes can be observed:
If the properties are defined as below:
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked, floatingActionButton: FloatingActionButton( child: Icon(Icons.add), backgroundColor: Colors.green, onPressed: () { setState(() { i++; }); }, ), // counter i is 9 when we tapped the button 9 times
The following design changes can be observed:
Explanation:
- Create a floating action button and give it a child.
- Add callback onPressed function to increase the counter variable i.
- Give background-color if needed.
- Use floatingActionButtonLocation to set the location of the button.
Complete code is available on https://github.com/singhteekam/GFG-Articles/tree/master/floatingActionButton_in_flutter
Contact Us