Bootstrap Like Modal: BSModal
Post All Questions on StackOverflow, and tag @CatTrain (user:16200950)
Importing:
YAML:
bootstrap_like_modal: ^0.0.1
Dart:
import 'package:bootstrap_like_modal/bootstrap_like_modal.dart';
Simple Example:
import 'package:flutter/material.dart';
import 'package:bootstrap_like_modal/bootstrap_like_modal.dart';
void main() {
BSModal modal = BSModal(
title: const Text("Title"),
content: const Text("Content"),
);
modal.actions = [
ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.red),
),
child: Text("Close"),
onPressed: () {
modal.hide();
},
),
];
runApp(
MaterialApp(
home: Scaffold(
body: Builder(
builder: (context) {
return ElevatedButton(
child: Text("Open Modal"),
onPressed: () {
modal.show(context);
},
);
},
),
),
),
);
}
BSModal
A class that makes using a modal easier. The BSModal class has the below methods and members.
Methods:
bool isOpen()
- returns true if the modal is currently open
void toggle(BuildContext passedContext)
- opens the modal or closes it. if the modal is currently open it closes, and if it is close it opens it.
void hide()
- hides the modal
Future
- Opens the modal
Members:
The below members can be set in teh constructor, or set after the BSModal class has been created. For example, see below. Note that the majority of the members are passed to showDialog
, and AlertDialog
// constructor way
BSModal modal = BSModal(
content: Text("Content"),
);
// alternate way
modal.content = Text("Content 2");
Custom:
- onHide
- A function that runs when the modal is done closing
- onShow
- A function that runs once the modal is done opening
- dynamicSize
- bool that if true sizes the modal width dynamically based on the screensize
- modalType
- specifies the max width of the modal. Sizes defined by bootstrap_like_breakpoints
- sm
- md
- lg
- xl
- specifies the max width of the modal. Sizes defined by bootstrap_like_breakpoints
- titleDivider
- A Divider under the title
- actionsDivider
- A Divider above the actions
- bsModalTitleColumnOptions
- Class containing all the options that can be passed to a Column
- The Column is located in the title of the modal
- bsModalActionsRowOptions
- Class containing all the options that can be passed to a Row
- The Row is in the actions of the modal
- enableTitleDivider
- bool that if false hides the
titleDivider
- bool that if false hides the
- enableActionsDivider
- bool that if false hides the
actionsDivider
- bool that if false hides the
showDialog
:
- barrierColor
- barrierDismissible
- barrierLabel
- routeSettings
- useSafeArea
- useRootNavigator
AlertDialog
:
- content
- title
- actions
- backgroundColor
- clipBehavior
- actionsAlignment
- actionsOverflowButtonSpacing
- actionsOverflowDirection
- actionsPadding
- buttonPadding
- contentPadding
- contentTextStyle
- elevation
- insetPadding
- scrollable
- semanticLabel
- shape
- titlePadding
- titleTextStyle
Ref:
https://getbootstrap.com/docs/4.0/components/modal/
https://pub.dev/packages/bootstrap_like_breakpoints
https://api.flutter.dev/flutter/material/AlertDialog-class.html
https://api.flutter.dev/flutter/material/showDialog.html