ComponentsNavigation BarA navigation bar is a prominent UI element that typically appears at the top of a window or screen in digital interfaces, aiding users in navigating through a hierarchical structure of content.
Guidelines
Mobile
Resources
- You can use these components by accessing the provided resource files.
- Preview animations are examples and may not suit Mobile Widgets. Press 'View Code' to access the Widgetbook Playground and see the Flutter widget displaying all created components and interactive.
Usage
Import this line to your file:
import 'package:buma_design_system/buma_design_system.dart';
Attributes of all variants
If there is a question mark ? in the Data Type, it means that the properties are optional, this is namedConstructor from UIAppBar.
UIAppBar is naming alias from NavigationBar because google material have already naming header screen appbar.
UIAppBar
You can call all variants on UIAppBar such as: back and close, with same properties.
| Properties | Data Type | Description | Default Value |
|---|---|---|---|
| title | String | A title page information | null |
| desc | String? | A description below title page | null |
| actions | List<Widget>? | A collections to show menu at trailing appbar | [] |
| onBackPressed | VoidCallback? | A callback without data when user press the leading button. When onBackPressed is null will return previous page | null |
| hasBackButton | bool | A switch to show appbar has BackButton or CloseButton | UIAppBar.back (true) |
UIAppBar.back
UIAppBar.back(
title: 'Title',
desc: 'Description',
actions: [
IconButton(onPressed: () { /* Do something menu1 */ }),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: IconButton(
onPressed: () { /* Do something menu2 */ },
icon: const Icon(Icons.settings),
),
),
],
onBackPressed: () { /* Do something */ },
)
UIAppBar.back
UIAppBar.close(
title: 'Title',
desc: 'Description',
actions: [
IconButton(onPressed: () { /* Do something menu1 */ }),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: IconButton(
onPressed: () { /* Do something menu2 */ },
icon: const Icon(Icons.settings),
),
),
],
onBackPressed: () { /* Do something */ },
)