M

MODUL PERKULIAHAN
INSTITUT WIDYA PRATAMA

PEMROGRAMAN BERBASIS MOBILE 2

PERTEMUAN 12

DESKRIPSI MATAKULIAH
Mata Kuliah ini mempelajari konsep bahasa pemrograman Dart, membuat aplikasi mobile dengan flutter
menggunakan bahasa Dart, menerapkan widget pada flutter untuk membuat aplikasi mobile

CAPAIAN PEMBELAJARAN
Mahasiswa dapat memahami penggunaan Framework Flutter dengan IDE Visual Studio Code untuk membuat
aplikasi mobile.

DOSEN PENGAMPU
Taufikqurrohman, M.Kom

INSTITUT WIDYA PRATAMA

IWIMA
[Pemrograman Berbasis Mobile 2]
[Flutter/Widget/Pertemuan 12]

[FLUTTER/WIDGET/PERTEMUAN 11]

CAPAIAN PEMBELAJARAN
Mahasiswa dapat memahami penggunaan Framework Flutter dengan IDE Visual Studio Code
untuk membuat aplikasi mobile.

MATERI PEMBELAJARAN
1. Alat dan Bahan
2. Praktikum

Intitut Widya Pratama

Jl. Patriot No 25 Pekalongan
2
stmik-wp.ac.id
[Pemrograman Berbasis Mobile 2]
[Flutter/Widget/Pertemuan 12]

MATERI

Untuk mempermudah praktek pembuatan aplikasi mobile, silahkan praktekkan

modul berikut pada website https://flutlab.io/.
Catatan:

- Aplikasi hanya bisa dibuild berbasis web.

- Proses build mungkin akan lama.
- Untuk versi gratis, ada pembatasan build jika terjadi banyak error saat build. Jadi hindari
kode error saat akan dibuild, pastikan kode sudah benar.
- Project bisa di download dan di simpan di drive
1. Alat dan Bahan
Praktikum 12 adalah kelanjutan dari Praktikum Pertemuan 11 yang berisi materi
tentang widget yang bisa digunakan untuk membuat form dan mengambil nilai yang
diinputkan ke dalam form serta menampilkan ke halaman yang lain. Praktikum pada mata
kuliah Pemrograman Berbasis Mobile bisa dilakukan dengan 2 versi, versi pertama yaitu
online seperti yang tertera pada penjelasan diatas dan yang kedua versi offline yaitu
dengan beberapa software yang dibutuhkan untuk PC atau Laptop, beberapa software
tersebut yaitu Flutter SDK dan Android SDK sebagai bahan utama karena didalamnya
terdapat kerangka kerja, software development tool dan libary yang dibutuhkan dalam
pengembangan aplikasi terutama aplikasi mobile. Teks Editor sebagai tempat
menerapkan tool dan library dari Flutter SDK dan Android SDK, teks editor bisa
menggunakan Android Studio atau Visual Studio Code yang didalamnya terdapat
beberapa fitur yang bisa digunakan dalam pengembangan aplikasi mobile. Media Tampil
sebagai tempat untuk menampilkan hasil dari pengembangan aplikasi mobile. Media
tampil bisa menggunakan web (browser), emulator dan smartphone, emulator bisa
menggunakan aplikasi android studio dan smartphone bisa via kabel dan wifi (ip
smartphone dan PC/Laptop satu jalur/subnet)

Intitut Widya Pratama

Jl. Patriot No 25 Pekalongan
3
stmik-wp.ac.id
[Pemrograman Berbasis Mobile 2]
[Flutter/Widget/Pertemuan 12]

2. Praktikum

Sebelum ke materi, silahkan buka file project pertemuan sebelumnya yaitu pertemuan
11.

2.1 Buka website FlutLab.io - Flutter IDE online

2.2 Tekan tombol Sign in

Intitut Widya Pratama

Jl. Patriot No 25 Pekalongan
4
stmik-wp.ac.id
[Pemrograman Berbasis Mobile 2]
[Flutter/Widget/Pertemuan 12]

2.3 Untuk yang sudah punya akun silahkan login dengan email dan password atau login
menggunakan google

2.4 Setelah login, tampilan awal akan tampil seperti gambar berikut apabila sudah ada 2
projek

Intitut Widya Pratama

Jl. Patriot No 25 Pekalongan
5
stmik-wp.ac.id
[Pemrograman Berbasis Mobile 2]
[Flutter/Widget/Pertemuan 12]

2.5 Pilih project flutter_pbm

2.6 Buat file baru dengan nama “ pertemuan12.dart “ dan buat class Pertemuan12

Intitut Widya Pratama

Jl. Patriot No 25 Pekalongan
6
stmik-wp.ac.id
[Pemrograman Berbasis Mobile 2]
[Flutter/Widget/Pertemuan 12]

Jalankan dengan menekan tombol yang dilingkari warna merah

Maka akan menampilkan seperti pada gambar dibawah

Gambar A Gambar B
Ketika tombol Pertemuan 11 pada Gambar A ditekan maka akan muncul Gambar B
2.7 Buat class PSDDB dengan widget statefull dan ketikan kode berikut

Intitut Widya Pratama

Jl. Patriot No 25 Pekalongan
7
stmik-wp.ac.id
[Pemrograman Berbasis Mobile 2]
[Flutter/Widget/Pertemuan 12]

Intitut Widya Pratama

Jl. Patriot No 25 Pekalongan
8
stmik-wp.ac.id
[Pemrograman Berbasis Mobile 2]
[Flutter/Widget/Pertemuan 12]

2.8 Tambahkan kode berikut untuk manambahkan tombol

Jalankan dengan menekan tombol yang dilingkari warna merah

Intitut Widya Pratama

Jl. Patriot No 25 Pekalongan
9
stmik-wp.ac.id
[Pemrograman Berbasis Mobile 2]
[Flutter/Widget/Pertemuan 12]

Maka akan menampilkan seperti pada gambar dibawah

Gambar A Gambar B Gambar C

Ketika tombol Pertemuan 12 pada Gambar A ditekan
maka akan muncul Gambar B dan ketika tombol
dropdown ditekan pada Gambar B maka akan muncul
Gambar C serta dropdown dipilih dan tekan tombol
tampilkan pada Gambar C maka akan tampil seperti pada
Gambar D

Gambar D
2.9 Buat class baru pada file pertemuan12.dart dengan nama PSRB menggunakan widget
statefull

Intitut Widya Pratama

Jl. Patriot No 25 Pekalongan
10
stmik-wp.ac.id
[Pemrograman Berbasis Mobile 2]
[Flutter/Widget/Pertemuan 12]

Intitut Widya Pratama

Jl. Patriot No 25 Pekalongan
11
stmik-wp.ac.id
[Pemrograman Berbasis Mobile 2]
[Flutter/Widget/Pertemuan 12]

2.10 Buat class PSCM dengan widget statefull pada file pertemuan12.dart

Intitut Widya Pratama

Jl. Patriot No 25 Pekalongan
12
stmik-wp.ac.id
[Pemrograman Berbasis Mobile 2]
[Flutter/Widget/Pertemuan 12]

2.11 Tambahkan tombol pada class Pertemuan12 dengan menambahkan kode berikut

Jalankan dengan menekan tombol yang dilingkari warna merah

Intitut Widya Pratama

Jl. Patriot No 25 Pekalongan
13
stmik-wp.ac.id
[Pemrograman Berbasis Mobile 2]
[Flutter/Widget/Pertemuan 12]

Maka akan menampilkan seperti pada gambar dibawah

Gambar A Gambar B Gambar C

Ketika tombol Pertemuan 12 pada Gambar A ditekan
maka akan muncul Gambar B dan ketika tombol radio
button ditekan pada Gambar B maka akan muncul
Gambar C serta ketika salah satu radio button dipilih dan
tekan tombol tampilkan pada Gambar C maka akan tampil
seperti pada Gambar D

Gambar D
2.12 Buat class baru pada file pertemuan12.dart dengan nama PSCB menggunakan
widget statefull

Intitut Widya Pratama

Jl. Patriot No 25 Pekalongan
14
stmik-wp.ac.id
[Pemrograman Berbasis Mobile 2]
[Flutter/Widget/Pertemuan 12]

Intitut Widya Pratama

Jl. Patriot No 25 Pekalongan
15
stmik-wp.ac.id
[Pemrograman Berbasis Mobile 2]
[Flutter/Widget/Pertemuan 12]

Intitut Widya Pratama

Jl. Patriot No 25 Pekalongan
16
stmik-wp.ac.id
[Pemrograman Berbasis Mobile 2]
[Flutter/Widget/Pertemuan 12]

2.13 Buat class PSMR menggunakan widget statefull pada file pertemuan12.dart

Intitut Widya Pratama

Jl. Patriot No 25 Pekalongan
17
stmik-wp.ac.id
[Pemrograman Berbasis Mobile 2]
[Flutter/Widget/Pertemuan 12]

2.14 Tambahkan tombol pada class Pertemuan12 dengan menambahkan kode berikut

Jalankan dengan menekan tombol yang dilingkari warna merah

Intitut Widya Pratama

Jl. Patriot No 25 Pekalongan
18
stmik-wp.ac.id
[Pemrograman Berbasis Mobile 2]
[Flutter/Widget/Pertemuan 12]

Maka akan menampilkan seperti pada gambar dibawah

Gambar A Gambar B Gambar C

Ketika tombol Pertemuan 12 pada Gambar A ditekan
maka akan muncul Gambar B dan ketika tombol checkbox
pada Gambar B ditekan maka akan muncul Gambar C
serta ketika salah satu atau beberapa checkbox dipilih
dan tekan tombol tampilkan pada Gambar C maka akan
tampil seperti pada Gambar D

Gambar D

Intitut Widya Pratama

Jl. Patriot No 25 Pekalongan
19
stmik-wp.ac.id
[Pemrograman Berbasis Mobile 2]
[Flutter/Widget/Pertemuan 12]

2.15 Buat class baru dengan nama PSTEC pada file pertemuan12.dart

Intitut Widya Pratama

Jl. Patriot No 25 Pekalongan
20
stmik-wp.ac.id
[Pemrograman Berbasis Mobile 2]
[Flutter/Widget/Pertemuan 12]

2.16 Tambahkan tombol pada class Pertemuan12 dengan menambahkan kode berikut

Jalankan dengan menekan tombol yang dilingkari warna merah

Intitut Widya Pratama

Jl. Patriot No 25 Pekalongan
21
stmik-wp.ac.id
[Pemrograman Berbasis Mobile 2]
[Flutter/Widget/Pertemuan 12]

Maka akan menampilkan seperti pada gambar dibawah

Gambar A Gambar B Gambar C

Ketika tombol Pertemuan 12 pada Gambar A ditekan
maka akan muncul Gambar B dan ketika tombol
textformfield pada Gambar B ditekan maka akan muncul
Gambar C serta ketika mengintputkan teks pada
textformfield dan tekan tombol tampilkan pada Gambar C
maka akan tampil seperti pada Gambar D

Gambar D

Intitut Widya Pratama

Jl. Patriot No 25 Pekalongan
22
stmik-wp.ac.id
[Pemrograman Berbasis Mobile 2]
[Flutter/Widget/Pertemuan 12]

RANGKUMAN
[Diisi dengan rangkuman materi yang telah diuraikan]

TES FORMATIF
[Diisi dengan tes formatif sesuai dengan materi yang telah diuraikan]

DAFTAR PUSTAKA
[Diisi dengan daftar pustaka yang digunakan dalam menyusun modul pembelajaran]

Intitut Widya Pratama

Jl. Patriot No 25 Pekalongan
23
stmik-wp.ac.id