FlexibleBottomNavigationBar class
A material widget that's 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.FlexibleBottomNavigationBar
argument.
The bottom navigation bar's type changes how its items are displayed. If not specified, then it's automatically set to FlexibleBottomNavigationBarType.fixed when there are less than four items, and FlexibleBottomNavigationBarType.shifting otherwise.
The length of items must be at least two and each item's icon and title/label must not be null.
- FlexibleBottomNavigationBarType.fixed, the default when there are less than four items. The selected item is rendered with the selectedItemColor if it's non-null, otherwise the theme's ColorScheme.primary color is used for Brightness.light themes and ColorScheme.secondary for Brightness.dark themes. If backgroundColor is null, The navigation bar's background color defaults to the Material background color, ThemeData.canvasColor (essentially opaque white).
- FlexibleBottomNavigationBarType.shifting, the default when there are four
or more items. If selectedItemColor is null, all items are rendered
in white. The navigation bar's background color is the same as the
FlexibleBottomNavigationBarItem.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.
{@tool dartpad}
This example shows a FlexibleBottomNavigationBar as it is used within a Scaffold
widget. The FlexibleBottomNavigationBar has three FlexibleBottomNavigationBarItem
widgets, which means it defaults to FlexibleBottomNavigationBarType.fixed, and
the currentIndex is set to index 0. The selected item is
amber. The _onItemTapped
function changes the selected item's index
and displays a corresponding message in the center of the Scaffold.
** See code in examples/api/lib/material/bottom_navigation_bar/bottom_navigation_bar.0.dart ** {@end-tool}
{@tool dartpad}
This example shows a FlexibleBottomNavigationBar as it is used within a Scaffold
widget. The FlexibleBottomNavigationBar has four FlexibleBottomNavigationBarItem
widgets, which means it defaults to FlexibleBottomNavigationBarType.shifting, and
the currentIndex is set to index 0. The selected item is amber in color.
With each FlexibleBottomNavigationBarItem
widget, backgroundColor property is
also defined, which changes the background color of FlexibleBottomNavigationBar,
when that item is selected. The _onItemTapped
function changes the
selected item's index and displays a corresponding message in the center of
the Scaffold.
** See code in examples/api/lib/material/bottom_navigation_bar/bottom_navigation_bar.1.dart ** {@end-tool}
{@tool dartpad}
This example shows FlexibleBottomNavigationBar used in a Scaffold Widget with
different interaction patterns. Tapping twice on the first FlexibleBottomNavigationBarItem
uses the ScrollController to animate the ListView to the top. The second
FlexibleBottomNavigationBarItem
shows a Modal Dialog.
** See code in examples/api/lib/material/bottom_navigation_bar/bottom_navigation_bar.2.dart ** {@end-tool} See also:
FlexibleBottomNavigationBarItem
- Scaffold
- material.io/design/components/bottom-navigation.html
- NavigationBar, this widget's replacement in Material Design 3.
- Inheritance
-
- Object
- DiagnosticableTree
- Widget
- StatefulWidget
- FlexibleBottomNavigationBar
Constructors
-
Creates a bottom navigation bar which is typically used as a
Scaffold's
Scaffold.FlexibleBottomNavigationBar
argument.
Properties
- backgroundColor → Color?
-
The color of the FlexibleBottomNavigationBar itself.
final
- currentIndex → int
-
The index into items for the current active
FlexibleBottomNavigationBarItem
.final - elevation → double?
-
The z-coordinate of this FlexibleBottomNavigationBar.
final
- enableFeedback → bool?
-
Whether detected gestures should provide acoustic and/or haptic feedback.
final
- fixedColor → Color?
-
The value of selectedItemColor.
no setter
- hashCode → int
-
The hash code for this object.
no setterinherited
- iconSize → double
-
The size of all of the
FlexibleBottomNavigationBarItem
icons.final -
items
→ List<
BottomNavigationBarItem> -
Defines the appearance of the button items that are arrayed within the
bottom navigation bar.
final
- key → Key?
-
Controls how one widget replaces another widget in the tree.
finalinherited
- landscapeLayout → BottomNavigationBarLandscapeLayout?
-
The arrangement of the bar's items when the enclosing
MediaQueryData.orientation is Orientation.landscape.
final
- mouseCursor → MouseCursor?
-
The cursor for a mouse pointer when it enters or is hovering over the
items.
final
-
onTap
→ ValueChanged<
int> ? -
Called when one of the items is tapped.
final
- runtimeType → Type
-
A representation of the runtime type of the object.
no setterinherited
- selectedFontSize → double
-
The font size of the
FlexibleBottomNavigationBarItem
labels when they are selected.final - selectedIconTheme → IconThemeData?
-
The size, opacity, and color of the icon in the currently selected
FlexibleBottomNavigationBarItem.icon
.final - selectedItemColor → Color?
-
The color of the selected
FlexibleBottomNavigationBarItem.icon
andFlexibleBottomNavigationBarItem.label
.final - selectedLabelStyle → TextStyle?
-
The TextStyle of the
FlexibleBottomNavigationBarItem
labels when they are selected.final - showSelectedLabels → bool?
-
Whether the labels are shown for the selected
FlexibleBottomNavigationBarItem
.final - showUnselectedLabels → bool?
-
Whether the labels are shown for the unselected
FlexibleBottomNavigationBarItem
s.final - type → FlexibleBottomNavigationBarType?
-
Defines the layout and behavior of a FlexibleBottomNavigationBar.
final
- unselectedFontSize → double
-
The font size of the
FlexibleBottomNavigationBarItem
labels when they are not selected.final - unselectedIconTheme → IconThemeData?
-
The size, opacity, and color of the icon in the currently unselected
FlexibleBottomNavigationBarItem.icon
s.final - unselectedItemColor → Color?
-
The color of the unselected
FlexibleBottomNavigationBarItem.icon
andFlexibleBottomNavigationBarItem.label
s.final - unselectedLabelStyle → TextStyle?
-
The TextStyle of the
FlexibleBottomNavigationBarItem
labels when they are not selected.final - useLegacyColorScheme → bool
-
This flag is controlling how FlexibleBottomNavigationBar is going to use
the colors provided by the selectedIconTheme, unselectedIconTheme,
selectedItemColor, unselectedItemColor.
The default value is
true
as the new theming logic is a breaking change. To opt-in the new theming logic set the flag tofalse
final
Methods
-
createElement(
) → StatefulElement -
Creates a StatefulElement to manage this widget's location in the tree.
inherited
-
createState(
) → State< FlexibleBottomNavigationBar> -
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}) → 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