0 purchases
Description:
bs flutter modal
bs_flutter_modal #
Example: main.dart
Use flutter bootstrap modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Getting Started #
Add the dependency in pubspec.yaml:
dependencies:
...
bs_flutter_modal: any
copied to clipboard
Modal will be show using showDialog, because BsModal is a Dialog widget
// ...
BsButton(
style: BsButtonStyle.primary,
margin: EdgeInsets.only(right: 5.0, bottom: 10.0),
label: Text('Centered Small Modal with No Radius'),
onPressed: () => showDialog(context: context, builder: (context) => BsModal(
context: context,
dialog: BsModalDialog(
size: BsModalSize.sm,
crossAxisAlignment: crossAxisAlignment.center,
child: BsModalContent(
decoration: BoxDecoration(
color: Colors.white,
),
children: [
BsModalContainer(title: Text('Content'), closeButton: true),
BsModalContainer(
child: Column(
children: [
Text('Content')
]
),
),
BsModalContainer(
crossAxisAlignment: CrossAxisAlignment.end,
actions: [
BsButton(
style: BsButtonStyle.danger,
label: Text('Close Modal'),
prefixIcon: Icons.close,
onPressed: () {
Navigator.pop(context);
},
)
],
)
],
),
),
)),
)
// ...
copied to clipboard
Note
BsModalDialog is backdrop layout
BsModalContent is content from modal
BsModalContainer is children from BsModalContent
Change size properties to change modal size
BsModalContainer can be use as modal-header, modal-body and modal-footer
To set BsModalContent to centered, you can modify crossAxisAlignment on BsModalDialog properties
License
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
Files:
Customer Reviews
There are no reviews.
