GiffyBottomSheet class
A giffy bottom sheet based on Material Design modal bottom sheet.
A giffy bottom sheet is an alternative to a menu or a dialog and informs the user about situations that require acknowledgment.
An giffy bottom sheet has an optional title and an optional list of actions. The title is displayed above the content and the actions are displayed below the content.
If the content is too large to fit on the screen vertically, the dialog will display the title and the actions and let the content overflow, which is rarely desired. Consider using a scrolling widget for content, such as SingleChildScrollView, to avoid overflow. (However, be aware that since GiffyDialog tries to size itself using the intrinsic dimensions of its children, widgets such as ListView, GridView, and CustomScrollView, which use lazy viewports, will not work.)
Typically passed as the child widget to showModalBottomSheet, which displays the bottom sheet.
{@tool snippet}
This snippet shows a method in a State which, when called, displays a giffy bottom sheet and returns a Future that completes when the sheet is dismissed.
Future<void> _showMyDialog() async {
return showModalBottomSheet<void>(
context: context,
isScrollControlled: true,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return GiffyBottomSheet(
giffy: Image.asset('assets/giffy_sheet.gif'),
title: const Text('GiffyBottomSheet Title'),
content: SingleChildScrollView(
child: ListBody(
children: const <Widget>[
Text('This is a demo giffy bottom sheet.'),
Text('Would you like to approve of this message?'),
],
),
),
actions: <Widget>[
TextButton(
child: const Text('Approve'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
{@end-tool}
See also:
- showModalBottomSheet, which can be used to display a modal bottom sheet.
- BottomSheetThemeData, which can be used to customize the default bottom sheet property values.
- material.io/design/components/sheets-bottom.html
- Inheritance
-
- Object
- DiagnosticableTree
- Widget
- StatelessWidget
- GiffyBottomSheet
Constructors
-
GiffyBottomSheet({Key? key, required Widget giffy, GiffyBuilder giffyBuilder = defaultGiffyBuilder, EdgeInsetsGeometry? giffyPadding, Widget? title, EdgeInsetsGeometry? titlePadding, TextStyle? titleTextStyle, Widget? content, EdgeInsetsGeometry? contentPadding, TextStyle? contentTextStyle, List<
Widget> ? actions, EdgeInsetsGeometry? actionsPadding, MainAxisAlignment? actionsAlignment, VerticalDirection? actionsOverflowDirection, double? actionsOverflowButtonSpacing, OverflowBarAlignment? actionsOverflowAlignment, EdgeInsetsGeometry? buttonPadding, String? semanticLabel, bool scrollable = false, EntryAnimation entryAnimation = EntryAnimation.none}) -
Creates an giffy bottom sheet.
const
-
GiffyBottomSheet.image(Image image, {Key? key, GiffyBuilder giffyBuilder = defaultGiffyBuilder, EdgeInsetsGeometry? giffyPadding, Widget? title, EdgeInsetsGeometry? titlePadding, TextStyle? titleTextStyle, Widget? content, EdgeInsetsGeometry? contentPadding, TextStyle? contentTextStyle, List<
Widget> ? actions, EdgeInsetsGeometry? actionsPadding, MainAxisAlignment? actionsAlignment, VerticalDirection? actionsOverflowDirection, double? actionsOverflowButtonSpacing, OverflowBarAlignment? actionsOverflowAlignment, EdgeInsetsGeometry? buttonPadding, String? semanticLabel, bool scrollable = false, EntryAnimation entryAnimation = EntryAnimation.none}) -
Creates an giffy bottom sheet which uses a Image as the giffy.
const
-
GiffyBottomSheet.lottie(LottieBuilder lottie, {Key? key, GiffyBuilder giffyBuilder = defaultGiffyBuilder, EdgeInsetsGeometry? giffyPadding, Widget? title, EdgeInsetsGeometry? titlePadding, TextStyle? titleTextStyle, Widget? content, EdgeInsetsGeometry? contentPadding, TextStyle? contentTextStyle, List<
Widget> ? actions, EdgeInsetsGeometry? actionsPadding, MainAxisAlignment? actionsAlignment, VerticalDirection? actionsOverflowDirection, double? actionsOverflowButtonSpacing, OverflowBarAlignment? actionsOverflowAlignment, EdgeInsetsGeometry? buttonPadding, String? semanticLabel, bool scrollable = false, EntryAnimation entryAnimation = EntryAnimation.none}) -
Creates an giffy bottom sheet which uses a LottieBuilder as the giffy.
const
-
GiffyBottomSheet.rive(RiveAnimation rive, {Key? key, GiffyBuilder giffyBuilder = defaultGiffyBuilder, EdgeInsetsGeometry? giffyPadding, Widget? title, EdgeInsetsGeometry? titlePadding, TextStyle? titleTextStyle, Widget? content, EdgeInsetsGeometry? contentPadding, TextStyle? contentTextStyle, List<
Widget> ? actions, EdgeInsetsGeometry? actionsPadding, MainAxisAlignment? actionsAlignment, VerticalDirection? actionsOverflowDirection, double? actionsOverflowButtonSpacing, OverflowBarAlignment? actionsOverflowAlignment, EdgeInsetsGeometry? buttonPadding, String? semanticLabel, bool scrollable = false, EntryAnimation entryAnimation = EntryAnimation.none}) -
Creates an giffy bottom sheet which uses a RiveAnimation as the giffy.
const
Properties
-
actions
→ List<
Widget> ? -
The (optional) set of actions that are displayed at the bottom of the
modal with an OverflowBar.
final
- actionsAlignment → MainAxisAlignment?
-
final
- actionsOverflowAlignment → OverflowBarAlignment?
-
final
- actionsOverflowButtonSpacing → double?
-
The spacing between actions when the OverflowBar switches
to a column layout because the actions don't fit horizontally.
final
- actionsOverflowDirection → VerticalDirection?
-
The vertical direction of actions if the children overflow
horizontally.
final
- actionsPadding → EdgeInsetsGeometry?
-
Padding around the set of actions at the bottom of the modal.
final
-
final
- content → Widget?
-
The (optional) content of the modal is displayed in the center of the
modal in a lighter font.
final
- contentPadding → EdgeInsetsGeometry?
-
Padding around the content.
final
- contentTextStyle → TextStyle?
-
Style for the text in the content of this
Alertmodal
.final - entryAnimation → EntryAnimation
-
The animation to use when the modal is shown.
final
- giffy → Widget
-
The widget or the gif to be displayed at the top of the modal.
final
- giffyBuilder → GiffyBuilder
-
Builder that is called to build the giffy.
final
- giffyPadding → EdgeInsetsGeometry?
-
Padding around the giffy.
final
- hashCode → int
-
The hash code for this object.
no setterinherited
- key → Key?
-
Controls how one widget replaces another widget in the tree.
finalinherited
- runtimeType → Type
-
A representation of the runtime type of the object.
no setterinherited
- scrollable → bool
-
Determines whether the title and content widgets are wrapped in a
scrollable.
final
- semanticLabel → String?
-
The semantic label of the modal used by accessibility frameworks to
announce screen transitions when the modal is opened and closed.
final
- title → Widget?
-
The (optional) title of the modal is displayed in a large font at the top
of the modal, below the giffy.
final
- titlePadding → EdgeInsetsGeometry?
-
Padding around the title.
final
- titleTextStyle → TextStyle?
-
Style for the text in the title of this
GiffyModal
.final
Methods
-
build(
BuildContext context) → Widget -
Describes the part of the user interface represented by this widget.
override
-
createElement(
) → StatelessElement -
Creates a StatelessElement to manage this widget's location in the tree.
inherited
-
debugDescribeChildren(
) → List< DiagnosticsNode> -
Returns a list of DiagnosticsNode objects describing this node's
children.
inherited
-
debugFillProperties(
DiagnosticPropertiesBuilder properties) → void -
Add additional properties associated with the node.
inherited
-
noSuchMethod(
Invocation invocation) → dynamic -
Invoked when a nonexistent method or property is accessed.
inherited
-
toDiagnosticsNode(
{String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode -
Returns a debug representation of the object that is used by debugging
tools and by DiagnosticsNode.toStringDeep.
inherited
-
toString(
{DiagnosticLevel minLevel = DiagnosticLevel.info}) → String -
A string representation of this object.
inherited
-
toStringDeep(
{String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String -
Returns a string representation of this node and its descendants.
inherited
-
toStringShallow(
{String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String -
Returns a one-line detailed description of the object.
inherited
-
toStringShort(
) → String -
A short, textual description of this widget.
inherited
Operators
-
operator ==(
Object other) → bool -
The equality operator.
inherited