BottomTabBar class

A material widget displayed at the bottom of an app for selecting among a small number of views, typically between three and five.

The bottom navigation bar consists of multiple items in the form of text labels, icons, or both, laid out on top of a piece of material. It provides quick navigation between the top-level views of an app. For larger screens, side navigation may be a better fit.

A bottom navigation bar is usually used in conjunction with a Scaffold, where it is provided as the Scaffold.BottomTabBar argument.

The bottom navigation bar's type changes how its items are displayed. If not specified it's automatically set to BottomTabBarType.fixed when there are less than four items, BottomTabBarType.shifting otherwise.

BottomTabBarType.fixed, the default when there are less than four items. The selected item is rendered with fixedColor if it's non-null, otherwise the theme's ThemeData.primaryColor is used. The navigation bar's background color is the default Material background color, ThemeData.canvasColor (essentially opaque white).
BottomTabBarType.shifting, the default when there are four or more items. All items are rendered in white and the navigation bar's background color is the same as the BottomTabBarItem.backgroundColor of the selected item. In this case it's assumed that each item will have a different background color and that background color will contrast well with white.

Sample Code

This example shows a BottomTabBar as it is used within a Scaffold widget. The BottomTabBar has three BottomTabBarItem widgets and the currentIndex is set to index 1. The color of the selected item is set to a purple color. A function is called whenever any item is tapped and the function helps display the appropriate Text in the body of the Scaffold.

class HomeState extends State<Home> with SingleTickerProviderStateMixin {
  TabController _tabController;
  int _selectedIndex = 1;
  String badgeNo1;
  var titles = ['home', 'video', 'find', 'smallvideo', 'my'];
  var icons = [
    Icons.home,
    Icons.play_arrow,
    Icons.child_friendly,
    Icons.fiber_new,
    Icons.mic_none
  ];
  @override
  void initState() {
    super.initState();
    _tabController =
        new TabController(vsync: this, initialIndex: 1, length: titles.length);
    badgeNo1 = '12';
  }
  void _onItemSelected(int index) {
    setState(() {
      _selectedIndex = index;
      badgeNo1 = '';
    });
  }
  final _widgetOptions = [
   Text('Index 0: Home'),
   Text('Index 1: Video'),
   Text('Index 2: find someone'),
   Text('Index 3: small Video'),
   Text('Index 4: My'),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: <Widget>[new Icon(Icons.photo_camera)],
      ),
      bottomNavigationBar: BottomTabBar(
        items: <BottomTabBarItem>[
          BottomTabBarItem(
              icon: Icon(icons[0]), title: Text(titles[0]), badgeNo: badgeNo1),
          BottomTabBarItem(icon: Icon(icons[1]), title: Text(titles[1])),
          BottomTabBarItem(icon: Icon(icons[2]), title: Text(titles[2])),
          BottomTabBarItem(
              icon: Icon(icons[3]),
              activeIcon: Icon(icons[3]),
              title: Text(titles[3])),
          BottomTabBarItem(icon: Icon(icons[4]), title: Text(titles[4])),
        ],
        fixedColor: Colors.red,
        currentIndex: _selectedIndex,
        onTap: _onItemSelected,
        type: BottomTabBarType.fixed,
        isAnimation: false,
        isInkResponse: false,
        badgeColor: Colors.green,
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
    );
  }
}

Constructors

BottomTabBar({Key? key, @required List<BottomTabBarItem>? items, ValueChanged<int>? onTap, int? currentIndex = 0, BottomTabBarType? type, Color? fixedColor, double? iconSize = 24.0, bool? isAnimation = true, Color? badgeColor, Color? bgColor, Color? textColor, bool? isInkResponse = true}): Creates a bottom navigation bar, typically used in a Scaffold where it is provided as the Scaffold.BottomTabBar argument.

Properties

badgeColor → Color?: badge color, default is fixedColor
final
bgColor → Color?: final
currentIndex → int?: The index into items of the current active item.
final
fixedColor → Color?: The color of the selected item when bottom navigation bar is BottomTabBarType.fixed.
final
hashCode → int: The hash code for this object.
no setterinherited
iconSize → double?: The size of all of the BottomTabBarItem icons.
final
isAnimation → bool?: Is animation avilable, default true
final
isInkResponse → bool?: Is InkResponse avilable, default true
final
items → List<BottomTabBarItem>?: The interactive items laid out within the bottom navigation bar where each item has an icon and title.
final
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
onTap → ValueChanged<int>?: The callback that is called when a item is tapped.
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
textColor → Color?: final
type → BottomTabBarType?: Defines the layout and behavior of a BottomTabBar.
final

Methods

createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<StatefulWidget>: Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String: Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a one-line detailed description of the object.
inherited
toStringShort() → String: A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
inherited