Flutter: Quick Actions

This is some of the advance features which is being loved by the user, who uses phone a lot or your app is being used most of the time. In general this feature is not being used by all users.

Sometimes client ask for this features and as a developer it’s our duty to make it possible.

In this article, I will show you how you can make it and also make you understand the implementation also.

The complete code can be found at Github, here is Github Repo Link.

Logic behind Quick Actions #

When you long press on the and select any quick action option then it opens your app. In the app home there is registered callback waiting for app to be launched using quick action.

Based on the quick action option selected we can decide what action we want to perform. Based on the quick action concept we have to open the particular screen or perform that action.

Get Started #

To started with this we need to use one package called quick_actions. This isn’t any third party package, it’s by flutter team itself. The amount of trust you have on flutter team, you can have the same trust on this package too.

Let’s add the package to the pubspec.yaml file.

pubspec.yaml

name: quick_actions_demo
description: A new Flutter project.
version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.0
  quick_actions:

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

Creating Screens #

In this app we will have different screen so that we can have 3 different quick action button. The screen is going to be very simple and you don’t have focus much on the screen part.

I will be creating screens inside screen directory. So please create a directory screen inside lib directory

Home Screen Code #

The home screen will be having a title in the app bar which just says the name of our page Home in this case/screen.

lib/screens/home.dart

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Home',
        ),
      ),
    );
  }
}

Help Screen Codes #

lib/screens/help.dart

import 'package:flutter/material.dart';

class HelpScreen extends StatefulWidget {
  @override
  _HelpScreenState createState() => _HelpScreenState();
}

class _HelpScreenState extends State<HelpScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Help',
        ),
      ),
    );
  }
}

Message Screen Code #

lib/screens/message.dart

import 'package:flutter/material.dart';

class MessageScreen extends StatefulWidget {
  @override
  _MessageScreenState createState() => _MessageScreenState();
}

class _MessageScreenState extends State<MessageScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Message',
        ),
      ),
    );
  }
}

creating routes #

Now we will be creating routes for making the navigation easy. Let’s edit our main.dart file and make routes possible using named routes.

Route Name	Screen Name
/home	HomeScreen
/message	MessageScreen
/help	HelpScreen

lib/main.dart

import 'package:flutter/material.dart';
import 'package:quick_actions_demo/screen/home.dart';
import 'package:quick_actions_demo/screen/message.dart';
import 'package:quick_actions_demo/screen/help.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      routes: {
        '/home': (context) => HomeScreen(),
        '/message': (context) => MessageScreen(),
        '/help': (context) => HelpScreen(),
      },
      initialRoute: '/home',
    );
  }
}

Adding Quick Action #

Now we are going to add quick action features, now we have a simple app which have ability to route to different screen using name of routes(string).

Consider the above code as boilerplate code, the code which I am going to write now is the actual code responsible for making the quick action in action.

Register Quick Action #

To set the icon we need two required things:

type: this is going to be unique string among all the quick action options. This will help you in understanding the click.
localized tex: This is going to be text which will be visible to the user when they long press on app icon.
icon: This is icon which will be visible to the user with the localized text as prefix icon. (Optional)

Type	Localized Text
home	Home
message	Message
help	Help

We will open the initial route or home widget specified in Material app and register the quick actions. By this logic we have to open HomeScreen widget and register the quick actions.

lib/screen/home.dart

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final QuickActions quickActions = QuickActions();

  @override
  void initState() {
    super.initState();

    quickActions.initialize((String type){
        print("type");
        print(type);
    });
    
    quickActions.setShortcutItems(<ShortcutItem>[
      ShortcutItem(type: 'home', localizedTitle: 'Home'),
      ShortcutItem(type: 'message', localizedTitle: 'Message'),
      ShortcutItem(type: 'help', localizedTitle: 'Help'),
    ]);

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Home',
        ),
      ),
    );
  }
}

quickActions.initialize : This will be called whenever will opens the using quick action button.
quickActions.setShortcutItems : This will set the quick action menu options.

Testing Quick Action #

In this step we will run and test the app if we are getting the quick action button or not.

I will recommend to stop the app and start again to see the quick options. Hot reload/restart may not work.

Start the app on your emulator/simulator/real device.
Minimize the app
Long press on the app icon
probably now you can see some quick options
select any quick option i.e home
open the debug console you will find

in the debug console you will find the type and the type of button you clicked.

Now we will add a navigation when any quick action option selected, i.e navigating to the different screen. In last step we saw that we are getting message printed on the debug console.

In this step, we go one step further and navigate to screen based on the option selected.

lib/screen/home.dart

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final QuickActions quickActions = QuickActions();

  @override
  void initState() {
    super.initState();
    
    quickActions.initialize((String type){
        String route = '/' + type;
        Navigator.pushNamed(context, route);
    });

    quickActions.setShortcutItems(<ShortcutItem>[
      ShortcutItem(type: 'home', localizedTitle: 'Home'),
      ShortcutItem(type: 'message', localizedTitle: 'Message'),
      ShortcutItem(type: 'help', localizedTitle: 'Help'),
    ]);

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Home',
        ),
      ),
    );
  }
}

final code #

Github Repository

Download

nstack-in/quick-actions-demo-flutter

This repo contains an example of quick action in the flutter.

Dart 1

We have only edited home.dart page 4-5 times and this the final code. Other page code are not edited, after first creation. so you can get the code from above.

lib/screen/home.dart

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final QuickActions quickActions = QuickActions();

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

    quickActions.setShortcutItems(<ShortcutItem>[
      ShortcutItem(type: '/home', localizedTitle: 'Home'),
      ShortcutItem(type: '/message', localizedTitle: 'Message'),
      ShortcutItem(type: '/help', localizedTitle: 'Help'),
    ]);

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Home',
        ),
      ),
    );
  }

    void _navigateRoute(String route){
        Navigator.pushNamed(context, route);
    }
}

Conclusion #

I hope you got the idea how you can make quick action possible in your app. I also assume that you got the fundamental concept behind this and understood the implementation.

If you have any problem then feel free to comment and I will be happy to help thank you

Flutter: Quick Actions

Logic behind Quick Actions #

Get Started #

Creating Screens #

Home Screen Code #

Help Screen Codes #

Message Screen Code #

creating routes #

Adding Quick Action #

Register Quick Action #

Testing Quick Action #

Adding Navigation on Quick Action Option Selected #

final code #

Conclusion #

Subscribe to our Newsletter