expandablebottomappbar
animatable bottom app bar with expandable sheet.
getting started
add the plugin:
dependencies:
...
expandable_bottom_bar: any
basic usage
adding the widget
bottomnavigationbar: bottomexpandableappbar(
// provide the bar controller in build method or default controller as ancestor in a tree
controller: bbc,
expandedheight: expandedheight.value,
horizontalmargin: 16,
expandedbackcolor: theme.of(context).backgroundcolor,
// your bottom sheet code here
expandedbody: center(
child: text("hello world!"),
),
// your bottom app bar code here
bottomappbarbody: padding(
padding: const edgeinsets.all(8.0),
child: row(
mainaxissize: mainaxissize.max,
children: <widget>[
expanded(
child: text(
"hello",
textalign: textalign.center,
),
),
spacer(
flex: 2,
),
expanded(
child: text(
"world",
textalign: textalign.center,
),
),
],
),
),
)
customization (optional)
bottomexpandableappbar
horizontalmargin – distance of sheet’s sides from edge
bottomoffset – distance of top sheet’s edge from top appbar’s edge in closed state
shape – notch shape for fab
appbarheight – if you need change app bar height
bottomappbarcolor – background color of appbar container
or
appbardecoration – decoration of appbar container
expandedbackcolor – background color of sheet container
or
expandeddecoration – decoration of sheet container
controls
bottomappbarcontroller
settings
snap – if true sheet will snap to opened and closed state
draglength – distance that pointer should travel for fully open/close the sheet
callbacks
should have draglength defined
ondrag – use that with gesturedetector for swipe control
ondragend – use that with gesturedetector for swipe control
open – switch the sheet to closed state
close – switch the sheet to opened state
swap – if sheet is opened closes the sheet and vice versa
Comments are closed.