(Bagian 1/3) : Membangun Landing Page Aplikasi GO-JEK dengan Flutter SDK
Sekitar satu bulan yang lalu saya mencoba belajar bahasa pemrograman baru, yaitu Dart dengan Flutter SDK untuk membangun aplikasi cross platform Android dan iOS. Sebelumnya saya pernah mencoba React Native untuk membangun aplikasi cross platform tetapi karena saya tidak pernah belajar javascript (JS) sehingga ketika proses belajar merasa kesulitan, harus belajar JS dan SDK React Native-nya sekaligus. Memang sepertinya React Native lebih cocok untuk Developer Web yang ingin pindah ke Mobile Development ketimbang Developer Mobile App Native itu sendiri (Java / Swift / Objective C) menurut saya.
Pada tulisan kali ini saya hanya akan membahas komponen UI dari Flutter SDK itu sendiri, karena menurut saya untuk bahasa pemrograman Dart-nya sangat mirip dengan Java sehingga Developer Native yang ingin mencoba Flutter tidak akan menemukan banyak kendala, sehingga pada pembahasan kali ini kita hanya akan membahas bagaimana menyusun komponen view seperti grid, list, colum, row dan sebagainya. Sebenarnya tulisan ini sudah cukup outdated karena Flutter sendiri sudah cukup lama rilis dan hampir menyentuh versi 1.0, tapi bagi saya akan lebih cepat untuk belajar hal baru ketika saya juga membagikannya.
Untuk melakukan instalasi Flutter bisa mengikuti tutorial berikut https://flutter.io/get-started/install/
Untuk editor saya menggunakan Visual Studio Code, atau juga bisa menggunakan Android Studio, cukup install Plugin untuk Flutter. Kenapa saya memilih menggunakan Visual Studio Code (VS Code)? karena lebih ringan daripada ketika menggunakan Android Studio (AS), walaupun fiturnya memang masih lebih lengkap AS, seperti misal ketika kita melakukan import file, pada VS Code kita harus mengetikkan secara manual path filenya, sedangkan pada AS kita bisa melakukan import secara otomatis seperti ketika import package pada Java, tapi bagi saya VS Code juga sudah cukup.
Untuk memudahkan belajar membangun UI pada Flutter, saya menggunakan aplikasi GO-JEK sebagai contoh, sehingga dari contoh aplikasi tersebut saya bisa belajar bagaimana membangun List, Grid, dan tata letak komponen view pada Flutter, tulisan ini akan saya bagi per komponen view pada aplikasi GO-JEK.
Saya asumsikan bahwa kita sudah membuat project baru pada Flutter. Cara membuatnya dapat mengikuti panduan dari https://flutter.io/get-started/install/ sehingga ketika kita run aplikasinya akan seperti gambar dibawah ini.
Baiklah, langsung saja kita akan bahas step by step membuat Landing Page aplikasi GO-JEK dengan Flutter.
Splash Screen
1. Membuat Halaman Baru
Pertama-tama buat folder baru pada directory lib untuk memisahkan halaman screen dengan halaman main. buat directory dengan nama launcher. kemudian pada folder tersebut buat sebuah file dengan nama launcher_view.dart untuk membuat halaman splash tersebut. Kemudian buat sebuah class baru bernama LauncherPage pada file launcher_view.dart seperti kode berikut :
Kembali ke halaman main, hapus class MyHomePage pada file main.dart, kemudian pada atribut home ganti dengan new LauncherPage() seperti kode dibawah ini.
Maka setelah kita run yang pertama kali muncul adalah halaman LauncherPage.
2. Menambahkan Asset
Section selanjutnya adalah menambahkan asset pada project yang kita buat, baik berupa font, gambar, sound dan lain sebagainya. Pada project yang kita buat pertama-tama kita akan menambahkan asset berupa logo gojek seperti yang terlihat pada splash screen.
Pertama-tama buat folder assets yang sejajar dengan folder lib. kemudian tambahkan file gambar yang akan kita masukan ke dalam folder assets tersebut. beri nama img_gojek_logo.png (Logo GOJEK : https://goo.gl/uqPsYC). Setelah itu tambahkan directory assets tersebut agar project kita mengenali file asset yang sudah kita masukan tadi.
Caranya dengan membuka menambahkan baris aset berikut pada file pubspec.yaml
Dengan mandaftarkan path asset pada file pubspec.yaml kita sudah bisa menggunakan asset tersebut pada project yang kita buat. Setelah asset sudah ditambahkan maka modifikasi class _LauncherPageState pada file launcher_page.dart menjadi seperti dibawah ini :
3. Membuat Timer dan Berpindah Halaman
Section selanjutnya adalah membuat timer. Ketika halaman splash terbuka maka akan diam beberapa saat sebelum berpindah ke landing page. Sebelum membuat code untuk timer sebaiknya kita siapkan dulu file untuk halaman LandingPage, buat folder baru pada directory lib dengan nama landing, kemudian buat file pada directory tersebut dengan nama landingpage_view.dart. setelah itu buat dua buah class bernama LandingPage dan _LandingPageState seperti pertama kali kita membuat class LauncherPage dan _LauncherPageState.
Kemudian pada class _LauncherPageState modifikasi seperti dibawah ini :
Pertama-tama override initState (kurang lebih seperti onCreate() pada Android dengan Java), kemudian buat class asynchronous bernama startTimer yang dipanggil pada initState, kemudian pada timer terdapat Function yang akan dijalankan ketika timer selesai, maka kita akan menambahkan fungsi untuk berpindah ke halaman LandingPage yaitu dengan
Navigator.of(context).pushReplacement(new MaterialPageRoute(builder: (_) {
return new LandingPage();
}));Ada beberapa cara untuk berpindah halaman, seperti dengan push, pushReplacement, pushReplaceNamed dan sebagainya, tapi saya cenderung lebih sering menggunakan push dan pushReplacement. Apa perbedaan anatara push dan pushReplacement? jika pushReplacement maka activity sebelumnya tidak akan ditampilkan lagi ketika kita menekan tombol back, alias di finish() ketika kita berpindah halaman dengan Intent pada java, sedangkan push masih akan menyimpan halaman sebelumnya sebagai stack, sehingga ketika kita berpindah halaman dengan push maka pada appbar yang kita buat akan otomatis muncul tombol back, sedangkan juka pushReplacemant tidak.
Bottom Navigation
Sebelum membuat Bottom Navigation kita akan membuat class pembantu dan cutomisasi terlebih dahulu.
1. Membuat Color Palette
Pertama-tama kita akan membuat static class untuk menyimpan variabel warna yang akan kita pakai. Buat file constant.dart pada directory lib.
Untuk membuat warna sendiri dapat menggunakan hexa atau argb.
2. Membuat Custom Font
Pertama-tama buat folder fonts pada halaman directory assets kemudian copy font yang akan kita pakai. Flutter support .ttf dan .otf font, sehingga kita bisa memakai keduanya. Setelah itu daftarkan font tersebut pada file pubspec.yaml seperti berikut :
Untuk menjadikan font tersebut sebagai font default dari aplikasi kita maka kita akan menambahkan atribut fontFamily pada ThemeData di file main.dart sesuai dengan nama font family yang kita buat di pubspec.yaml. (Neo Sans Font : https://www.fontsmarket.com/font-download/neo-sans-std).
3. Membuat Bottom Navigation
Sebelumnya buat halaman sebagai fragment dari halaman Landing Page, seperti Beranda, Pesanan, Inbox dan Akun. Pertama-tama buat dahulu halaman Beranda dengan membuat folder beranda pada directory lib, kemuudian ikuti langkah yang sama seperti membuat halaman launcher dan landing page. buat class dengan nama BerandaPage dan _BerandaPageState.
Pada class _LandingPageState modifikasi code seperti berikut :
int _bottomNavCurrentIndex = 0; menyatakan posisi terakhir dari bottom navigation yang kita buat
List<Widget> _container = [ new BerandaPage(), ]; berisi page sesuai dengan index dari _bottomNavCurrentIndex, jika kita mempunyai empat bottom navigation item maka seharusnya array tersebut berisi empat buah class yang mewakili setiap halaman pada bottom navigation item. SDK flutter sudah menyediakan generic material icon yang siap digunakan, sehingga untuk icon pada bottom navigation tidak perlu menambahkan secara manual.
Sehingga ketika code kita jalankan tampilan aplikasi akan menjadi sebagai berikut :
Beranda
Pada halaman beranda akan kita bagi menjadi beberapa section, yaitu membuat header, gopay menu, gojek menu, gofood menu, promo. Dari section tersebut kita akan mempelajari untuk membuat App Bar, Row, Column, GridView, Vertical Listview, Horizontal Listview, modal bottom sheet, dan FutureBuilder. Pada artikel bagian 1 ini kita akan membuat custom appbar, sedangkan sisanya akan dilanjutkan pada bagian 2 dan 3.
1. Membuat Custom App Bar
Flutter sudah menyediakan default app bar seperti yang terlihat pada bagian kiri, sedangkan untuk melakukan customisasi app bar maka kita harus membuat app bar sendiri sebagai child dari app bar bawaan flutter. Buat sebuah file bernama beranda_gojek_appbar.dart pada directory beranda kemudian buat sebuah class bernama GojekAppBar extends AppBar, kemudian modfikasi class tersebut seperti berikut :
Setelah membuat custom appbar maka panggil class tersebut sebagai app bar pada halaman beranda. Seperti berikut :
Namun ketika code tersebut di run letak app bar tidak proprosional pada device tertentu (seperti iphone X) seperti yang kita lihat dibawah ini.
Untuk menanggulangi hal tersebut kita akan menambahkan safe area sebagai container utamanya, hal ini dimaksudkan untuk mencegah container tampilan yang kita buat terlalu menjorok ke sisi tertentu pada beberapa smartphone, seperti pada iPhone X, safe area dimaksudkan untuk memberikan space pada poni, tombol gesture home, atau pada saat aplikasi lanscape sehingga tidak terpotong. Untuk menambahkan safe area modifikasi code sebagai berikut :
Sehingga ketika di run app bar akan berada pada posisi yang seharusnya.
Tulisan lain :
