Quick Action for Android in Flutter

Manage and interact with your app right from Home Screen | App Drawer on Android.

Ahoy!👋 Another day another blog, and today it is on Quick Actions in flutter. I feel this is an underrated feature that comes in very handy right at your fingertips.

This feature allows users to redirect to a particular page or do any action you would want it to do when it has been tapped 👆. So let’s get started on how we can implement it.

Package Used

quick_actions | Flutter Package

pubspec.yaml

Add the following dependency in pubspec.yaml and install it with the flutter pub get command.

dependencies:
  flutter:
    sdk: flutter
    
  quick_actions: ^0.6.0+11


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2

Importing the quick_actions Dependency package into the code in the main.dart file:

import 'package:quick_actions/quick_actions.dart';

You need to ensure that you’re initializing the quick_actions early in your application’s lifecycle by providing a callback, which will then be called whenever the user launches the app via a quick action.

Initializing quick_actions

@override
void initState() {
  quickActions.initialize((type) {});
  super.initState();
}

Initializing setShortcutItems

@override
void initState() {
  quickActions.initialize((type) {});

  quickActions.setShortcutItems([
    const ShortcutItem(
      type: 'red',
      localizedTitle: 'Red Screen',
      icon: 'red_icon',
    ),
    const ShortcutItem(
      type: 'green',
      localizedTitle: 'Green Screen',
      icon: 'green_icon',
    ),
    const ShortcutItem(
      type: 'blue',
      localizedTitle: 'Blue Screen',
      icon: 'blue_icon',
    ),
  ]);

  super.initState();
}

setShortCutItems is used for building individual shortcuts. There are three parameters for this class:

• type — It passes data when clicked on a shortcut.
• localizedTitle — Text to be displayed for the shortcut item.
• icon — Specify the icon file name to be displayed for the shortcut list.

Method for Navigation

void _navigate(Widget screen) {
  Navigator.of(context).push(MaterialPageRoute(builder: (_) => screen));
}

Let’s make a simple UI ✨

• Dashboard Widget

class DashBoard extends StatefulWidget {
  const DashBoard({Key? key}) : super(key: key);

  @override
  State<DashBoard> createState() => _DashBoardState();
}

class _DashBoardState extends State<DashBoard> {

  QuickActions quickActions = const QuickActions();

  void _navigate(Widget screen) {
    Navigator.of(context).push(MaterialPageRoute(builder: (_) => screen));
  }

  @override
  void initState() {
    quickActions.initialize((type) {});

    quickActions.setShortcutItems([
      const ShortcutItem(
        type: 'red',
        localizedTitle: 'Red Screen',
        icon: 'red_icon',
      ),
      const ShortcutItem(
        type: 'green',
        localizedTitle: 'Green Screen',
        icon: 'green_icon',
      ),
      const ShortcutItem(
        type: 'blue',
        localizedTitle: 'Blue Screen',
        icon: 'blue_icon',
      ),
    ]);

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 0,
        elevation: 0,
        backgroundColor: Colors.transparent,
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            GestureDetector(
              onTap: () {
                _navigate(const ColorScreen(color: 'red'));
              },
              child: Container(
                height: 150.0,
                width: MediaQuery.of(context).size.width,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5.0),
                    color: Colors.red[900],
                ),
                child: Text(
                  'RED',
                  style: TextStyle(
                    color: Colors.red[300],
                    fontWeight: FontWeight.w500,
                    fontSize: 30.0,
                  ),
                ),
              ),
            ),
            GestureDetector(
              onTap: () {
                _navigate(const ColorScreen(color: 'green'));
              },
              child: Container(
                height: 150.0,
                width: MediaQuery.of(context).size.width,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(5.0),
                  color: Colors.green[900],
                ),
                child: Text(
                  'GREEN',
                  style: TextStyle(
                    color: Colors.green[300],
                    fontWeight: FontWeight.w500,
                    fontSize: 30.0,
                  ),
                ),
              ),
            ),
            GestureDetector(
              onTap: () {
                _navigate(const ColorScreen(color: 'blue'));
              },
              child: Container(
                height: 150.0,
                width: MediaQuery.of(context).size.width,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(5.0),
                  color: Colors.blue[900],
                ),
                child: Text(
                  'BLUE',
                  style: TextStyle(
                    color: Colors.blue[300],
                    fontWeight: FontWeight.w500,
                    fontSize: 30.0,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Created the main class Dashboard and made simple tiles where on the click it navigates to theColorScreen .

Dashboard Screen

• ColorScreen Widget

class ColorScreen extends StatefulWidget {

  final String color;

  const ColorScreen({Key? key, required this.color}) : super(key: key);

  @override
  State<ColorScreen> createState() => _ColorScreenState();
}

class _ColorScreenState extends State<ColorScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: widget.color == 'red' ? Colors.red[900] : widget.color == 'green' ? Colors.green[900] : Colors.blue[900],
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.transparent,
      ),
      body: Center(
        child: Text(
          widget.color == 'red' ? 'Red\nScreen' : widget.color == 'green' ? 'Green\nScreen' : 'Blue\nScreen',
          style: TextStyle(
            fontSize: 40.0,
            fontWeight: FontWeight.w500,
            color: widget.color == 'red' ? Colors.red[300] : widget.color == 'green' ? Colors.green[300] : Colors.blue[300],
          ),
          textAlign: TextAlign.center,
        ),
      ),
    );
  }
}
    );
  }
}

In the ColorScreen widget I am using a constructor color for receiving the data to know which color to be displayed and by using Ternary Operator to display the respective colors and text on the screen.

Color Screens

Handling OnClick

This code is used to navigate to a screen when a user clicks on one of the ShortcutItem . For my example I have given redirection of the page you can make it do anything else according to your needs.

quickActions.initialize((type) {
  switch(type) {
    case 'red':
      return _navigate(ColorScreen(color: type));
    case 'green':
      return _navigate(ColorScreen(color: type));
    case 'blue':
      return _navigate(ColorScreen(color: type));
  }
});

Adding Icons to ShortcutItems

ShortcutItem(
  type: 'red',
  localizedTitle: 'Red Screen',
  icon: 'red_icon',
)

The text specified in the icon parameter should match to the file name of your image or icon.

You should place your images or icons in the drawable folder which is located at Project Directory/android/app/src/main/res/drawable.

Voilà we are done 🎉

Complete Code

GitHub - srinivasa-dev/Quick-Action: