import 'package:flutter/material.dart'; class FABBottomAppBarItem { FABBottomAppBarItem({required this.iconData, required this.text}); IconData iconData; String text; } class FABBottomAppBar extends StatefulWidget { FABBottomAppBar({ super.key, required this.items, this.centerItemText, this.height = 60.0, this.iconSize = 24.0, this.backgroundColor, this.color, this.selectedColor, this.notchedShape, this.onTabSelected, }) { assert(items.length == 2 || items.length == 4); } final List items; final String? centerItemText; final double height; final double iconSize; final Color? backgroundColor; final Color? color; final Color? selectedColor; final NotchedShape? notchedShape; final ValueChanged? onTabSelected; @override State createState() => FABBottomAppBarState(); } class FABBottomAppBarState extends State { int _selectedIndex = 0; _updateIndex(int index) { if (widget.onTabSelected != null) widget.onTabSelected!(index); setState(() { _selectedIndex = index; }); } @override Widget build(BuildContext context) { List items = List.generate(widget.items.length, (int index) { return _buildTabItem( item: widget.items[index], index: index, onPressed: _updateIndex, ); }); items.insert(items.length >> 1, _buildMiddleTabItem()); return BottomAppBar( shape: widget.notchedShape, color: widget.backgroundColor, child: Row( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.spaceAround, children: items, ), ); } Widget _buildMiddleTabItem() { return Expanded( child: SizedBox( height: widget.height, child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, children: [ SizedBox(height: widget.iconSize), Text( widget.centerItemText ?? '', style: TextStyle(color: widget.color), ), ], ), ), ); } Widget _buildTabItem({required FABBottomAppBarItem item, required int index, required ValueChanged onPressed}) { Color color = (_selectedIndex == index ? widget.selectedColor : widget.color) ?? Colors.black; return Expanded( child: SizedBox( height: widget.height, child: Material( type: MaterialType.transparency, child: InkWell( onTap: () => onPressed(index), child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, children: [ Icon(item.iconData, color: color, size: widget.iconSize), Text( item.text, style: TextStyle(color: color), ) ], ), ), ), ), ); } }