bs_flutter_modal

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