TUTORIAL FLUTTER

Muhammad sanusi amir bayquni

X1 rpl
BAB 1
i. Pengenalan Flutter
ii. Instalasi flutter
iii. Konfigurasi Flutter dengan android studio
iv. Instalasi ADV(android virtual device)

BAB 2
i. Program Hello World
ii. Program Snackbar
iii. Program TabBar
 Pengenalan Flutter

Flutter adalah SDK untuk pengembangan aplikasi mobile yang dikembangkan oleh
Google. Sama seperti react native, framework ini dapat digunakan untuk membuat
atau mengembangkan aplikasi mobile yang dapat berjalan pada device iOS dan
Android. Dibuat menggunakan bahasa C, C++, Dart and Skia membuat Flutter ini
menjadi salah
satu frameworkyang sangat menarik dan worth untuk kita pelajari. Hal yang
menarik pada framework ini adalah semua kodenya di compile dalam kode native
nya (Android NDK, LLVM, AOT-compiled) tanpa
ada intrepeter pada prosesnya sehingga proses compile-nya menjadi lebih cepat.
Dari segi penulisan kodenya, Flutter ini sangat berbeda dari react native dan
lebih cenderung mendekati Java Android jadi untuk
developer react native agak sedikit kesulitan untuk memahami kode pada Flutter
ini.
 Instalasi Flutter beserta konfigurasi dengan android studio
1. Download SDk flutter di website flutter seperti gambar dibawah ini

2. setelah SDk sudah didownload extract terlebih dahulu(lokasi

penyimpan bebas) 3.setelah di extract buka android studionya seperti
ini
4.lalu tekan configure dan klik setting

5. laluseacrh dan ketikan flutter seperti gambar dibawah ini dan klik
instal(karena saya sudah menginstalnya jadi tulisannya instaled)setelah selesai
di instal otomatis akan muncul pesan restrat android studionya
6.setelah sudah direstrat android studionya akan ke tampilan awal lagi dan sudah ada new flutter
project seperti gambar dibawah ini

Dan selesai flutter sudah berhasil terinstal di android studio kalian.

 Instalasi ADV (Android Device Virtual)

1. pertama klik start a new flutter project seperti gambar dibawah ini

2. klik flutter applications lalu next

3.silahkan konfigurasi ganti project name(bebas karena ini Cuma nama projectnya
saja)disini saya akan memberi nama dengan hello world.

4. Untuk flutter SDk path itu kalian klik dan kalian pilih dilokasi
kalian mengextract SDK tadi
5.dan pilih dimana kalian ingin menyimpan project kalian,lalu

klik next

6..lalu ganti nama domain bebas sesuka kalian seperti gambar

dibawah ini
Lalu klik finish dan project kalian akan dibuatkan oleh android studionya seperti gambar

dibawah ini
Ini adalah tampilan awal project kita
7.setelah itu klik ikon ADV manager seperti gambar dibawah ini

8.lalu klik create virtual device

9.dan pilih device mana yang ingin kalian install dan gunakan seperti gambar dibawah ini
lalu klik next

10. lalu pilih system yang ingin digunakan lalu download setelah sudah klik next
Saya memilih lollipop sebagai systemnya dan sedang mendownloadnya tunggu hingga selesai

11. setelah
selesai didownload ada pilihan seperti dibawah ini ikuti sesuai gambar
dibawah lalu klik finish
12.selesaiiii anda sudah membuat ADV dan bisa langsung digunakan dengan klik tombol play.
0
 BAB 2

Program HelloWorld
langkah pertama buka project yang tadi sudah kita buat dengan nama hello world
seperti dibawah ini.

Lalu hapus semua isi yang ada di main.dart,jadi file main.dart kosong seperti
gambar dibawah ini.
Lalu ikuti source code seperti dibawah ini.

Dan inilah hasilnya

Selesai kalian sudah berhasil membuat hello world di android studio

Program SnackBar
pertama buka file yang tadi sudah kita buat yaitu hello world seperti gambar
dibawah ini

Lalu kita buat widget snackbar seperti gambar dibawah ini

Setelah itu kita buat lagi widget untuk snackbarnya seperti kodingan dibawah ini

Setelah sudah coba kita run dan kita liat hasilnya

berhasil membuat snackbar

membuat Taskbar
pertama buat project traveloka seperti saya lalu ketik di main.dart buat statewidget
my app seperti dibawah ini

Lalu buat stateful widget seperti dibawah ini

Dan buat class dengan nama myhomepagestate seperti dibawah ini

Lalu lanjutan dari yang diatas sekarang buat bodynya seperti dibawah ini
Dan bagian main.dart selesai
Sekarang buat 5file folder lib dengan nama
1. Awal.dart
2. Simpan.dart
3. Pesanan.dart
4. Profile.dart
5. Inbox.dart
Setelah dibuat 5file tersebut kita buka file awal.dart dan ikuti seperti dibawah ini
Lalu buat statelesswidget akun seperti dibawah ini
Selesai ini kodingan dari awal.dart
Sekarang kita ke file simpan.dart lalu ketik seperti dibawah ini

Itu isi dari kodingan simpan.dart

Sekarang kita ke file pesanan.dart lalu ketik seperti ini

Itu isi kodingan pesanan.dart

Sekarang kita ke file inbox.dart kan ketikan seperti ini

kodingan inbox.dart
Sekarang ke file profile.dart dan ketikan seperti dibawah ini

Itu isi kodingan di file profile,dart

Selesai setelah 5file tersebut sudah kita isi dengan kodingan seperti diatas yang
terakhir kita import 5 file tersebut ke dalam file main.dart

Dan selesai….
Sekarang coba kita run

Selamat mengerjakaan