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 membuat aplikasi flutter mobile sederhana. Jika teman-
teman familiar dengan pemrograman berbasis objek (OOP) dan
konsep basic pemrograman seperti variabel, loops, dan conditional maka seharusnya
teman-teman dapat dengan mudah membangun aplikasi sederhana ini. Teman-teman
juga tidak membutuhkan pengalaman yang berhubungan dengan pemrograman
bahasa Dart, Mobile, ataupun pemrograman web.

Apa yang akan kita pelajari?

1. Cara menulis aplikasi flutter yang terlihat natural di iOS, Android, dan
web
2. Struktur dasar aplikasi flutter
3. Menemukan dan menggunakan packages untuk memperluas
fungsionalitas

4. Menggunakan Hot Reload untuk siklus development yang lebih

cepat
5. Bagaimana menerapkan widget stateful
6. Cara membuat daftar yang infinite dan lazily loaded
Di bagian #2, kita akan menambahkan interaktivitas, mengubah tema aplikasi, dan
menambahkan kemampuan untuk dapat melakukan navigasi ke halaman baru
(disebut route di flutter).

Apa yang akan kita buat?

Kita akan menerapkan aplikasi sederhana yang menampilkan nama yang diusulkan
untuk menjadi perusahaan startup. User dapat memilih dan membatalkan pilihan nama
dan menyimpan nama perusahaan yang terbaik. Aplikasi ini akan menghasilkan 10
nama sekaligus dan saat user melakukan scrolls maka akan banyak nama lagi yang
akan dihasilkan (tidak ada batasan seberapa banyak user melakukan scrolls). Berikut
contoh aplikasi yang akan dibuat:
2. Menyiapkan Lingkungan Pengembangan
Flutter
Ada beberapa cara untuk menyiapkan flutter environment,

1. Cara pertama, sudah pernah saya bahasa pada artikel ini Cara
Install Flutter Tanpa Android Studio.
2. Cara kedua, teman-teman dapat mengikuti artikel
berikut https://flutter.dev/docs/get-started/install/windows.
Saat kita ingin menjalankan program flutter yang sudah dibuat, kita dapat
menggunakan devices berikut ini (saya menggunakan cara ke-5):
1. Perangkat fisik Android atau iOS yang terhubung ke komputer kita dan
disetel ke mode pengembang(developer mode).
2. Simulator iOS (perlu menginstal Xcode tools).
3. Android Emulator (perlu menyiapkan Android Studio)
4. Browser (seperti Chrome yang diperlukan untuk debugging)

5. Kemudian yang terakhir menggunakan cara ini pada artikel ini Cara
Install Flutter Tanpa Android Studio.

3. Membuat Starter Flutter App

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.

3. void main() => runApp(MyApp());

4.

5. class MyApp extends StatelessWidget {

6. @override

7. Widget build(BuildContext context) {

8. return MaterialApp(

9. title: 'Welcome to Flutter',

10. home: Scaffold(

11. appBar: AppBar(

12. title: const Text('Welcome to Flutter'),

13. ),

14. body: const Center(

15. child: const Text('Hello World'),

16. ),

17. ),

18. );

19. }

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

Save project yang sudah dibuat.

Jalankan projectnya dengan menekan F5 atau klik tombol , jika

berhasil maka tampilan aplikasinya seperti berikut:

Tips: Saat menjalankan aplikasi flutter pada simulator atau devices,

jalankan flutter run pada terminal lalu r untuk mengaktifkan

fitur Hot Reload. Dengan memanfaatkan fitur Hot Reload kita dapat
melihat perubahan pada devices secara langsung hanya dengan
melakukan save tanpa perlu compiling program ulang.
?Penjelasan

Contoh program pada halaman ini menggunakan komponen Material

App. Material adalah bahasa desain visual yang standar untuk seluler
dan web. Flutter juga menawarkan beragam widget Material, dapat
teman-teman lihat di sini material.io.
Penggunakan notasi panah (=>) dapat dilakukan untuk one-
line function atau method, seperti yang diterapkan pada method
main().
Aplikasi pada halaman ini menggunakan extends StatelessWidget ,
yang menjadikan aplikasi itu sendiri sebagai widget. Di flutter, hampir
semuanya adalah widget, termasuk alignment, padding, dan layout.
Widget Scaffold merupakan bagian dari library Material yang
menjadi tempat komponen property app bar, title, dan body untuk
menampung widget tree (tiap widget subtree strukturnya bisa sangat
kompleks) yang ditampilan pada home screen.
 Tugas utama widget's adalah menyediakan method build yang di
dalamnya terdapat struktur property dan widget yang saling terkait
satu sama lain.
Property body pada program terdiri dari widget Center yang di
dalamnya terdapat child widget Text sehingga subtree yang berada
di dalam widget Center akan secara otomatis tampil di tengah layar.

4. Penggunaan package eksternal

Pada step ini kita akan mulai menggunakan open-source package yang
bernama english_words , di dalamnya berisi beberapa ribu kata bahasa Inggris yang
paling sering digunakan dan beberapa fungsi utilitasnya. Teman-teman dapat
menemukan english_words package dan open-source package lainnya di pub.dev.

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.
 Pada lib/main.dart , import package baru ini:
8. import 'package:flutter/material.dart';

import 'package:english_words/english_words.dart'; // Add this

line.

Selanjutnya kita akan menggantikan teks "Hello World" dengan ribuan kata
random yang ada di package english_words .

Lakukan perubahan berikut:

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

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

3.

4. void main() => runApp(MyApp());

5.

6. class MyApp extends StatelessWidget {

7. @override

8. Widget build(BuildContext context) {

9. final wordPair = WordPair.random(); // Add this line.

10. return MaterialApp(

11. title: 'Welcome to Flutter',

12. home: Scaffold(

13. appBar: AppBar(

14. title: Text('Welcome to Flutter'),

 15. ),

16. body: Center(

17. //child: Text('Hello World'), // Replace this

text...

18. child: Text(wordPair.asPascalCase), // With this

text.

19. ),

20. ),

21. );

22. }

Tips: PascalCase juga dapat disebut UpperCamelCase , artinya setiap kata

dalam string, termasuk huruf pertama akan dimulai dengan huruf besar.
Contoh, uppercamelcase menjadi UpperCamelCase.

Jika aplikasi sedang running, maka klik Hot Reload untuk

memperbarui aplikasi (pada command line, jalankan flutter

run lalu r untuk mengaktifkan fitur Hot Reload).

Setiap kita menjalankan Hot Reload atau

melakukan save project maka kita akan melihat perubahan kata yang
dipilih secara acak pada aplikasi yang kita jalankan, itu karena
penyandingan kata dihasilkan di dalam method build yang berjalan
setiap kali MaterialApp di rendering, atau saat toggling platform
di Flutter Inspector. Berikut tampilan aplikasinya:
Android iOS

5. Menambahkan Stateful Widget

Stateless widget sifatnya immutable, artinya property-nya tidak dapat berubah karena
semua nilai bersifat Final dan seluruh konfigurasi yang ada di dalamnya sudah
diinisialisasi sejak awal.
Sedangkan StatefulWidget memiliki sifat kebalikannya, yang artinya widget ini dapat
bekerja secara dinamis, dapat diperbaharui sesuai dengan kebutuhan user actions atau
ketika terjadinya perubahan data masukan. Pada
pengimplementasiannya, StatefulWidget membutuhkan setidaknya 2 class:
1. StatefulWidget yang membuat instance State class.
2. Objek StatefulWidget , objek ini sendiri tidak dapat diubah, dibuang,
dibuat ulang namun tetap ada selama widget tersebut berjalan.
oke, berikut langkah-langkah penggunaan StatefulWidget pada mini project ini.

1. Gunakan boilerplate code pada saat menambahkan StatefulWidget ,

artinya kita menambahkan suatu kode pada file yang sudah berisi kode
lainnya tanpa atau dengan sedikit perubahan. Oleh karena itu,
kode StatefulWidget yang akan kita tambahkan pada
file lib/main.dart kita letakkan di paling bawah setelah brackets akhir
dari class StatelessWidget{}.
2.
Selanjutnya ketik stful , maka kode editor/IDE akan menampilan
pilihan untuk kita.
3.
pilih Flutter stateful widget , maka bentuk programnya sekarang
seperti ini:
1. import 'package:flutter/material.dart';

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

3.

4. void main() => runApp(MyApp());

5.

6. class MyApp extends StatelessWidget {

7. @override

8. Widget build(BuildContext context) {

9. final wordPair = WordPair.random(); // Add this line.

10. return MaterialApp(

11. title: 'Welcome to Flutter',

12. home: Scaffold(

13. appBar: AppBar(

14. title: Text('Welcome to Flutter'),

15. ),

16. body: Center(

17. //child: Text('Hello World'), // Replace this

text...

18. child: Text(wordPair.asPascalCase), // With this

text.

19. ),

20. ),

21. );

22. }

23. }

24.

25. class extends StatefulWidget {

26. @override

27. _State createState() => _State();

28. }

29.

30. class _State extends State<> {

31. @override

32. Widget build(BuildContext context) {

33. return Container(

34.

35. );

36. }

4. Seperti yang kita lihat pada kode di bawah

ini, widget RandomWords tidak melakukan banyak hal selain
membuat class State-nya. Setelah
memasukkan RandomWords sebagai nama widget stateful, IDE secara
otomatis memperbarui class State yang menyertainya dan
menamakannya _RandomWordState . Secara default,
nama class State diawali dengan garis bawah.
Mengawali identifier dengan garis bawah, akan mengaktifkan enforces
privacy dalam bahasa Dart dan merupakan cara terbaik yang
disarankan untuk sebuah objek State.
5. IDE juga secara otomatis memperbarui class State untuk
menerapkan extend State<RandomWords> , menunjukkan bahwa kita
menggunakan generic class State khusus untuk digunakan
dengan RandomWords . Sebagian besar algoritma aplikasi berada
di class _RandomWordsState, selain itu tugas dari class ini yaitu
mempertahankan State untuk widget RandomWords . Class ini
menyimpan daftar pasangan kata yang dihasilkan, yang semakin
bertambah tak terbatas saat pengguna melakukan scrolls.
Kedua class tersebut sekarang terlihat seperti berikut:
1. class RandomWords extends StatefulWidget {

2. @override

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

4. }

6.
7. class _RandomWordsState extends State<RandomWords> {

8. @override

9. Widget build(BuildContext context) {

10. return Container();

11. }

12. }

13. Perbaharui method build() pada _RandomWordsState ,

ganti return Container(); dengan 2 baris kode berikut:
14. class _RandomWordsState extends State<RandomWords> {

15. @override

16. Widget build(BuildContext context) {

17. final wordPair = WordPair.random(); // NEW

18. return Text(wordPair.asPascalCase); // NEW

19. }

Hapus kode word-generation dari MyApp dengan melakukan perubahan

seperti berikut:
20. class MyApp extends StatelessWidget {

21. @override

22. Widget build(BuildContext context) {

23. final wordPair = WordPair.random(); // DELETE

24.

25. return MaterialApp(

26. title: 'Welcome to Flutter',

27. home: Scaffold(

28. appBar: AppBar(

29. title: Text('Welcome to Flutter'),

30. ),

31. body: Center(

32. //child: Text(wordPair.asPascalCase), // REPLACE

with...

33. child: RandomWords(), // ...this line

34. ),

35. ),

36. );

37. }

38. Lakukan Hot Reload pada aplikasi yang sedang berjalan dan
seharusnya aplikasi berjalan seperti sebelumnya, menampilkan
pasangan kata setiap kali kita melakukan Hot Reload atau save.
6. Membuat infinite scrolling pada
ListView
Pada langkah ini, kita akan memperluas fungsi _RandomWordsState untuk
menghasilkan dan menampilkan daftar pasangan kata. Saat pengguna
melakukan scrolling, daftar (ditampilkan dalam widget ListView) akan bertambah tanpa
batas. Konstruktor factory builder di ListView memungkinkan kita untuk
melakukan lazily build tampilan daftar sesuai permintaan.

Tambahkan variabel _suggestions untuk menyimpan daftar pasangan

kata yang disarankan. Selain itu, tambahkan
variabel _biggerFont untuk memperbesar ukuran font.
1. class _RandomWordsState extends State {

2. final List _suggestions = []; // NEW

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

NEW

4. ...

Selanjutnya, kita akan menambahkan

fungsi _buildSuggestions() ke class _RandomWordsState . Method i
ni fungsinya membangun ListView yang menampilkan pasangan kata
yang
disarankan. Class ListView menyediakan property itemBuilder ,
yang merupakan factory builder dan callback function yang ditetapkan
sebagai anonymous function. Dua parameter diteruskan ke
fungsi BuildContext dan baris iterator, i . Iterator dimulai dari 0 dan
bertambah setiap kali fungsi dipanggil, 1 kali untuk setiap pasangan
kata yang disarankan. Model ini memungkinkan daftar saran terus
bertambah saat pengguna melakukan scrolls.
Pada class _buildSuggestions , tambahkan fungsi berikut:
5. Widget _buildSuggestions() {
6. return ListView.builder(

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

8. // The itemBuilder callback is called once per suggested

9. // word pairing, and places each suggestion into a ListTile

10. // row. For even rows, the function adds a ListTile row
for

11. // the word pairing. For odd rows, the function adds a

12. // Divider widget to visually separate the entries. Note

that

13. // the divider may be difficult to see on smaller

devices.

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

15. // Add a one-pixel-high divider widget before each row

16. // in the ListView.

17. if (i.isOdd) {

18. return Divider();

19. }

20.

21. // The syntax "i ~/ 2" divides i by 2 and returns an

22. // integer result.

23. // For example: 1, 2, 3, 4, 5 becomes 0, 1, 1, 2, 2.

24. // This calculates the actual number of word pairings

25. // in the ListView,minus the divider widgets.

26. final int index = i ~/ 2;

27. // If you've reached the end of the available word

28. // pairings...

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

30. // ...then generate 10 more and add them to the

31. // suggestions list.

32. _suggestions.addAll(generateWordPairs().take(10));

33. }

34. return _buildRow(_suggestions[index]);

35. }

36. );

Fungsi _buildSuggestions memanggil _buildRow 1 kali untuk setiap

pasangan kata. Fungsi tersebut menampilkan setiap pasangan baru
dalam ListTile , yang memungkinkan kita membuat baris lebih menarik (nanti
akan terlihat pada artikel bagian 2).

37. Tambahkan fungsi _buildRow ke _RandomWordsState :

38. Widget _buildRow(WordPair pair) {

39. return ListTile(

40. title: Text(

41. pair.asPascalCase,

42. style: _biggerFont,

43. ),

44. );

45. Hapus 2 baris pada method build dan gantikan langsung

dengan _buildSuggestions() . ( Scaffold berfungsi untuk
mengimplementasikan tata letak visual Desain Material dasar.)
46. @override

47. Widget build(BuildContext context) {

48. //final wordPair = WordPair.random(); // Delete these...

49. //return Text(wordPair.asPascalCase); // ... two lines.

50.

51. return Scaffold ( // Add from here...

52. appBar: AppBar(

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

54. ),

55. body: _buildSuggestions(),

56. ); // ... to here.

}
 Perbaharui method build pada MyApp , ganti title-nya,
hapus AppBar -nya, ganti isi widget dari property
home dengan widget RandomWords .
57. @override

58. Widget build(BuildContext context) {

59. return MaterialApp(

60. title: 'Startup Name Generator',

61. home: RandomWords(),

62. );

Restart aplikasi atau save dan dapat juga lakukan Hot

Reload. Maka akan terlihat daftar pasangan kata yang tidak terbatas
sampai berapapun jauhnya kita melakukan scrolls.