1.

Introduction
Flutter merupakan sebuah SDK atau Software Development Kit yang dibuat
oleh google untuk mengembangkan aplikasi dengan desain yang menarik
untuk mobile, web, dan desktop.
Pada artikel ini, kita akan menambahkan fungsi di
aplikasi flutter yang sebelumnya sudah kita buat. Kita juga akan membuat halaman
kedua (disebut route) yang dapat dinavigasikan oleh pengguna. Terakhir, kita akan
dapat memodifikasi tema aplikasi (warnanya).

Apa yang akan kita pelajari?

1. Development aplikasi flutter yang terlihat natural di iOS, Android, dan
web
2. Menggunakan Hot Reload untuk siklus pengembangan yang lebih
cepat
3. Menambahkan interaktivitas ke widget stateful
4. Membuat navigasi ke second screen
5. Mengubah tampilan aplikasi menggunakan tema

Apa yang akan kita buat?

Kita akan mulai dengan aplikasi sederhana yang menghasilkan daftar nama, kemudian
ditampilkan tanpa batas untuk perusahaan startup. Di akhir artikel ini, pengguna dapat
memilih dan membatalkan pilihan nama, lalu menyimpan yang terbaik. Mengetuk ikon
daftar di kanan atas atas aplikasi yang menavigasikan pengguna ke halaman baru
(disebut route) dan hanya mencantumkan nama-nama favorit yang sudah dipilih.

GIF animasi berikut menunjukkan bagaimana aplikasi yang sudah selesai akan bekerja.
2. Menyiapkan Lingkungan
Pengembangan Flutter
Jika teman-teman ada yang belum menyelesaikan bagian 1, lihat pada bagian ini
Menyiapkan Lingkungan Pengembangan Flutter, agar teman-teman dapat ikut
mengembangkan aplikasi pada artikel ini.

3. Mulai Membuat Aplikasi

Untuk teman-teman yang belum mengikuti bagian 1, silahkan ikuti langkah-langkah
berikut:

Untuk memulai pemrograman flutter, teman-teman dapat

menggunakan cara ini create the app.
Tips: Jika IDE yang kita miliki tidak dapat membuat project flutter baru,
pastikan kita sudah menginstall plugins flutter dan Dart.
Namun karena saya tidak menggunakan Android Studio, maka saya
menggunakan cara ini pada IDE Visual Studio Code yang saya
miliki
https://www.youtube.com/watch?v=gCiH3CzeZHI&t=790s (saran

saya silahkan ikuti dari langkah 1).

Delete semua isi program pada lib/main.dart dan copy
paste program berikut:

1. import 'package:flutter/material.dart';

2. import 'package:english_words/english_words.dart';

3.

4. void main() {

5. runApp(MyApp());

6. }
7.

8. class MyApp extends StatelessWidget {

9. @override

10. Widget build(BuildContext context) {

11. return MaterialApp(

12. title: 'Startup Name Generator',

13. home: RandomWords(),

14. );

15. }

16. }

17.

18. class RandomWords extends StatefulWidget {

19. @override

20. _RandomWordsState createState() => _RandomWordsState();

21. }

22.

23. class _RandomWordsState extends State<RandomWords> {

24. final List _suggestions = [];

25. final TextStyle _biggerFont = const TextStyle(fontSize: 18);

26. @override
27. Widget build(BuildContext context) {

28. return Scaffold(

29. appBar: AppBar(

30. title: Text('Startup Name Generator'),

31. ),

32. body: _buildSuggestions(),

33. );

34. }

35.

36. Widget _buildSuggestions() {

37. return ListView.builder(

38. padding: const EdgeInsets.all(16),

39. itemBuilder: (BuildContext _context, int i) {

40. if (i.isOdd) {

41. return Divider();

42. }

43.

44. final int index = i ~/ 2;

45. if (index >= _suggestions.length) {

46. _suggestions.addAll(generateWordPairs().take(10));
47. }

48. return _buildRow(_suggestions[index]);

49. });

50. }

51.

52. Widget _buildRow(WordPair pair) {

53. return ListTile(

54. title: Text(

55. pair.asPascalCase,

56. style: _biggerFont,

57. ),

58. );

59. }

60. }

Tips: Saat melakukan copy paste program di atas, indentasi dapat

menjadi miring dan berantakan. Kita dapat merapikannya dengan cara
berikut:
1. Android Studio/IntelliJ IDEA: klik kanan pada kode Dart nya and
pilih Reformat Code with dartfmt.
2. VS code: Klik kanan and pilih Format Document.
3. Terminal: Jalankan flutter format <filename> .
61. Buka file pubspec.yaml tambahkan english_words:
^3.1.5 ( english_words 3.1.5 atau versi lebih tinggi) ke list
dependencies yang ada:
1. dependencies:

2. flutter:

3. sdk: flutter

4.

5. # The following adds the Cupertino Icons font to your

application.

6. # Use with the CupertinoIcons class for iOS style icons.

7. cupertino_icons: ^1.0.0

english_words: ^3.1.5

Buka Administration : Command Prompt dan jalankan script

flutter packages get

Performing Pub get juga otomatis menghasilkan file pubspec.lock dengan daftar
semua paket yang ditarik ke dalam project bersama nomor versinya.

Save project yang sudah dibuat.

Jalankan projectnya dengan menekan F5
4. Menambahkan Icons ke List
Pada langkah ini, kita akan menambahkan icon hati ke setiap baris. Kemudian di
langkah berikutnya, kita akan membuat icon tersebut dapat diketuk dan menyimpannya
ke list favorit.

Tambahkan variabel _saved Set ke _RandomWordsState . Set ini

berfungsi untuk menyimpan pasangan kata yang disukai pengguna.
Penggunaa Set pada List lebih disarankan karena Set tidak
mengizinkan entri yang sama/duplikat.
1. class _RandomWordsState extends State {

2. final _suggestions = [];

3. final _saved = Set(); // NEW

4. final _biggerFont = TextStyle(fontSize: 18.0);

5. ...

Pada fungsi _buildRow , tambahkan variabel alreadySaved untuk

memastikan bahwa pasangan kata belum ditambahkan ke favorit.
6. Widget _buildRow(WordPair pair) {

7. final alreadySaved = _saved.contains(pair); // NEW

8. ...

Kemudian tambahkan icons setelah text pasangan kata. Seperti yang

ditunjukan di bawah ini:
9. Widget _buildRow(WordPair pair) {

10. final alreadySaved = _saved.contains(pair);

 11. return ListTile(

12. title: Text(

13. pair.asPascalCase,

14. style: _biggerFont,

15. ),

16. trailing: Icon( // NEW from here...

17. alreadySaved ? Icons.favorite : Icons.favorite_border,

18. color: alreadySaved ? Colors.red : null,

19. ), // ... to here.

20. );

Lakukan Hot Reload, seharusnya akan terlihat icon hati pada tiap
baris setelah pasangan kata namun belum dapat ditekan/blum interaktif.
Android iOS

5. Menambahkan Interactivity
Pada langkah ini, kita akan membuat icons hati dapat di-tap. Ketika pengguna
melakukan tap entri dalam daftar maka akan mengubah status favoritnya, pasangan
kata tersebut akan ditambahkan atau dihapus dari serangkaian daftar favorit yang telah
disimpan.
Untuk melakukan itu kita akan memodifikasi fungsi _buildRow . Jika entri kata telah
ditambahkan ke favorit, ketika melakukan tap lagi akan menghapusnya dari favorit. Saat
entri kata diketuk saat itulah fungsi _buildRow memanggil setState() untuk memberi
tahu framework bahwa status telah berubah.

tambahkan onTap pada method _buildRow seperti yang terlihat di

bawah ini:
1. Widget _buildRow(WordPair pair) {

2. final alreadySaved = _saved.contains(pair);

3. return ListTile(

4. title: Text(

5. pair.asPascalCase,

6. style: _biggerFont,

7. ),

8. trailing: Icon(

9. alreadySaved ? Icons.favorite : Icons.favorite_border,

10. color: alreadySaved ? Colors.red : null,

11. ),

12. onTap: () { // NEW lines from here...

13. setState(() {

14. if (alreadySaved) {

15. _saved.remove(pair);

16. } else {
 17. _saved.add(pair);

18. }

19. });

20. }, // ... to here.

21. );

22. }

Tips: Pada flutter's reactive

style framework, pemanggilan setState() memicu
panggilan method _build() untuk objek State yang kemudian
menghasilkan pembaharuan ke UI.

Lakukan Hot Reload dan seharusnya teman-teman sudah dapat

melakukan tap pada daftar yang tampil untuk memfavoritkan atau
membatalkan entri.

6. Navigasi ke Halaman Baru

Pada langkah ini, kita akan menambahkan halaman baru (disebut route) yang
menampilkan daftar favorit. Sehingga teman-teman akan belajar bagaimana melakukan
navigasi antara home route dan new route.

Navigator pada flutter berfungsi mengelola tumpukan(stack) yang

berisi route aplikasi. Melakukan pushing sebuah route ke tumpukan Navigator 's akan
memperbaharui tampilan pada route tersebut. Sedangkan ketika
melakukan popping sebuah route dari tumpukan Navigator 's akan mengembalikan
tampilan ke route sebelumnya.
Selanjutnya, kita kita akan menambahkan icon pada AppBar di
dalam method build pada class _RandomWordsState .
Ketika user melakukan clicks pada icon daftar, route baru yang berisi favorit
di push ke Navigator sehingga icon baru akan ditampilkan.
1. Tambahkan icon dan eksekusi pada method build :
2. class _RandomWordsState extends State {

3. ...

4. @override

5. Widget build(BuildContext context) {

6. return Scaffold(

7. appBar: AppBar(

8. title: Text('Startup Name Generator'),

9. actions: [

10. IconButton(icon: Icon(Icons.list), onPressed:

_pushSaved),

11. ],

12. ),

13. body: _buildSuggestions(),

14. );

15. }

16. ...

17. }

Tips: Beberapa properti widget mengambil satu widget( child )

dan properti lainnya seperti action yang
mengambil array widget(children) seperti yang ditunjukan pada
baris kode di dalam tanda kurung siku ( [] ).
 Tambahkan fungsi _pushSaved() di
dalam class _RandomWordsState .
18. void _pushSaved() {

Lakukan Hot Reload, maka icon daftar akan muncul

pada app bar. Lakukan tap pada icon daftar tersebut maka tidak
akan terjadi apapun karena fungsi _pushSaved() masih kosong.
Selanjutnya kita akan membuat route dan mem- push nya ke
tumpukan Navigator . Action tersebut akan mengubah layar
untuk menampilkan route baru. Konten untuk halaman baru
dibangun pada properti builder di dalam MaterialPageRoute 's
dalam fungsi anonim. Panggil Navigator.push , yang
mendorong route ke tumpukan Navigator (IDE akan
memunculkan pesan error dan nanti kita akan memperbaikinya).
19. void _pushSaved() {

20. Navigator.of(context).push(

21. );

Selanjutnya kita akan menambahkan MaterialPageRoute dan

properti builder . Sekarang tambahkan kode yang menghasilkan
baris ListTile . Method divideTiles() pada ListTile berfungsi
untuk menambahkan jarak horizontal antara setiap ListTile . Sedangkan
variabel divided menampung baris terakhir yang diubah menjadi daftar
dengan fungsi toList() . Tambahkan kode, seperti yang ditunjukkan
pada cuplikan kode berikut:
void _pushSaved() {

Navigator.of(context).push(

MaterialPageRoute<void>(
// NEW lines from here...

builder: (BuildContext context) {

final tiles = _saved.map(

(WordPair pair) {

return ListTile(

title: Text(

pair.asPascalCase,

style: _biggerFont,

),

);

},

);

final divided = ListTile.divideTiles(

context: context,

tiles: tiles,

).toList();

return Scaffold(

appBar: AppBar(

title: Text('Saved Suggestions'),

 ),

body: ListView(children: divided),

);

}, // ...to here.

),

);

Dapat dilihat properti builder mengembalikan Scaffold yang berisi app

bar untuk route baru yang
bernama SavedSuggestions . Body dari route baru terdiri
dari ListView yang berisi baris ListTile dan setiap barisnya dipisahkan
oleh pembatas.

Lakukan Hot Reload aplikasi, favoritkan beberapa nama

yang disarankan kemudian tap icon daftar maka route baru
yang berisikan nama favorit akan muncul. Perhatikan juga
bahwa Navigator menambahkan tombol "Back" pada app
bar sehingga kita tidak perlu
menambahkan Navigator.pop secara eksplisit dan kita hanya
perlu tap pada tombol "Back" tersebut untuk kembali
ke route awal.
7. Mengganti UI Menggunakan Tema
Pada langkah ini, kita akan memodifikasi tema aplikasi. Tema mengontrol tampilan dan
nuansa aplikasi yang kita miliki. Kita dapat menggunakan tema bawaan, yang
bergantung pada device atau emulator, dapat juga menyesuaikan tema
dari brand device yang kita gunakan. Kita dapat dengan mudah mengganti tema
aplikasi dengan melakukan konfigurasi classThemeData.
Ganti warna pada ThemeData di class MyApp :
1. class MyApp extends StatelessWidget {

2. @override

3. Widget build(BuildContext context) {

4. return MaterialApp(

5. title: 'Startup Name Generator',

6. theme: ThemeData( // Add the 3 lines from here...

7. primaryColor: Colors.white,

8. ), // ... to here.

9. home: RandomWords(),

10. );

11. }

Lakukan Hot Reload aplikasi, seharusnya sekarang

seluruh background dan app bar menjadi berwarna putih.
Sebagai latihan, gunakan ThemeData untuk mengubah aspek UI
lainnya. Class Colors pada library Material menyediakan banyak
sekali konstanta warna yang dapat kita mainkan dan jangan lupa
 gunakan Hot Reload agar eksperimen UI kita menjadi lebih cepat
dan mudah.
iOS

Referensi : https://codelabs.developers.google.com/