How to Create Shortcuts/Quick Links in Home Screen in Flutter

In this example, we are going to show you how to create shortcuts on the home screen in Android or quick links for iOS in Flutter App. You will learn to add a shortcuts menu on App Icon in Home Screen. See the example below.

First, add quick_actions package in your project by adding the following lines in pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  quick_actions: ^0.6.0+9

Now, import the package in your script:

import 'package:quick_actions/quick_actions.dart';
QuickActions quickActions = const QuickActions();
quickActions.setShortcutItems(<ShortcutItem>[
    ShortcutItem(type: 'actionopen', localizedTitle: 'Open My Files', icon: 'folder'),
    ShortcutItem(type: 'actionupload', localizedTitle: 'Upload New File', icon: 'folder'),
    ShortcutItem(type: 'actioncreate', localizedTitle: 'Create New File', icon: 'folder')
]);

Here, the icon string is the name of the icon image native resource folder without extension, for example, xcassets on iOS or drawable on Android

Now, you can also listen to the Click on these shortcuts.

quickActions.initialize((shortcutType) {
  if (shortcutType == 'actionopen') {
      print("Open button is pressed");
  }else if(shortcutType == "actionupload"){
      print("Upload button is pressed.");
  }else if(shortcutType == "actioncreate"){
      print("Create Button is pressed");
  }
  // More handling code...
});

The output will look like below on Android:

import 'package:flutter/material.dart';
import 'package:quick_actions/quick_actions.dart';


Future<void> main() async {
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

   QuickActions quickActions = const QuickActions();

  @override
  void initState() {
    quickActions.initialize((shortcutType) {
      if (shortcutType == 'actionopen') {
          print("Open button is pressed");
      }else if(shortcutType == "actionupload"){
          print("Upload button is pressed.");
      }else if(shortcutType == "actioncreate"){
          print("Create Button is pressed");
      }
      // More handling code...
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    
    return  Scaffold(
          appBar: AppBar( 
              title: Text("MarkDown in Flutter"),
              backgroundColor: Colors.redAccent,
          ),
          body: Container( 
            alignment: Alignment.center,
            child: Column(
               children:[
                  ElevatedButton(onPressed: (){
                      quickActions.setShortcutItems(<ShortcutItem>[
                         ShortcutItem(type: 'actionopen', localizedTitle: 'Open My Files', icon: 'folder'),
                         ShortcutItem(type: 'actionupload', localizedTitle: 'Upload New File', icon: 'folder'),
                         ShortcutItem(type: 'actioncreate', localizedTitle: 'Create New File', icon: 'folder')
                      ]);
                  }, 
                  child: Text("Add Shortcut")
                )
               ]
            )
          ),
           
       );
  }
}

The output of this code is shown above. This is the way you can add shortcuts and quick links in Home Screen in Flutter. 

No any Comments on this Article


Please Wait...