Skip to main content

​
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

PropertyTypeDescription
itemsList<StacBottomNavigationBarItem>The items to be displayed in the bottom navigation bar.
elevationdouble?The z-coordinate at which to place this bottom navigation bar.
bottomNavigationBarTypeBottomNavigationBarType?The type of the bottom navigation bar.
fixedColorString?The color of the selected item when type is BottomNavigationBarType.fixed.
backgroundColorString?The background color of the bottom navigation bar.
iconSizedoubleThe size of the icons in the bottom navigation bar. Defaults to 24.
selectedItemColorString?The color of the selected item.
unselectedItemColorString?The 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.
selectedLabelStyleStacTextStyle?The text style of the selected item label.
unselectedLabelStyleStacTextStyle?The text style of the unselected item labels.
showSelectedLabelsbool?Whether to show labels for selected items.
showUnselectedLabelsbool?Whether to show labels for unselected items.
enableFeedbackbool?Whether to enable feedback for taps.
landscapeLayoutBottomNavigationBarLandscapeLayout?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

PropertyTypeDescription
lengthintThe number of items in the bottom navigation bar.
initialIndexint?The initial index of the selected item.
childMap<String, dynamic>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

PropertyTypeDescription
iconMap<String, dynamic>The icon to display in the bottom navigation bar item.
labelStringThe label to display in the bottom navigation bar item.
activeIconMap<String, dynamic>?The icon to display when the item is active.
backgroundColorString?The background color of the bottom navigation bar item.
tooltipString?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

PropertyTypeDescription
childrenList<Map<String, dynamic>>The widgets below this widget in the tree.

​
Example

{
  "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"
          }
        }
      ]
    }
  }
}
⌘I