Skip to main content
The Stac BottomNavigationBar allows you to build a Flutter BottomNavigationBar widget using JSON. To know more about the BottomNavigationBar widget in Flutter, refer to the official documentation.

​
Properties

PropertyTypeDescription
itemsList<StacBottomNavigationBarItem>The items to be displayed in the bottom navigation bar.
elevationdoubleThe z-coordinate at which to place this bottom navigation bar.
bottomNavigationBarTypeStacBottomNavigationBarTypeThe type of the bottom navigation bar.
fixedColorStacColorThe color of the selected item when type is BottomNavigationBarType.fixed.
backgroundColorStacColorThe background color of the bottom navigation bar.
iconSizedoubleThe size of the icons in the bottom navigation bar. Defaults to 24.
selectedItemColorStacColorThe color of the selected item.
unselectedItemColorStacColorThe color of the unselected items.
selectedFontSizedoubleThe font size of the selected item. Defaults to 14.0.
unselectedFontSizedoubleThe font size of the unselected items. Defaults to 12.0.
selectedLabelStyleStacTextStyleThe text style of the selected item label.
unselectedLabelStyleStacTextStyleThe text style of the unselected item labels.
showSelectedLabelsboolWhether to show labels for selected items.
showUnselectedLabelsboolWhether to show labels for unselected items.
enableFeedbackboolWhether to enable feedback for taps.
landscapeLayoutStacBottomNavigationBarLandscapeLayoutThe layout of the bottom navigation bar in landscape mode.

​
DefaultBottomNavigationController

DefaultBottomNavigationController is an inherited widget that is used to share a BottomNavigationController with a BottomNavigationBar or a BottomNavigationView.

​
Properties

PropertyTypeDescription
lengthintThe number of items in the bottom navigation bar.
initialIndexintThe initial index of the selected item.
childStacWidgetThe widget below this widget in the tree.

​
BottomNavigationBarItem

The Stac BottomNavigationBarItem allows you to build a Flutter BottomNavigationBarItem using JSON. To know more about the BottomNavigationBarItem widget in Flutter, refer to the official documentation.

​
Properties

PropertyTypeDescription
iconStacWidgetThe icon to display in the bottom navigation bar item.
labelStringThe label to display in the bottom navigation bar item.
activeIconStacWidgetThe icon to display when the item is active.
backgroundColorStacColorThe background color of the bottom navigation bar item.
tooltipStringThe tooltip text to display when the item is long-pressed.

​
BottomNavigationView

A page view that displays the widget which corresponds to the currently selected bottom navigation item.

​
Properties

PropertyTypeDescription
childrenList<StacWidget>The widgets below this widget in the tree.

​
Example

StacDefaultBottomNavigationController(
  length: 3,
  child: StacScaffold(
    appBar: StacAppBar(
      title: StacText(data: 'Bottom Navigation Screen'),
    ),
    body: StacBottomNavigationView(
      children: [
        StacCenter(
          child: StacText(
            data: 'Home',
            style: StacTextStyle(fontSize: 24),
          ),
        ),
        StacCenter(
          child: StacText(
            data: 'Search',
            style: StacTextStyle(fontSize: 24),
          ),
        ),
        StacCenter(
          child: StacText(
            data: 'Profile',
            style: StacTextStyle(fontSize: 24),
          ),
        ),
      ],
    ),
    bottomNavigationBar: StacBottomNavigationBar(
      items: [
        StacBottomNavigationBarItem(
          label: 'Home',
          icon: StacIcon(iconType: 'material', icon: 'home'),
        ),
        StacBottomNavigationBarItem(
          label: 'Search',
          icon: StacIcon(iconType: 'material', icon: 'search'),
        ),
        StacBottomNavigationBarItem(
          label: 'Profile',
          icon: StacIcon(iconType: 'material', icon: 'account_circle'),
        ),
      ],
    ),
  ),
)