Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.stac.dev/llms.txt

Use this file to discover all available pages before exploring further.

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

PropertyTypeDescription
destinationsList<StacNavigationDestination>The destinations shown in the navigation bar.
animationDurationStacDurationTransition time for each destination as it goes between selected and unselected.
selectedIndexintInitial selected index. Ignored if a StacDefaultNavigationController is provided.
backgroundColorStacColorThe color of the navigation bar itself.
elevationdoubleThe z-coordinate at which to place this navigation bar.
shadowColorStacColorThe color used for the drop shadow to indicate elevation.
surfaceTintColorStacColorThe color used as an overlay on backgroundColor to indicate elevation.
indicatorColorStacColorThe color of the selected destination’s indicator.
indicatorShapeStacBorderThe shape of the selected destination’s indicator.
heightdoubleThe height of the navigation bar.
labelBehaviorStacNavigationDestinationLabelBehaviorDefines how labels are laid out and when they are displayed.
labelTextStyleStacTextStyleThe text style for destination labels.
labelPaddingStacEdgeInsetsThe padding around each destination’s label widget.
maintainBottomViewPaddingboolWhether the underlying SafeArea maintains the bottom viewPadding instead of padding.
The Stac NavigationDestination represents a single destination inside a NavigationBar. To know more, refer to the official documentation.

​
Properties

PropertyTypeDescription
iconStacWidgetThe icon shown when this destination is unselected.
labelStringThe text label for this destination.
selectedIconStacWidgetThe icon shown when this destination is selected.
tooltipStringTooltip text shown on long press.
enabledboolWhether this destination is enabled. Defaults to true.

​
Example

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