contextualactionbar 1.0.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 77

Flutter contextual action bar(CAB) #

A reliable contextual action bar workaround for flutter.

CAB & Flutter #

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 #

  • ContextualActionScaffold
  • ContextualAppBar
  • ContextualAction
  • ContextualActionWidget

ContextualActionScaffold<?> #

The ContextualActionScaffold<?> is similar to the normal material Scaffold except that it also takes a required contextualAppBar.

      appBar: AppBar(),
      contextualAppBar: ContextualAppBar(),
      body: Body(),

ContextualAppBar<?> #

The ContextualAppBar<?> is similar to the normal material Appbar but takes a counterBuilder instead of title and also a contextualActions instead of actions.

      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.

            itemsHandler: (List<?> items) {
              items.forEach((item) {
                  content: Text("$item saved"),
            child: Icon(,

ContextualActionWidget<?> #

You can use the ContextualActionWidget anywhere in the ContextualActionScaffold body to notify ContextualActionScaffold that an item have been selected in order to show the ContextualAppBar.

          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 #

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, the ActionMode is will be enabled.

  • Use the ActionMode.addItems<?> to add a list of items.

  • Use the ActionMode.disableActionMode<?> to disable and deselect all selected items.

Note: In most cases, you won't need to use ActionMode.disableActionMode<?> because the package already do that for you where needed.

Study complete examples at example page

Other Packages authored by me #

License #

This package is licensed under the MIT license. See LICENSE for details.

1.0.0 - May 17, 2020 #

1.0.1 - May 17, 2020 #

1.0.2 - June 1, 2020 #

  • made the ContextualActionWidget<?> as big as the provided child widget

  • Included unSelectedWidget in ContextualActionWidget<?>

  • Included ActionMode.addItems<?>


import 'package:example/status_saver.dart';

import 'package:flutter/material.dart';
import 'package:permission_handler/permission_handler.dart';

import 'permission_service.dart';
import 'whatsapp.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Contextual Action Bar Demo',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(primarySwatch: Colors.teal),
        // for Scaffold.of(context)
        // home: Scaffold(body: Whatsapp()),
        home: Scaffold(
          body: StreamBuilder<PermissionStatus>(
              stream: (StoragePermissionService()..requestPermission())
              builder: (context, snapshot) {
                if (snapshot.hasData && {
                  return StatusSaver();
                return Container(
                  child: const CircularProgressIndicator(),

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  contextualactionbar: ^1.0.2

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:contextualactionbar/contextualactionbar.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Jul 11, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart


  • contextualactionbar that is a package requiring null.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.6.0 <3.0.0
flutter 0.0.0
provider ^4.1.2 4.3.1
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
nested 0.0.4
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies