Quick Action in Flutter
Hello all, I welcome you all to my new blog on Quick action in flutter. This feature is not the most frequently used feature but when the routing of our app becomes bigger then this feature will really help our user to navigate to a particular screen directly.
Although this feature is less demanded by the users but sometimes our clients might ask for it. So let’s get started and learn how to implement it.
Package used:
Install the following dependency in your pubspec.yaml file.
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.0
quick_actions: ^0.4.0+10
Understanding quick_actions package:
Before diving into the coding part let’s understand the methods provided by this package.
initialize
This method initializes this package. This method called first and before further interaction.
setShortcutItems
This method takes a list of ShortcutItem that become the quick action.
clearShortcutItems
It removes all the ShortcutItem from the quick action item list.
Let’s code:
Create an object of QuickActions:
QuickActions quickActions = QuickActions();
Initialize the quickActions object inside the initState method:
void initState() {
super.initState();
quickActions.initialize((String shortcutType) {
});
}
Initialize the setShortcutItems :
void initState() {
super.initState();
quickActions.initialize((String shortcutType) {
});
quickActions.setShortcutItems(<ShortcutItem>[
ShortcutItem(
type: 'second page',
localizedTitle: 'New Page',
),
]);
}
ShortcutItem is a class inside the quick_actions package that builds a quick action item. It takes a type, localizedTitle, icon parameter. type is a parameter that is passed to the initialize method when the ShortcutItem is clicked. The localizedTitle is the title of ShortcutItem that is display on the long press of the app icon.
Navigating to a new page on taping ShortcutItem :
quickActions.initialize((String shortcutType) {
Navigator.of(context).push(MaterialPageRoute(
builder: (_) => SecondPage(
title: shortcutType,
)));
});
We just need to pass the push method inside the initialize method that will navigate to SecondPage.
SecondPage widget:
class SecondPage extends StatelessWidget {
final String title;
SecondPage({this.title});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Text(title),
),
);
}
}
Let’s create a multiple items list and handling each screen by tapping items:
Adding items to ShortcutItem list:
quickActions.setShortcutItems(<ShortcutItem>[
ShortcutItem(
type: 'cart_page',
localizedTitle: 'Cart Page',
),
ShortcutItem(
type: 'order_page',
localizedTitle: 'Order Page',
),
ShortcutItem(
type: 'notification_page',
localizedTitle: 'Notification Page',
),
ShortcutItem(
type: 'place_order',
localizedTitle: 'Place Order',
),
]);
Create four different class for each ShortcutItem:
class CartPage extends StatelessWidget {
final String title;
CartPage({this.title});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Text(title),
),
);
}
}
class OrderPage extends StatelessWidget {
final String title;
OrderPage({this.title});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Text(title),
),
);
}
}
class PlaceOrder extends StatelessWidget {
final String title;
PlaceOrder({this.title});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Text(title),
),
);
}
}
class NotificationPage extends StatelessWidget {
final String title;
NotificationPage({this.title});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Text(title),
),
);
}
}
To handle all the gestures we will use a switch case that will check for the shortcutType and navigate it to the given page.
quickActions.initialize((String shortcutType) {
switch (shortcutType) {
case 'cart_page':
return _navigate(CartPage(
title: shortcutType,
));
case 'order_page':
return _navigate(OrderPage(
title: shortcutType,
));
case 'notification_page':
return _navigate(NotificationPage(
title: shortcutType,
));
case 'place_order':
return _navigate(PlaceOrder(
title: shortcutType,
));
default:
return MaterialPageRoute(builder: (_) {
return Scaffold(
body: Center(
child: Text('No Page defined for $shortcutType'),
),
);
});
}
});
Navigation method:
_navigate(Widget screen) {
Navigator.of(context).push(MaterialPageRoute(builder: (_) => screen));
}
Demo module:
Full code file:
https://gist.github.com/anmolseth06/db5d91c5990fa43a7b40d6cc66f59f81#file-main-dart
Thanks for reading this article ❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
If we got something wrong? Let me know in the comments. we would love to improve.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.
