App bars: top
Top app bars display information and actions relating to the current screen.
On this page
Specifications references
Accessibility
Please follow accessibility criteria for development.
OdsTopAppBar provides accessibility support for the navigation icon,
action items for informing the user as to what each action performs.
Variants
Regular top app bar
Flutter implementation
Add OdsTopAppBar to your Scaffold topBar.
Here is an example of use:
return OdsAppTopBar(
title: "App Bar",
actions: [
IconButton(icon: const Icon(Icons.color_lens), onPressed: () {})
],
navigationIcon: const BackButton(),
)
OdsTopAppBar API
| Parameter | Default value | Description |
|---|---|---|
title: String |
Title to be displayed in the center of the top app bar | |
navigationIcon: Widget? |
null |
Icon to be displayed at the start of the top app bar |
actions: List<Widget?> |
null |
Actions to be displayed at the end of the top app bar. |
Large top app bar
Flutter implementation
Add OdsLargeTopAppBar to your Scaffold topBar.
Here is an example of use:
return OdsLargeTopAppBar(
title: "Large",
actions: [
IconButton(icon: const Icon(Icons.color_lens), onPressed: () {})
],
navigationIcon: const BackButton(),
scrollBehavior: SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return ListTile(
title: Text('List item $index'),
);
},
childCount: 20,
),
),
);
OdsLargeTopAppBar API
| Parameter | Default value | Description |
|---|---|---|
title: String |
Title to be displayed in the center of the top app bar | |
navigationIcon: Widget? |
null |
Icon to be displayed at the start of the top app bar |
actions: List<Widget?> |
null |
Actions to be displayed at the end of the top app bar. |
scrollBehavior: Widget? |
null |
TopAppBarScrollBehavior attached to the top app bar |