Anda di halaman 1dari 17

(Bagian 1/3) : Membangun Landing

Page Aplikasi GO-JEK dengan


Flutter SDK
Rizki Maulana Follow
Oct 18, 2018 · 7 min read

Landing Page Aplikasi GO-JEK dengan Flutter

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.
Hasil Akhir Membangun Landing Page Aplikasi GO-JEK dengan Flutter SDK

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

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 :
1 import 'package:flutter/material.dart';
2
3 class LauncherPage extends StatefulWidget {
4 @override
5 _LauncherPageState createState() => new _LauncherPageState
6 }
7
8 class _LauncherPageState extends State<LauncherPage> {
9
10 @override

Kembali ke halaman main, hapus class MyHomePage pada file


main.dart, kemudian pada atribut home ganti dengan new
LauncherPage() seperti kode dibawah ini.

1 import 'package:flutter/material.dart';
2 import 'package:gojek/launcher/launcher_view.dart';
3
4 void main() => runApp(new MyApp());
5
6 class MyApp extends StatelessWidget {
7 @override
8 Widget build(BuildContext context) {
9 return new MaterialApp(
10 debugShowCheckedModeBanner: false,
11 title: 'Gojek',
12 theme: new ThemeData(

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

1 # The following section is specific to Flutter.


2 flutter:
3
4 # The following line ensures that the Material Icons font is
5 # included with your application, so that you can use the icons in
6 # the material Icons class.
7 uses-material-design: true
8

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 :
1 import 'package:flutter/material.dart';
2
3 class LauncherPage extends StatefulWidget {
4 @override
5 _LauncherPageState createState() => new _LauncherPageState
6 }
7
8 class _LauncherPageState extends State<LauncherPage> {
9 @override
10 Widget build(BuildContext context) {
11 return new Scaffold(
12 body: new Center(
13 child: new Image.asset(
14 "assets/img_gojek_logo.png",

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 :
1 import 'package:flutter/material.dart';
2 import 'dart:async';
3 import 'package:gojek/landingpage/landingpage_view.dart';
4
5 class LauncherPage extends StatefulWidget {
6 @override
7 _LauncherPageState createState() => new _LauncherPageState
8 }
9
10 class _LauncherPageState extends State<LauncherPage> {
11 @override
12
13 void initState() {
14 super.initState();
15 startLaunching();
16 }
17
18 startLaunching() async {
19 var duration = const Duration(seconds: 1);
20 return new Timer(duration, () {
21 Navigator.of(context).pushReplacement(new MaterialPageRoute
22 return new LandingPage();
23 }));
24 });
25 }

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.

1 import 'package:flutter/material.dart';
2
3 class GojekPalette {
4 static Color green = Color.fromARGB(255, 69, 170, 74
5 static Color grey = Color.fromARGB(255, 242, 242,
6 static Color grey200 = Color.fromARGB(200, 242, 242,
7 static Color menuRide = Color(0xffe99e1e);
8 static Color menuCar = Color(0xff14639e);
9 static Color menuBluebird = Color(0xff2da5d9);
10 static Color menuFood = Color(0xffec1d27);
11 static Color menuSend = Color(0xff8dc53e);
12 static Color menuDeals = Color(0xfff43f24);

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 :

1 # The following section is specific to Flutter.


2 flutter:
3
4 # The following line ensures that the Material Icons font is
5 # included with your application, so that you can use the icons in
6 # the material Icons class.
7 uses-material-design: true
8
9 # To add assets to your application, add an assets section, like this:
10 assets:
11 - assets/img_gojek_logo.png
12
13 fonts:
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).

1 import 'package:flutter/material.dart';
2 import 'package:gojek/launcher/launcher_view.dart';
3 import 'package:gojek/constans.dart';
4 import 'package:flutter/services.dart';
5
6 void main() => runApp(new MyApp());
7
8 class MyApp extends StatelessWidget {
9 @override
10 Widget build(BuildContext context) {
11
12 return new MaterialApp(
13 debugShowCheckedModeBanner: false,
14 title: 'Gojek',
15 theme: new ThemeData(
16 fontFamily 'NeoSans'

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 :


1 import 'package:flutter/material.dart';
2 import 'package:gojek/constans.dart';
3 import 'package:gojek/beranda/beranda_view.dart';
4
5 class LandingPage extends StatefulWidget {
6 @override
7 _LandingPageState createState() => new _LandingPageState();
8 }
9
10 class _LandingPageState extends State<LandingPage> {
11 int _bottomNavCurrentIndex = 0;
12 List<Widget> _container = [
13 new BerandaPage(),
14 ];
15
16 @override
17 Widget build(BuildContext context) {
18 return new Scaffold(
19 body: _container[_bottomNavCurrentIndex],
20 bottomNavigationBar: _buildBottomNavigation()
21 );
22 }
23
24 Widget _buildBottomNavigation(){
25 return new BottomNavigationBar(
26 type: BottomNavigationBarType.fixed,
27 onTap: (index) {
28 setState(() {
29 _bottomNavCurrentIndex = index;
30 });
31 },
32 currentIndex: _bottomNavCurrentIndex,
33 items: [
34 BottomNavigationBarItem(
35 activeIcon: new Icon(
36 Icons.home,
37 color: GojekPalette.green,
38 ),
39 icon: new Icon(
40 Icons.home,
41 color: Colors.grey,
42 ),
43 title: new Text(
44 'Beranda',
45 ),
46 ),
47 BottomNavigationBarItem(
48 activeIcon: new Icon(
49 Icons.assignment,
50 color: GojekPalette.green,
51 ),
52 icon: new Icon(
53 Icons.assignment,
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 :

Halaman Landing Page dengan Bottom Navigation

. . .
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

Default App Bar dan Gojek Custom Appbar

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 :
1 import 'package:flutter/material.dart';
2
3 class GojekAppBar extends AppBar {
4 GojekAppBar()
5 : super(
6 elevation: 0.25,
7 backgroundColor: Colors.white,
8 flexibleSpace: _buildGojekAppBar());
9
10 static Widget _buildGojekAppBar() {
11 return new Container(
12 padding: EdgeInsets.only(left: 16.0, right: 16.0),
13 child: new Row(
14 mainAxisAlignment: MainAxisAlignment.spaceBetween,
15 children: <Widget>[
16 new Image.asset(
17 "assets/img_gojek_logo.png",
18 height: 50.0,
19 width: 100.0,
20 ),
21 new Container(
22 child: new Row(
23 children: <Widget>[
24 new Container(
25 height: 28.0,
26 width: 28.0,
27 padding: EdgeInsets.all(6.0),
28 decoration: new BoxDecoration(
29 borderRadius:
30 new BorderRadius.all(new Radius.circular
31 color: Colors.orangeAccent),
32 alignment: Alignment.centerRight,
33 child: new Icon(
34 Icons.local_bar,
35 color: Colors.white,
36 size: 16.0,
37 ),

Setelah membuat custom appbar maka panggil class tersebut sebagai


app bar pada halaman beranda. Seperti berikut :
1 import 'package:flutter/material.dart';
2 import 'package:gojek/beranda/beranda_gojek_appbar.dart';
3
4
5 class BerandaPage extends StatefulWidget {
6 @override
7 _BerandaPageState createState() => new _BerandaPageState();
8 }
9
10 class _BerandaPageState extends State<BerandaPage> {
11
12 @override
13 Widget build(BuildContext context) {

Namun ketika code tersebut di run letak app bar tidak proprosional
pada device tertentu (seperti iphone X) seperti yang kita lihat dibawah
ini.

App Bar tidak proporsional pada Simulator iPhone X

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 :
1 import 'package:flutter/material.dart';
2 import 'package:gojek/beranda/beranda_gojek_appbar.dart';
3
4
5 class BerandaPage extends StatefulWidget {
6 @override
7 _BerandaPageState createState() => new _BerandaPageState();
8 }
9
10 class _BerandaPageState extends State<BerandaPage> {
11
12 @override
13 Widget build(BuildContext context) {
14 return new SafeArea(

Sehingga ketika di run app bar akan berada pada posisi yang
seharusnya.

App Bar dengan SafeArea

. . .

Tulisan lain :

Biometric Authentication
dengan Flutter
Pada post kali ini kita akan
membahas mengenai penggunaan
Biomteric Authentication dengan
menggunakan Flutter.
medium.com