How to Implement App Shortcuts with Riverpod State Management and GoRouter in Flutter

Madhan
3 min readSep 3, 2024

--

In this article, we will see how to implement Home Screen Actions (in iOS) or App Shortcuts (in Android) in Flutter

What are App Shortcuts?

Home Screen App Shortcuts allow people to perform app-specific actions from the Home Screen. People can get a menu of available quick actions when they touch and hold an app icon (on a 3D Touch device, people can press on the icon with increased pressure to see the menu)

Step 1: Install-Package Dependencies

Add the following packages to pubspec.yaml file

dependencies:
flutter:
sdk: flutter
quick_actions: ^1.0.7
go_router: ^14.2.7
hooks_riverpod: ^2.5.2

Initialize the library 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.

final QuickActions quickActions = const QuickActions();
quickActions.initialize((shortcutType) {
if (shortcutType == 'action_main') {
print('The user tapped on the "Main view" action.');
}
// More handling code...
});

Finally, manage the app’s quick actions, for instance:

quickActions.setShortcutItems(<ShortcutItem>[
const ShortcutItem(type: 'action_main', localizedTitle: 'Home Screen', icon: 'ic_launcher'),
const ShortcutItem(type: 'action_help', localizedTitle: 'Profile Detail Screen', icon: 'ic_launcher')
]);

Now, we will see how to implement Riverpod state management with go_router

Step 3:

Create QuickActions Notifier that provides an action item name, which is selected from quick actions

Create quickActionProvider that provides the current state action name

import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:quick_actions_example/quick_action_notifer.dart';

final quickActionProvider =
StateNotifierProvider<QuickActionNotifier, String>((ref) {
return QuickActionNotifier();
});

To listen for changes, we create a ValueNotifier to update the status of whether the user has selected quick actions or not.

Based on the actions, it will navigate; if it’s on the same screen, it will not.

final output

Final Thoughts!..

You can find the Complete Source code on GitHub, If you have any insights or suggestions, I would love to hear them. Please add your comments above the article.

--

--

Madhan

Learning from errors and sharing it with budding developers in simple way. Flutter 🌐| Dart 🎯| Kotlin 📱| HTML 🗒️ | CSS🖼️ | Javascript 📜 | Python | SQL