flutter contextual action bar(cab)
a contextual action bar workaround for flutter.
cab & flutter
contextual action bar (cab) is a top app bar that replace the application app bar to provide contextual actions to selected items. check the material implementation and requirement here
flutter does not natively support cab yet. see issue
until cab is natively supported, this package should provide you with an elegant way to implement the contextual action bar in flutter.
how it works
contextualscaffold
orcontextualscrollview
(for slivers)contextualappbar
contextualaction
contextualactionwidget
contextualscaffold<?>
the contextualscaffold<?>
is similar to the normal material scaffold
except that it also takes
a required contextualappbar
.
contextualscaffold<?>(
contextualappbar: contextualappbar(),
appbar: appbar(),
body: body(),
)
you can provide multiple contextualscaffold
as needed
contextualscrollview<?>
the contextualscrollview<?>
is similar to the normal nestedscrollview
except that it also takes a required contextualappbar
.
contextualscrollview<?>(
contextualappbar: contextualappbar(),
headersliverbuilder: (buildcontext context, bool innerboxisscrolled) => [],
body: body(),
)
the contextualscrollview is used to add first class support for silvers although contextualscaffold
can also be used with nestedscrollview
check the whatsapp
example for complete usage.
contextualappbar<?>
the contextualappbar<?>
is similar to the normal material appbar
but takes a counterbuilder
instead of title
and also a contextualactions
instead of actions
.
contextualappbar(
counterbuilder: (int itemscount){
return text("$itemscount selected");
},
contextualactions: <contextualaction>[],
)
contextualaction<?>
the contextualaction<?>
allows you to take actions on the selected items, with the help of itemshandler
callback.
contextualaction(
itemshandler: (list<?> items) {
items.foreach((item) {
scaffold.of(context).showsnackbar(snackbar(
content: text("$item saved"),
));
});
},
child: icon(icons.save),
),
contextualactionwidget<?>
you can use the contextualactionwidget
anywhere in the contextualactionscaffold
or contextualscrollview<?>
body
to notify contextualactionscaffold
or contextualscrollview<?>
respectively, that an item have been selected in order to show the contextualappbar
.
contextualactionwidget(
data: ?,
child: childwidget(),
)
note: it is important that the child widget does not handle onlongpress.
a closer look at contextualactionwidget<?>
the contextualactionwidget<?>
takes other optional parameters like
selectedcolor
selectedwidget
unselectedwidget
the selectedcolor
is the color of the background for the selected item, it defaults to the splash color, if not provided. the selectedcolor
works well with listtile
.
selectedwidget
and unselectedwidget
are stacked
on top of the provided child widget. by default, they are positioned at the center of the provided child widget.
since they are stacked, you can use row
, align
, positioned
widget or any other combination of widgets to position them where desired.
the selectedwidget
is shown when the actionmode
is enabled and the item is selected, while the unselectedwidget
is shown when actionmode
is enabled and the item is not selected. see example(status_saver) image below with both the selectedwidget
and unselectedwidget
aligned to the top-right corner.
actionmode in contextual action bar
this contextual action bar workaround does not support zero item in the actionmode
.
- use the
actionmode.additem<?>
to add an item to the selected items. if this is the first selection, theactionmode
is will be enabled. - use the
actionmode.additems<?>
to add a list of items. - use the
actionmode.disable<?>
to disable and deselect all selected items. - use the
actionmode.enabledstream<?>
to emit true or false depending on if the action mode is enabled or disabled respectively.
note: in most cases, you won’t need to use actionmode.disable<?>
because the package already do that for you where needed.
Comments are closed.