Part 1 : Membangun Aplikasi Tiruan Grab dengan Flutter — Splash Screen
Update
Artikel ini dibuat dengan menggunakan Flutter 1.22.0 dan berkemungkinan memiliki error saat di jalankan dengan Flutter 2
Setelah belajar Flutter selama beberapa bulan di akhir tahun 2019 dan melihat beberapa tulisan tentang belajar membuat aplikasi dengan Flutter di Medium, Saya menjadi tertarik untuk menguji apa yang telah saya pelajari tersebut. Beberapa user Medium juga ada yang telah membuat tulisan diantaranya tentang aplikasi tiruan gojek, whatsapp atau yang lainnya.
Setelah mencari aplikasi apa yang akan dibuat, akhirnya saya memutuskan untuk membuat tiruan interface aplikasi Grab. Tulisan ini dibuat sebagai referensi belajar bagi saya dan mungkin bagi teman-teman yang sedang belajar Flutter.
Tampilan akhir yang akan kita buat akan cukup banyak. Saya mengambil screenshot dari aplikasi asli sebagai acuan bagi teman-teman tentang bagaimana akhir desain tiruan yang akan kita buat. Aplikasi ini merupakan latihan belajar UI sehingga nantinya tidak akan ada logic pemanggilan ke API manapun dan tidak akan menggunakan database apapun untuk menyimpan data .
Untuk aset-aset dalam aplikasi, saya menggunakan beberapa assets dari tutorial lain dengan teman sama namun dengan framework berbeda. Jadi mungkin icon-nya tidak terlalu mirip. Untuk logo grab, saya mengambil dari google. Silahkan dicari yang sesuai, tapi saya menggunakan asset dari sini.
Untuk editornya saya menggunakan Visual Studio Code. Teman-teman juga bisa menggunakan Android Studio, cukup install Plugin untuk Flutter. Silahkan buat project baru untuk Flutter baik menggunakan Command Palllete Visual Studio Code, Android Studio, ataupun menggunakan command line. Saya memberikan nama grab_clone.
Pada tulisan ini saya jugaakan mencoba secara tidak langsung untuk menjelaskan konvensi pada Flutter. Seperti penamaan project, penamaan package, penamaan nama kelas dll. Karena terdapat sedikit perbedaan dalam konvensi Flutter dengan konvensi pada umumnya. Untuk konvensi Flutter sendiri dapat dilihat disini dan official web.
Langsung saja kita akan bahas step by step belajar membuat tiruan aplikasi Grab dengan Flutter.
Main.dart
Default main.dart dari Flutter akan sedikit diubah terlebih dahulu. Perubahan yang akan dibuat adalah menghilangkan home dan mengganti dengan route. Ini hanya style dalam pemrograman. Saya lebih menyukai memanggil routeName daripada navigate dengan builder Material Page Route. kemudian menambahkan Theme primaryColor warna hijau yang digunakan Grab.
Ubah main.dart menjadi seperti berikut :
Seperti yang teman-teman lihat dalam kode diatas, untuk route saya tidak menggunakan string ‘/name’ karena menggunakan ini sangat rawan untuk salah ketik. Ini saya pelajari pada salah satu kursus berbayar Udemy. Jadi saya akan menggunakan static variabel untuk mengambil string route name. Metode static dalam sebuah class membuat variabel tersebut dapat langsung dipanggil setelah nama class. Penerapannya akan kita lihat pada Splash Screen dan hampir pada semua class nantinya. Dengan metode static ini tidak diperlukan root ‘/’ dan tidak perlu mengawali semua route dengan slash (‘/’).
Namun akan terdapat error karena pemanggilan nama kelas yang belum diimport. Biarkan saja dahulu, kita akan selesaikan setelah membuat file splash_screen.dart
NB.
Import file/package screen saya lampirkan sesuai dengan project saya, jika teman-teman menggunakan nama yang berbeda, silahkan disesuaikan.
ASSETS
Buat folder baru dengan nama screens dalam folder lib, kemudian tambahkan asset-asset, lalu edit pubspec.yaml
Pada pubspec.yaml diatas terdapat beberapa perbedaan dari default flutter, yaitu :
- environment dan analyzer yang diubah untuk mengaktifkan if else dalam widget tree, namun tidak jadi saya terapkan. teman-teman tidak perlu mengubah bagian tersebut.
- country_code dependency untuk keperluan login page. Sebenarnya bisa membangun widget untuk memilih country code, tapi mungkin akan saya tulis pada post yang lain.
- assets gambar dan font. Asset bisa di download disini.
Tempatkan assets pada root project. Strukturnya seperti berikut :
SPLASH SCREEN
Buat file baru dengan nama splash_screen.dart di dalam folder screens. Splash Screen hanya berisi center image dari logo grab. Kodenya sebagai berikut:
Pada kode splash_screen.dart setelah deklarasi nama kelas, terdapat variabel id. Variabel ini nantinya akan digunakan sebagai routeName dan harus diinisiasi di main.dart. Pada kode sebelumnya untuk main.dart sudah saya sertakan kode untuk inisiasi. Teman-teman hanya perlu mengimport path yang benar dari file splash_screen.dart.
Setelah itu, tambahkan logic untuk membuat screen berpindah ke halaman selanjutnya secara otomatis, tepatnya ke halaman login. Hal ini membutuhkan timer dan navigator.
Karena ini splash screen, jadi setelah berpindah ke screen lain, jika tombol back ditekan, maka aplikasi tidak boleh kembali ke screen splash screen. Untuk dapat mencapai hal tersebut, maka untuk Navigator akan digunakan pushReplacement. Lalu karena disini saya menggunakan routeName, maka yang digunakan adalah pushReplacementNamed.
Fungsi removeScreen() akan mengeksekusi sebuah timer selama 2 detik, kemudian berpindah ke halaman selanjutnya. fungsi ini ditempatkan di initState() agar dieksekusi pada saat pertama kali layar dibuka. Karena fungsi tersebut menjalankan sebua timer, dimana timer kemungkinan akan tetap berjalan meskipun aplikasi telah dihentikan, maka proses timer tersebut harus dihentikan. Disinilah fungsi dari dispose() pada flutter. Timer dihentikan pada saat berpindah ke layar lain dengan menggunakan Timer.cancel().
Jika teman-teman sudah membuat logic tersebut, akan terdapat error karena belum ada route untuk ataupun class untuk screen login. Maka buatlah file baru di dalam folder lib dengan nama login_screen.dart. Kemudian tuliskan kode berikut :
Perlu diingat karena disini saya menggunakan routeName, maka setiap screen harus didaftarkan ke routes main.dart. Jika tidak, maka navigator tidak akan berjalan, kecuali dengan navigator biasa yang tidak menggunakan routeName. Teman-teman bisa membaca dokumentasi resmi Flutter tentang navigasi antar screen berikut.
Daftarkan screen login dengan kode berikut pada main.dart, jangan lupa import lokasi filenya juga.
import 'package:grab_clone/screens/login_screen.dart';
...class MyApp extends StatelessWidget {
...
routes: {
SplashScreen.id: (context) => SplashScreen(),
LoginScreen.id: (context) => LoginScreen(),
}
...
}
Sehingga kode akhir dari main.dart, splash_screen.dart dan login_screen.dart adalah sebagai berikut :
Jangan lupa untuk merapikan kode yang telah dituliss. Flutter memiliki shortcut untuk merapikan dokumen, yaitu
- Shortcut alt +shift + F pada mac, atau
- Klik kanan >> Format Document, pada sisi kanan akan terdapat shortcut keyboard untuk merapikan kode yang ditulis.
Selanjutnya kita akan membuat halaman login dengan menyempurnakan kode pada file login_screen.dart yang telah kita buat sebelumnya.
Lihat kode lengkap sampai halaman verifikasi pada link dibawah :
Tulisan lain dalam seri ini :
