Quick Action Flutter Example
This article explains you how to create and display shortcuts with app icon using quick action in flutter application. You can also check out flutter navigation related articles.
In this flutter example, we are launching four screens jobs, profile, messages and more with the help of creating app shortcuts. First we need to initialize QuickActions widget with each screen shortcutType. We need to call navigator push method of all screens which we want to display with app shortcuts.
Then we need to call setShortcutItems method of QuickActions widget to pass icon, localizedTitle and type of all screens using ShortcutItem class. Type must be same as we passed in initialize method. localizedTitle is used to display title of screen when we display app shortcuts using quick actions.
Add dependency in pubspec.yaml file
Create Screens to Navigate
class MyJobsScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text(‘Jobs Screen’, style: TextStyle(fontSize: 50, fontWeight: FontWeight.bold)),
),
);
}
}
class MyProfileScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text(‘Profile Screen’, style: TextStyle(fontSize: 50, fontWeight: FontWeight.bold)),
));
}
}
class MyMessagesScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text(‘Messages Screen’, style: TextStyle(fontSize: 50, fontWeight: FontWeight.bold)),
));
}
}
class MyMoreScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text(‘More Screen’, style: TextStyle(fontSize: 50, fontWeight: FontWeight.bold)),
));
}
}
Initialize Quick Action Flutter
@override
void initState() {
super.initState();
quickActions.initialize((String shortcutType) {
switch (shortcutType) {
case ‘jobs_screen’:
return launchNewScreen(MyJobsScreen());
case ‘profile_screen’:
return launchNewScreen(MyProfileScreen());
case ‘messages_screen’:
return launchNewScreen(MyMessagesScreen());
case ‘more_screen’:
return launchNewScreen(MyMoreScreen());
default:
return MaterialPageRoute(builder: (_) {
return Scaffold(
body: Center(
child: Text(‘No Page defined for $shortcutType’),
),
);
});
}
});
}
Navigator.of(context).push(MaterialPageRoute(builder: (_) => screen));
}
Set Quick Action Items
void initState() {
super.initState();
quickActions.setShortcutItems(<ShortcutItem>[
ShortcutItem(
type: ‘jobs_screen’,
localizedTitle: ‘Jobs Screen’,
),
ShortcutItem(
type: ‘profile_screen’,
localizedTitle: ‘Profile Screen’,
),
ShortcutItem(
type: ‘messages_screen’,
localizedTitle: ‘Messages Screen’,
),
ShortcutItem(
type: ‘more_screen’,
localizedTitle: ‘More Screen’,
),
]);
}
Pingback: Flutter Stepper Widget Example - CodingWithDhrumil