Flutter Fix
No Result
View All Result
  • Login
  • Register
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
FORUM
ASK QUESTION
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
No Result
View All Result
Flutter Fix
No Result
View All Result
Home Components App Bar

A Contextual Action/App Bar Implementation for Flutter

August 19, 2020
in App Bar, Material Design
5 min read
A Contextual Action/App Bar Implementation for Flutter

A flutter Implementation of aContextual action bar. Contextual action bars provide actions for selected items.

RELATED FLUTTER RESOURCES

A Flutter App for Tracking Funds/Money – Budget Tracker

Flutter Animated Search App Bar (Example + Implementation)

How To Add a Backdrop in Flutter (Material Design)

Flutter contextual action bar(CAB)

A Contextual action bar workaround for flutter.

ADVERTISEMENT

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

  • ContextualScaffold or ContextualScrollView(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.

status_saver

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.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.

GitHub

A Contextual action bar workaround for flutter
https://github.com/De-Morgan/flutter-contextual-action-bar
8 forks.
16 stars.
0 open issues.
Recent commits:

  • Update README.md, GitHub
  • Update README.md, GitHub
  • updated README.md, Morgan
  • refactored to support multiple contextual_scaffold, Morgan
  • refactored to support multiple contextual_scaffold, Morgan

RelatedFlutter Resource

A Flutter App for Tracking Funds/Money – Budget Tracker
Finance App

A Flutter App for Tracking Funds/Money – Budget Tracker

August 17, 2020
Flutter Animated Search App Bar (Example + Implementation)
App Bar

Flutter Animated Search App Bar (Example + Implementation)

August 6, 2020
backdrops flutter
Material Design

How To Add a Backdrop in Flutter (Material Design)

August 6, 2020
custom fonts text style flutter
Flutter Widgets

Flutter Custom Fonts and How to Style Text

July 24, 2020
HOW TO USE THE FLUTTER TEXTFIELD
Flutter Widgets

How to use the Flutter Text Field and Input Widget

July 13, 2020
FLUTTER-FUTUER-APP-DEVELOPMENT
Dart

Why Google Flutter Is the Future of Mobile App Development

July 12, 2020
Next Post
Water Droplet Loader Flutter

A Simple Water Droplet Circle Loader with flutter

Flutter Shopping eCommerce App UI Kit + Source Code

Flutter Shopping eCommerce App UI Kit + Source Code

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended Stories

Flutter Animated Search App Bar (Example + Implementation)

Flutter Animated Search App Bar (Example + Implementation)

August 6, 2020
Different Ways to apply Gradient Colors In Flutter + App Bar

Different Ways to apply Gradient Colors In Flutter + App Bar

June 27, 2020
Create a Beautiful & Customized Tab/Toggle in Flutter

Create a Beautiful & Customized Tab/Toggle in Flutter

August 7, 2020

Popular Stories

  • FLUTTER-FUTUER-APP-DEVELOPMENT

    Why Google Flutter Is the Future of Mobile App Development

    0 shares
    Share 0 Tweet 0
  • Container Widget & Box Model in Flutter – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Create a Beautiful & Customized Tab/Toggle in Flutter

    0 shares
    Share 0 Tweet 0
  • Flutter Form & FormField Widget – Implementation & Example

    0 shares
    Share 0 Tweet 0
  • Flutter Future, Await, and Async – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • HOME
  • ABOUT US
  • CONTACT US
  • DMCA
  • TERMS & CONDITIONS
  • PRIVACY POLICY
Call us: +234 705 505 5426

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

No Result
View All Result
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In