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 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
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"
}
}
]
}
}
}
