Flutter is a framework that has been in development since 2017. It allows developers to create applications for the web, mobiles, tablets, and desktops using the same code. It also helps developers build beautiful and efficient UIs for various applications.
Extended FAB stands for floating action button, an application design element that remains fixed in the screen area. The information it contains can change, or new elements can appear.
In Flutter, the FloatingActionButton.extended
constructor allows us to build another button, which is derived from the base material of the floating action button. This is an example of an extended FAB in which the label is accompanied by text and an icon, increasing the user’s awareness. It’s especially effective for actions that get value from the label’s extra information, for example, the “Add Item” or “Send Message” buttons.
The extended widget comes with several attributes that developers can customize to fit the needs of their applications:
label
: This is a widget (preferably a text widget) explaining the functionality of the related button.
icon
: This is an optional widget (generally an icon) that indicates/hints at what the button does.
onPressed
: A callback function will be invoked when the button is pressed. This is an important step where the nature of the button or the key operation has to be described.
shape
: This option enables the button to be any shape the user wants (round, rectangular, oval, or any other shape).
Heres an example application that you can play around with to test the working of the extended floating action button. Press the "Run" button below to start the Flutter application.
Flutter usually takes around 100-120 seconds to run the application for the first time.
import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp(); @override Widget build(BuildContext context) { return MaterialApp( title: 'Extended FAB Demo', debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.deepPurple, ), home: const MyHomePage(title: 'Extended FAB Demo Page'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({this.title}); final String title; @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { bool showOptions = false; List<String> items = []; void toggleOptions() { setState(() { showOptions = !showOptions; }); } void addItem() { setState(() { items.add('Item ${items.length + 1}'); }); } void deleteItem() { setState(() { if (items.isNotEmpty) { items.removeLast(); } }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: ListView.builder( itemCount: items.length, itemBuilder: (context, index) { return Container( margin: EdgeInsets.symmetric(vertical: 4.0, horizontal: 8.0), decoration: BoxDecoration( color: Colors.blue.shade50, borderRadius: BorderRadius.circular(8.0), boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.5), spreadRadius: 1, blurRadius: 2, offset: Offset(0, 1), // changes position of shadow ), ], ), child: ListTile( leading: CircleAvatar( child: Text( items[index][0], style: TextStyle(color: Colors.white), ), backgroundColor: Colors.blue, ), title: Text( items[index], style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w500), ), trailing: IconButton( icon: Icon(Icons.delete, color: Colors.red), onPressed: () { setState(() { items.removeAt(index); }); }, ), ), ); }, ), floatingActionButton: Column( mainAxisAlignment: MainAxisAlignment.end, children: [ FloatingActionButton.extended( onPressed: toggleOptions, label: Text('Extended FAB'), icon: Icon(Icons.add_alert), backgroundColor: Colors.deepPurple, ), SizedBox(height: 16.0), Visibility( visible: showOptions, child: Column( children: [ FloatingActionButton( onPressed: addItem, tooltip: 'Add Item', child: Icon(Icons.add_alert_outlined), ), SizedBox(height: 16.0), FloatingActionButton( onPressed: deleteItem, tooltip: 'Delete Last Item', child: Icon(Icons.delete_rounded), ), ], ), ), ], ), ); } }
Lines 105–110: These lines define an extended floating action button (FAB) with a label
, an icon
, and an onPressed
function. The button’s properties allow it to call any specified function when pressed. In addition to the extended FAB, Flutter supports FABs in different sizes, including large and small variations.
By leveraging the extended floating action button (FAB) in Flutter, developers can significantly enhance the functionality and user experience of their applications. This feature provides an excellent way to create more engaging and informative interfaces, making it a valuable addition to any developer's toolkit.