BottomNavigationBar

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

Property	Type	Description
items	`List<StacBottomNavigationBarItem>`	The items to be displayed in the bottom navigation bar.
elevation	`double`	The z-coordinate at which to place this bottom navigation bar.
bottomNavigationBarType	`StacBottomNavigationBarType`	The type of the bottom navigation bar.
fixedColor	`StacColor`	The color of the selected item when `type` is `BottomNavigationBarType.fixed`.
backgroundColor	`StacColor`	The background color of the bottom navigation bar.
iconSize	`double`	The size of the icons in the bottom navigation bar. Defaults to `24`.
selectedItemColor	`StacColor`	The color of the selected item.
unselectedItemColor	`StacColor`	The color of the unselected items.
selectedFontSize	`double`	The font size of the selected item. Defaults to `14.0`.
unselectedFontSize	`double`	The font size of the unselected items. Defaults to `12.0`.
selectedLabelStyle	`StacTextStyle`	The text style of the selected item label.
unselectedLabelStyle	`StacTextStyle`	The text style of the unselected item labels.
showSelectedLabels	`bool`	Whether to show labels for selected items.
showUnselectedLabels	`bool`	Whether to show labels for unselected items.
enableFeedback	`bool`	Whether to enable feedback for taps.
landscapeLayout	`StacBottomNavigationBarLandscapeLayout`	The 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

Property	Type	Description
length	`int`	The number of items in the bottom navigation bar.
initialIndex	`int`	The initial index of the selected item.
child	`StacWidget`	The 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

Property	Type	Description
icon	`StacWidget`	The icon to display in the bottom navigation bar item.
label	`String`	The label to display in the bottom navigation bar item.
activeIcon	`StacWidget`	The icon to display when the item is active.
backgroundColor	`StacColor`	The background color of the bottom navigation bar item.
tooltip	`String`	The 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

Property	Type	Description
children	`List<StacWidget>`	The widgets below this widget in the tree.

Example

Dart
JSON
Preview

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'),
        ),
      ],
    ),
  ),
)

{
  "type": "defaultBottomNavigationController",
  "length": 3,
  "child": {
    "type": "scaffold",
    "appBar": {
      "type": "appBar",
      "title": {
        "type": "text",
        "data": "Bottom Navigation Screen"
      }
    },
    "body": {
      "type": "bottomNavigationView",
      "children": [
        {
          "type": "center",
          "child": {
            "type": "text",
            "data": "Home",
            "style": {
              "fontSize": 24
            }
          }
        },
        {
          "type": "center",
          "child": {
            "type": "text",
            "data": "Search",
            "style": {
              "fontSize": 24
            }
          }
        },
        {
          "type": "center",
          "child": {
            "type": "text",
            "data": "Profile",
            "style": {
              "fontSize": 24
            }
          }
        }
      ]
    },
    "bottomNavigationBar": {
      "type": "bottomNavigationBar",
      "items": [
        {
          "type": "navigationBarItem",
          "label": "Home",
          "icon": {
            "type": "icon",
            "iconType": "material",
            "icon": "home"
          }
        },
        {
          "type": "navigationBarItem",
          "label": "Search",
          "icon": {
            "type": "icon",
            "iconType": "material",
            "icon": "search"
          }
        },
        {
          "type": "navigationBarItem",
          "label": "Profile",
          "icon": {
            "type": "icon",
            "iconType": "material",
            "icon": "account_circle"
          }
        }
      ]
    }
  }
}

Layout Widgets

Display Widgets

Interactive Widgets

Data Widgets

BottomNavigationBar

Properties

DefaultBottomNavigationController

Properties

BottomNavigationBarItem

Properties

BottomNavigationView

Properties

Example

​Properties

​DefaultBottomNavigationController

​Properties

​BottomNavigationBarItem

​Properties

​BottomNavigationView

​Properties

​Example

Properties

DefaultBottomNavigationController

Properties

BottomNavigationBarItem

Properties

BottomNavigationView

Properties

Example