Flutter: Quick Actions
How to create Quick Actions in Flutter
Pengenalan
Ada salah satu fitur di Android dan iOS yang memiliki fungsi cukup bagus namun, fitur tersebut hanya sedikit para pengguna yang mengetahuinya. Nama dari fitur tersebut adalah App Shortcuts (Android) dan Quick Actions (iOS). Jadi, sebenarnya kedua fitur tersebut memiliki fungsi yang sama yaitu sama-sama berfungsi sebagai shortcut menu. Cara kerjanya adalah kita cukup tap n hold saja icon app-nya maka, nanti akan muncul beberapa menu yang tersedia dan ketika kita pilih salah satu menu tersebut maka, si pengguna akan langsung diarahkan ke halaman menu yang dipilihnya secara instan tanpa harus melalui menu-menu sebelumnya.
Sebagai contoh, misalnya kita punya app dimana di halaman utamanya ada menu Home. Didalam menu Home, ada menu bernama Requests. Dan didalam menu Requests ada beberapa menu seperti Time Off Request, Overtime Request, dan Change Shift Request. Nah, teman-teman bisa bayangkan jika si pengguna ingin menuju ke halaman Time Off Request maka, ada beberapa menu yang harus dilewatinya terlebih dahulu dan ini mungkin agak sedikit memakan waktu bagi si pengguna. Nah, untuk masalah ini bisa kita atasi dengan cara menggunakan Quick Actions.
Contoh Projek
Silakan buat projek baru dengan nama belajar_quick_actions. Sebagai info saja bahwa berikut adalah hasil dari flutter doctor -v di lokal saya.
[✓] Flutter (Channel beta, 2.0.1, on Mac OS X 10.15.7 19H2 darwin-x64, locale en-EC)
• Flutter version 2.0.1 at /Users/yudisetiawan/fvm/versions/beta
• Framework revision c5a4b4029c (3 weeks ago), 2021-03-04 09:47:48 -0800
• Engine revision 40441def69
• Dart version 2.12.0[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
• Android SDK at /Users/yudisetiawan/Library/Android/sdk
• Platform android-30, build-tools 30.0.2
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
• All Android licenses accepted.[✓] Xcode - develop for iOS and macOS
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 12.0.1, Build version 12A7300
• CocoaPods version 1.10.1[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome[✓] Android Studio (version 4.1)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)[✓] IntelliJ IDEA Community Edition (version 2020.2.3)
• IntelliJ at /Applications/IntelliJ IDEA CE.app
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart[✓] VS Code (version 1.54.3)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.20.0[✓] Connected device (3 available)
• iPhone 11 Pro Max (mobile) • 795A4C0D-DF9B-4411-921A-B01178411616 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-0 (simulator)
• macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.7 19H2 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 89.0.4389.90• No issues found!
Setup pubspec.yaml
Buka file pubspec.yaml dan tambahkan dependency berikut
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.1
# Flutter plugin for creating shortcuts on home screen, also known as Quick Actions on iOS and
# App Shortcuts on Android.
quick_actions: ^0.6.0Kemudian, jalankan perintah flutter pub get .
Buat UI
Sekarang kita buka file main.dart dan ubah kode didalamnya menjadi seperti berikut.
import 'package:flutter/material.dart';
import 'package:quick_actions/quick_actions.dart';
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
routes: {
'request_page': (context) {
return RequestPage();
},
'time_off_request_page': (context) {
return DetailRequestPage('Time Off Request', 'Time Off Request Page');
},
'overtime_request_page': (context) {
return DetailRequestPage('Overtime Request', 'Overtime Request Page');
},
},
);
}
}
class HomePage extends StatelessWidget {
final quickActions = QuickActions();
@override
Widget build(BuildContext context) {
_initQuickActions(context);
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Center(
child: ElevatedButton(
child: Text('Request'),
onPressed: () {
Navigator.pushNamed(context, 'request_page');
},
),
),
);
}
void _initQuickActions(BuildContext context) {
// TODO: do something in here
}
}
class RequestPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Requests'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
child: Text('Time Off Request'),
onPressed: () {
Navigator.pushNamed(context, 'time_off_request_page');
},
),
ElevatedButton(
child: Text('Overtime Request'),
onPressed: () {
Navigator.pushNamed(context, 'overtime_request_page');
},
),
],
),
),
);
}
}
class DetailRequestPage extends StatelessWidget {
final String title;
final String body;
DetailRequestPage(this.title, this.body);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Text(body),
),
);
}
}
Buat Icon Menu Quick Actions
Sebelum membuat menunya kita perlu buat terlebih dahulu icon-nya. Di dokumentasinya dituliskan bahwa untuk membuat icon-nya kita harus menggunakan icon native-nya masing-masing. Untuk iOS kita letakkan icon-nya didalam direktori xcassets dan di Android didalam direktori drawable.
Untuk iOS kita bisa menggunakan icon-nya dari situs iconfinder.com sedangkan untuk Android kita bisa akan menggunakan situs romannurik.github.io.
Yang pertama untuk iOS silakan kita unduh kedua icon berikut.
- https://www.iconfinder.com/icons/1608490/download/png/512
- https://www.iconfinder.com/icons/4200783/download/png/512
Lalu, kita edit kedua icon tersebut agar masing-masing memiliki ukuran 64x64, 128x128, dan 256x256. Kemudian, kita buka aplikasi Xcode dan buka direktori Assets.xcassets. Lalu, kita pilih icon tambah yang ada dibawah dan pilih Image Set. Untuk icon pertama kita beri nama IconOvertimeRequest dan icon kedua kita beri nama IconTimeOffRequest. Selanjutnya, kita masukkan icon yang sudah kita edit tadi kedalam kotak 1x, 2x, dan 3x.
Catatan:
1x : Untuk icon ukuran 64x64
2x : Untuk icon ukuran 128x128
3x : Untuk icon ukuran 256x256
Selanjutnya, untuk Android kita buka situs berikut
Lalu, kita pilih kedua icon berikut dan download.
Selanjutnya, kita ekstrak hasil download tadi dan masukkan kedalam direktori drawable yang ada didalam direktori android.
Buat Menu Quick Actions
Sekarang kita akan membuat menu quick actions-nya. Silakan buka kembali file main.dart dan ubah kode didalamnya menjadi seperti berikut.
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:quick_actions/quick_actions.dart';
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
routes: {
'request_page': (context) {
return RequestPage();
},
'time_off_request_page': (context) {
return DetailRequestPage('Time Off Request', 'Time Off Request Page');
},
'overtime_request_page': (context) {
return DetailRequestPage('Overtime Request', 'Overtime Request Page');
},
},
);
}
}
class HomePage extends StatelessWidget {
final quickActions = QuickActions();
@override
Widget build(BuildContext context) {
_initQuickActions(context);
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Center(
child: ElevatedButton(
child: Text('Request'),
onPressed: () {
Navigator.pushNamed(context, 'request_page');
},
),
),
);
}
void _initQuickActions(BuildContext context) {
quickActions.initialize((type) async {
await Future.delayed(Duration(seconds: 1));
if (type == 'time_off_request_page') {
Navigator.pushNamed(context, 'time_off_request_page');
} else if (type == 'overtime_request_page') {
Navigator.pushNamed(context, 'overtime_request_page');
}
});
quickActions.setShortcutItems(
<ShortcutItem>[
ShortcutItem(
type: 'time_off_request_page',
localizedTitle: 'Time Off Request',
icon: Platform.isIOS ? 'IconTimeOffRequest' : 'ic_time_off_request',
),
ShortcutItem(
type: 'overtime_request_page',
localizedTitle: 'Overtime Request',
icon: Platform.isIOS ? 'IconOvertimeRequest' : 'ic_overtime_request',
),
],
);
}
}
class RequestPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Requests'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
child: Text('Time Off Request'),
onPressed: () {
Navigator.pushNamed(context, 'time_off_request_page');
},
),
ElevatedButton(
child: Text('Overtime Request'),
onPressed: () {
Navigator.pushNamed(context, 'overtime_request_page');
},
),
],
),
),
);
}
}
class DetailRequestPage extends StatelessWidget {
final String title;
final String body;
DetailRequestPage(this.title, this.body);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Text(body),
),
);
}
}Test
Sekarang kita test apakah fitur quick actions-nya sudah berjalan atau belum.
Kesimpulan
Jadi, kesimpulannya adalah fitur quick actions pada Flutter sudah support layaknya seperti di native. Dan untuk proses pembuatannya pun termasuk mudah. Untuk source code lengkapnya bisa dilihat di repo Github berikut ya.
