Step-By-Step-Implementation
Step 1: Create a Flutter App
Create a flutter app or add the code to an existing app.
Dart
flutter create . |
If you are using the feature in an existing app follow step 2.
Step 2: Add the following package
Add quick_actions package in your pubspec.yaml file
Dart
flutter pub add quick_actions |
Step 3: You need to firstly create instance of QuickAction
Create a instance for quick action either in initstate or as normal declaration
Dart
QuickActions quickActions = const QuickActions(); |
Step 4: Intialise the quick actions
We will initialise the quick actions and in this we will also handle what to do on different action
Dart
quickActions.initialize((String shortcutType) { // TO handle the quickaction tap screen }); |
This will intialise the quickaction and in next step. we wil add the icons details
Step 5: Add Quick actions button
Set quickactions button shortcut is init state like this
Dart
quickActions.setShortcutItems(<ShortcutItem>[ // NOTE: This first action icon will only work on iOS. // In a real world project keep the same file name for both platforms. const ShortcutItem( type: 'action_one' , // Type of action button localizedTitle: 'Action One' , // Title to be shown to customer icon: 'AppIcon' , // Name of Icon that you need to show in quick actions ), // NOTE: This second action icon will only work on Android. // In a real world project keep the same file name for both platforms. const ShortcutItem( type: 'action_two' , // Type of action button localizedTitle: 'Action Two' , // Name of Icon that you need to show in quick icon: 'ic_launcher' // Name of Icon that you need to show in quick actions ), ]).then(( void _) { // Setstate the shortcut variable to show // that shortcut is added successfully setState(() { if (shortcut == 'no action set' ) { shortcut = 'Actions Ready' ; } }); }); |
In this we have passed some parameters in which type means unique key and localizedTitle will be shown to user and icon image will be shown to customer. Here we have added two icons different for android and IOS but when we build this feature in our app we will add same icons for both android and iOS. Let’s learn how to do this settings in your app in next step
Step 6: Set icon in android and iOS folder
Generate App Icon from here App Icon Generator and give it a name like “image1” or “ic”. It will generate folder and download it. If you unzip the folder you will get all the icons for iOS,android and web. In Android folder you will get 5.
Let’s set icon for android
Copy all the 5 folders from android folder you get in previous step in \android\app\src\main\res. Now go to first folder named as mipmap-hdpi and copy the icon and now paste it in \android\app\src\main\res\drawable. In the same folder create 1 more file named as quick_actions.xml in \android\app\src\main\res\drawable
Add the following code
XML
<? xml version = "1.0" encoding = "utf-8" ?> < layer-list xmlns:android = "http://schemas.android.com/apk/res/android" > < item android:drawable = "@drawable/image1" /> <!-- here your icon name--> </ layer-list > |
In \android\app\src\main\res\values you will get styles.xml add following code in that
XML
< style name = "QuickActions" > < item name = "android:windowBackground" >@drawable/quick_actions</ item > </ style > |
If not found this file create and add the following code
XML
<? xml version = "1.0" encoding = "utf-8" ?> < resources > ... < style name = "QuickActions" > < item name = "android:windowBackground" >@drawable/quick_actions</ item > </ style > </ resources > |
You have successfully created icon for quick action in android copy the name you have given to icon and paste it in your dart file where you have set quick actions icon
Note:
For iOS: Prefer black color image other wise it will not reflect
Let’s do it for iOS also
1. Open the ios folder in xcode
You can do this through visual studio also just select the ios folder and click menu will appear select Open in Xcode
2. In the sidebar, “Show the Project Navigator” (icon on the left ) and click on “Assets”
It will be on Runner > Runner > Assets like below
3. In bottom you will see + and – icon select it
4. Select Image set from menu
5. Change the image name which you have mentioned in your code or for android and save it.
You can load this configruation file that may help
1x: Load image “29.png”
2x: Load image “60.png”
3x: Load image “120.png”
6. Uninstall the app and install it again
Step 7: Handle what to do when user click on actions button
Currently I am just changing the variable value you can do anything on this like navigating or any functionality. You can do this by checking shortcut_type label and perform action according to that
Dart
quickActions.initialize((String shortcutType) { setState(() { shortcut = shortcutType; }); }); |
Here you Go !! You have added the quick actions in your app.
Flutter – Add Quick Actions Button
Quick actions for your launcher screen so that your users can access commonly used functions, such as opening a particular screen, transferring records or using a template in the mobile app, etc. Also called as App Shortcuts(in Android) and Home Screen Actions(in iOS) which allow users to perform certain app actions without having to open the app. A sample video is given below to get an idea about what we are going to do in this article.