Add App Shortcuts in Flutter: A Step-by-Step Quick Actions Guide

⚡ Want to add app shortcuts in your Flutter app? Here’s a step-by-step guide.

Quick Actions (aka app icon shortcuts) aren’t just fancy — they boost usability by letting users jump directly to key screens like Home or Profile.

Set Up quick_actions Plugin

First, add the dependency to your pubspec.yaml:

dependencies:
  quick_actions: ^1.1.0

Initialize Your Quick Actions Logic

Create a handler to manage the initialization and shortcuts. This registers static shortcuts for both Android and iOS.

import 'package:quick_actions/quick_actions.dart';

typedef ShortcutCallback = void Function(String type);

class QuickActionsHandler {
  final QuickActions _qa = const QuickActions();

  void setup(ShortcutCallback onShortcut) {
    _qa.initialize(onShortcut);
    _qa.setShortcutItems([
      ShortcutItem(type: 'home', localizedTitle: 'Home', icon: 'home'),
      ShortcutItem(type: 'profile', localizedTitle: 'Profile', icon: 'profile'),
    ]);
  }
}

Handle Navigation Cleanly

Use a GlobalKey<NavigatorState> to route without relying on context. This allows you to navigate even when the app is launched from a cold start via a shortcut.

class _MyAppState extends State<MyApp> {
  final QuickActionsHandler _qaHandler = QuickActionsHandler();
  final GlobalKey<NavigatorState> _navKey = GlobalKey<NavigatorState>();

  @override
  void initState() {
    super.initState();
    _qaHandler.setup(_handleShortcut);
  }

  void _handleShortcut(String type) {
    switch (type) {
      case 'home':
        _navKey.currentState?.pushNamedAndRemoveUntil('/', (_) => false);
        break;
      case 'profile':
        _navKey.currentState?.pushNamed('/profile');
        break;
      default:
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: _navKey, // key is important here
      initialRoute: '/',
      routes: {'/': (_) => HomeScreen(), '/profile': (_) => ProfileScreen()},
    );
  }
}

Assets Matter: Icons Setup

Don't forget to add the icons referenced in your code (home, profile) to your native project folders:

• Android: Put PNGs or VectorDrawables (XML) in android/app/src/main/res/drawable/.
• iOS: Add PNGs in ios/Runner/Assets.xcassets, used in the icon field.

See It in Action & Dive Into Code

🎥 Demo: YouTube Short

💻 Source: GitHub Repository