ComponentsBottom SheetBottom sheet refers to a persistent or temporary view that slides up from the bottom edge of the screen to reveal additional content, controls, or actions.
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
If there is a question mark ? in the Data Type, it means that the properties are optional
| Properties | Data Type | Description | Default Value |
|---|---|---|---|
| title | String? | Displays label at the top of bottom sheet | null |
| isFullScreen | bool | Make the bottom sheet full screen height | false |
| isEnableDrag | bool | Make the bottom sheet to enable draggable gesture | true |
| isDismissible | bool | Make bottom sheet be dismissed when user taps on the scrim | true |
| child | Widget? | The content of bottom sheet | null |
Previews & Code
You can call the components with Class.namedConstructor() with different variants.
Show Bottom Sheet
- Provide quick access to additional actions or functionalities related to the current screen or context
- Effective for displaying confirmation dialogs or feedback messages after users perform certain actions, such as deleting an item or submitting a form.
UIBottomSheet.show(
context,
title: 'Title',
child: { your_widget_content},
);
Close Bottom Sheet
To close the bottom sheet, you can either drag a screen other than the bottom sheet, or have an additional button to close or dismiss the bottom sheet
/// Close Bottom Sheet
UIBottomSheet.show(
context,
title: 'Title',
child: UIButton.primary(
label: "Close",
onPressed: (){
Navigator.pop(context);
}
),
);