NavigationBar

Documentation for NavigationBar

The Stac NavigationBar lets you build a Material 3 Flutter NavigationBar widget using JSON. It can be placed in the bottomNavigationBar slot of a StacScaffold and pairs with a StacDefaultNavigationController (with a StacNavigationView body) to drive selection state.

To know more about the NavigationBar widget in Flutter, refer to the official documentation.

Properties

Property	Type	Description
destinations	List<StacNavigationDestination>	The destinations shown in the navigation bar.
animationDuration	StacDuration	Transition time for each destination as it goes between selected and unselected.
selectedIndex	int	Initial selected index. Ignored if a StacDefaultNavigationController is provided.
backgroundColor	StacColor	The color of the navigation bar itself.
elevation	double	The z-coordinate at which to place this navigation bar.
shadowColor	StacColor	The color used for the drop shadow to indicate elevation.
surfaceTintColor	StacColor	The color used as an overlay on backgroundColor to indicate elevation.
indicatorColor	StacColor	The color of the selected destination’s indicator.
indicatorShape	StacBorder	The shape of the selected destination’s indicator.
height	double	The height of the navigation bar.
labelBehavior	StacNavigationDestinationLabelBehavior	Defines how labels are laid out and when they are displayed.
labelTextStyle	StacTextStyle	The text style for destination labels.
labelPadding	StacEdgeInsets	The padding around each destination’s label widget.
maintainBottomViewPadding	bool	Whether the underlying SafeArea maintains the bottom viewPadding instead of padding.

NavigationDestination

The Stac NavigationDestination represents a single destination inside a NavigationBar. To know more, refer to the official documentation.

Properties

Property	Type	Description
icon	StacWidget	The icon shown when this destination is unselected.
label	String	The text label for this destination.
selectedIcon	StacWidget	The icon shown when this destination is selected.
tooltip	String	Tooltip text shown on long press.
enabled	bool	Whether this destination is enabled. Defaults to true.

Example

Dart

StacDefaultNavigationController(
  length: 3,
  child: StacScaffold(
    appBar: StacAppBar(
      title: StacText(data: 'Navigation Bar Screen'),
    ),
    body: StacNavigationView(
      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: StacNavigationBar(
      destinations: [
        StacNavigationDestination(
          label: 'Home',
          icon: StacIcon(iconType: 'material', icon: 'home_outlined'),
          selectedIcon: StacIcon(iconType: 'material', icon: 'home'),
        ),
        StacNavigationDestination(
          label: 'Search',
          icon: StacIcon(iconType: 'material', icon: 'search'),
        ),
        StacNavigationDestination(
          label: 'Profile',
          icon: StacIcon(iconType: 'material', icon: 'account_circle_outlined'),
          selectedIcon: StacIcon(iconType: 'material', icon: 'account_circle'),
        ),
      ],
    ),
  ),
)

JSON

{
  "type": "defaultNavigationController",
  "length": 3,
  "child": {
    "type": "scaffold",
    "appBar": {
      "type": "appBar",
      "title": {
        "type": "text",
        "data": "Navigation Bar Screen"
      }
    },
    "body": {
      "type": "navigationView",
      "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": "navigationBar",
      "destinations": [
        {
          "label": "Home",
          "icon": {
            "type": "icon",
            "iconType": "material",
            "icon": "home_outlined"
          },
          "selectedIcon": {
            "type": "icon",
            "iconType": "material",
            "icon": "home"
          }
        },
        {
          "label": "Search",
          "icon": {
            "type": "icon",
            "iconType": "material",
            "icon": "search"
          }
        },
        {
          "label": "Profile",
          "icon": {
            "type": "icon",
            "iconType": "material",
            "icon": "account_circle_outlined"
          },
          "selectedIcon": {
            "type": "icon",
            "iconType": "material",
            "icon": "account_circle"
          }
        }
      ]
    }
  }
}

Preview