Published in


Quick Actions in Flutter App

In this article we will discuss about how to add quick actions in our flutter app and make our app more user friendly.

Quick Actions allows the user to directly interact with the app right from their device home screen.

  1. First let’s start by creating a simple app containing two independent screens first page screen and second page screen and two elevated buttons that will navigate us to the corresponding first or second page screen upon pressing them.

Now, let’s initialize the quick actions and add the shortcutItems in it as shown below.

If we now try to run our app we will be able to see the quick actions just by holding the app icon.

We have now successfully implemented the quick actions feature in our flutter app. But if we see the image (display below👇) we will notice the trailing icon as some dot. By default we get this dot icon when we try to add quick actions without providing our custom icon image.

Therefore let’ try adding our custom icon image for both android and iOS.

➡️ For android, we need to add our icon image inside
android/app/src/main/res/drawable folder.

➡️ For iOS, we need to open the project in Xcode just by right click over the ios folder in the project directory.

After which, we need to add the icon image inside the Runner/Runner/Assets/ (as shown below 👇)

Now try uninstalling the app and reinstall it again to visualize the changes.

Well that’s it. 🎉 This is how we can integrate quick actions in our flutter app.🥳

Refer my video tutorial for complete guide:👉

Get the complete source code here:👉



A list of Flutter Tutorials and app templates

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vijay R

Hai👋 I’m a flutter developer experienced in designing and developing stunning mobile apps. Reach out for freelance projects: