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.

  • 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

Quick Action Debug console

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

Adding Navigation on Quick Action Option Selected

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