The BottomAppBar widget in Flutter is a material design component used to display a toolbar at the bottom of a Scaffold. It can hold actions such as buttons, text, and icons. Typically, it is used in conjunction with a FloatingActionButton (FAB), creating a space where the FAB is docked into the bar. The BottomAppBar can be customized with its shape, elevation, and color properties to fit various designs.
¶ Component
import 'package:flutter/material.dart';
class BottomAppBarComponent extends StatelessWidget {
final Color? color; // Background color of the BottomAppBar
final double? elevation; // Elevation (shadow) of the BottomAppBar
final ShapeBorder? shape; // Shape of the BottomAppBar
final NotchedShape? notchShape; // Shape of the notch where FAB resides
final List<Widget>? actions; // List of widgets like icons or buttons
final Widget? child; // Content inside the BottomAppBar
final double? height; // Height of the BottomAppBar
final Clip clipBehavior; // Clip behavior for the BottomAppBar
const BottomAppBarComponent({
Key? key,
this.color,
this.elevation,
this.shape,
this.notchShape,
this.actions,
this.child,
this.height,
this.clipBehavior = Clip.none,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return BottomAppBar(
color: color,
elevation: elevation,
shape: shape,
notchMargin: 6.0, // Margin around the notch
clipBehavior: clipBehavior,
child: SizedBox(
height: height ?? 56.0, // Default height if not provided
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: actions ?? [], // Adds actions (widgets) like buttons, icons
),
),
);
}
}¶ How to Use
import 'package:flutter/material.dart';
import 'bottom_app_bar_component.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Advanced BottomAppBar Example')),
body: Center(
child: Text('Body Content'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
print('FAB Pressed');
},
child: Icon(Icons.add),
shape: CircleBorder()
),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
bottomNavigationBar: BottomAppBarComponent(
color: Colors.blueGrey,
shape: CircularNotchedRectangle(),
elevation: 10.0,
height: 80.0, // Custom height for BottomAppBar
clipBehavior: Clip.antiAlias,
actions: [
IconButton(
icon: Icon(Icons.home),
onPressed: () {
print('Home Pressed');
},
),
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
print('Settings Pressed');
},
),
],
),
),
);
}
}
¶ Properties
¶ 1. color
Defines the background color of the BottomAppBar. If not provided, it defaults to the theme's bottomAppBarColor.
BottomAppBarComponent(
color: Colors.blue, // Custom background color
)
¶ 2. elevation
The elevation or shadow beneath the BottomAppBar. A higher elevation value results in a more prominent shadow.
BottomAppBarComponent(
elevation: 5.0, // Adds a shadow to the BottomAppBar
)
¶ 3. shape
Defines the shape of the BottomAppBar, including any notches (if used with a FloatingActionButton). Commonly used shapes are CircularNotchedRectangle and RoundedRectangleBorder.
BottomAppBarComponent(
shape: CircularNotchedRectangle(), // Adds a notch for FAB
)
¶ 4. notchShape
The shape of the notch that appears in the BottomAppBar to accommodate a FloatingActionButton. Use this if you have a floating action button that should be docked into the app bar.
BottomAppBarComponent(
notchShape: CircularNotchedRectangle(), // Creates a notch for the FAB
)
¶ 5. actions
A list of widgets like IconButtons or TextButtons that will appear on the BottomAppBar. You can align them to either side of the bar by using Row with different alignment options.
BottomAppBarComponent(
actions: [
IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
],
)
¶ 6. child
The content inside the BottomAppBar. This is typically a row of action buttons, icons, or other UI elements.
BottomAppBarComponent(
child: Text('Custom BottomAppBar Content'),
)
¶ 7. height
Specifies the height of the BottomAppBar. If not provided, the default height is 56.0 pixels.
BottomAppBarComponent(
height: 70.0, // Custom height for BottomAppBar
)
¶ 8. clipBehavior
Controls how the content inside the BottomAppBar is clipped. Options are Clip.none, Clip.hardEdge, Clip.antiAlias, and Clip.antiAliasWithSaveLayer.
BottomAppBarComponent(
clipBehavior: Clip.antiAlias, // Clipping behavior for smoother edges
)