MODUL Mobile Programming

(1)

i

MODUL

Mobile Programming

Oleh : Ade Hendini, M.Kom

Program Studi Sistem Informasi Kampus Pontianak Fakultas Teknik dan Informatika

Universitas Bina Sarana Informatika

2021

(2)

ii DAFTAR ISI

BAB I PENGENALAN APLIKASI MOBILE DENGAN FLUTTER... 1

A. Menyiapkan Perangkat...1

B. Membuat dan Menjalankan Projek...20

C. Membuat dan Menjalankan Projek dengan VSCode dan Handphone Android...26

D. Struktur Folder Flutter...38

BAB II MEMBUAT PROJEK FLUTTER...40

A. Membuat Hello World...40

B. Membuat Widget Column...45

C. Membuat Widget Row...47

D. Stateless Widget dan Statefull Widget...48

BAB III MEMBUAT HALAMAN MAHASISWA...49

A. Membuat Form...49

B. Pemisahan Widget kedalam Fungsi-Fungsi...51

C. Membuat Model Mahasiswa...52

D. Membuat Detail Mahasiswa...53

E. Membuat Fungsi Tombol Simpan dan Menampilkan Data Pada Detail Mahasiswa...54

F. Membuat ListView Mahasiswa...58

G. Membuat Route (Pindah Halaman) ...60

H. Pemisahan Widget ke dalam Class StatelessWidget...62

I. Menampilkan Detail Mahasiswa Saat ListView diklik...64

(3)

1 BAB I : Pengenalan Aplikasi Mobile dengan Flutter

Menyiapkan perangkat Install Git

Buka laman https://git-scm.com/downloads, kemudian klik tombol download

Kemudian lakukan installasi git dari file yang telah diunduh.

Install JDK

JDK (Java Development Kit) adalah sebuah perangkat lunak yang digunakan untuk melakukan proses kompilasi dari kode java ke bytecode yang dapat dimengerti dan dapat dijalankan oleh JRE (Java Runtime Envirotment). JDK wajib terinstall pada komputer yang akan melakukan proses pembuatan aplikasi berbasis java, namun tidak wajib terinstall di komputer yang akan menjalankan aplikasi yang dibangun dengan java.

JDK dapat diunduh pada laman https://jdk.java.net/

(4)

2 Pilih JDK 15 atau dapat juga memilih jdk terbaru, kemudian download file zip untuk windows, jika menggunakan windows

Kemudian extrak berkas file tersebut pada laptop/komputer

(5)

3 Kemudian buka Control Panel, pilih “System”

Kemudian pilih “Advanced System Setting”

(6)

4 Kemudian klik tombol “Environtment Variables”

Pilih Path pada bagian System Variables kemudian Klik tombol “Edit”

(7)

5 Kemudian klik tombol “New”

(8)

6 Kemudian masukkan alamat folder bin pada jdk yang telah kita ekstrak dalam hal ini misalnya

“C:\Program Files\Java\jdk-15.0.1\bin”

(9)

7 Biasanya agar JDK dapat berfungsi perlu dilakukan restart laptop/komputer. Untuk memeriksa apakah installasi berhasil, buka command prompt kemudian ketikkan java -version atau javac -version

Install Android Studio

Android studio dapat diunduh pada laman https://developer.android.com/studio . Setelah

diunduh klik dua kali pada file yang telah diunduh tersebut, kemudian lakukan installasi

dengan mengikuti langkah-langkah yang telah disediakan

(10)

8 Kemudian pilih tipe standar dan klik next

(11)

9 Pilih thema tampilan kemudian klik next

(12)

10 Kemudian klik tombol next

(13)

11 Pastikan komputer terhubung dengan internet yang stabil, karena android studio akan

mengunduh komponen-komponen yang diperlukan

(14)

12 Setelah selesai klik finish

Install Flutter

Flutter adalah sebuah framework open-source yang dikembangkan oleh Google untuk membangun antarmuka (user interface/UI) aplikasi Android dan iOS.

Apa bedanya membuat aplikasi android menggunakan Java/Kotlin (native) dengan Flutter.

Dari bahasa pemrograman yang digunakan, Flutter menggunakan bahasa pemrograman Dart, sedangkan Android Native menggunakan bahasa pemrograman Java dan Kotlin.

Aplikasi yang kita buat dengan Flutter dapat di-build ke Android dan iOS. Sedangkan Android Native hanya bisa di-build ke Android saja.

Untuk menginstall flutter, buka laman https://flutter.dev/docs/get-started/install

Kemudian pilih “Windows”

(15)

13 Kemudian pilih flutter_windows_ untuk mengunduh file flutter

Kemudian ekstrak file zip flutter misalnya di “D:/Android”

Kemudian buka Control Panel, pilih “System”

(16)

14 Kemudian pilih “Advanced System Setting”

Kemudian klik tombol “Environtment Variables”

(17)

15 Kemudian pilih pada “System Variables” pilih “Path” dan klik tombol “Edit”

(18)

16 Kemudian klik tombol “New”

(19)

17 Kemudian masukkan alamat folder bin pada flutter yang telah kita ekstrak dalam hal ini

misalnya “D:\Android\flutter\bin”

(20)

18 Konfigurasi Android Studio dengan Flutter

Jalankan Android Studio kemudian pada menu “Configure” pilih “Plugins”

(21)

19 Pilih “Flutter” kemudian klik tombol “Install”

Setelah selesai, restart/tutup Android Studio

(22)

20 Membuat dan menjalankan projek

Jalankan Android Studio kemudian pilih “Create New Flutter Project”

Kemudian pilih “Flutter Application” dan klik “Next”

(23)

21 Kemudian tentukan :

Project Name : belajarflutter

Flutter SDK path : D:\Android\flutter (masukkan sesuai alamat folder flutter diletakkan) Project location : D:\Belajar (bebas memasukkan dimanapun)

Description : Membuat Aplikasi Mobile Flutter (bebas) Kemudian klik tombol “Next”

Kemudian klik tombol “Finish”. Pastikan perangkat terhubung ke internet, karena diperlukan

untuk mengunduh projek yang dibuat

(24)

22 Setelah selesai akan muncul projek yang telah dibuat

Untuk menjalankan projek, kita memerlukan emulator android. Pertama kita akan membuat

emulator android dengan cara klik “AVD Manager” pada pojok kiri atas

(25)

23 Kemudian klik tombol “Create Virtual Device”

Pilih salah satu device yang dinginkan, misalnya “Nexus S” kemudian klik tombol “Next”

(26)

24 Kemudian kita akan memilih Versi Sistem Operasi Android, dalam hal ini misalnya “Q”, jika belum ada maka kita akan diminta untuk mengunduh terlebih dahulu.

Setelah itu klik Finish

Untuk Menjalankan Emulator, klik logo play

(27)

25 Kemudian akan muncul emulator android seperti berikut:

(28)

26 Jika emulator sudah berjalan, kita dapat mengeksekusi projek dengan cara klik tombol play (berwarna hijau) pada Android Studio

Pada emulator akan tampil hasil projek seperti berikut

Membuat dan menjalankan projek dengan VSCode dan Handphone Android Install VSCode sebagai alternatif editor

Unduh VSCode pada laman https://code.visualstudio.com/download kemudian install. Agar flutter

dapat digunakan pada VSCode, perlu diinstall beberapa extension flutter yang dibutuhkan.

(29)

27 Setelah itu restart/tutup VSCode

Membuat projek flutter dengan VSCode

Jalankan VSCode, pada menubar pilih view -> command Palette... atau dapat juga dengan shortcut Ctrl + Shift + P

Kemudian ketikkan flutter dan pilih Flutter: New Project

(30)

28 Kemudian pilih Application

Pilih folder tempat projek tersebut

(31)

29 Kemudian tentukan nama projek flutter yang ingin dibuat dengan nama perpustakaan_app

Kemudian tekan Enter dan tunggu hingga proses unduhan selesai

(32)

30 Menjalankan aplikasi dengan Handphone Android

Untuk menjalankan projek flutter dari VSCode dapat menggunakan Emulator AVD yang telah dibuat sebelumnya menggunakan Android Studio ataupun menggunakan Device Handphone Android langsung

Untuk menggunakan android device secara langsung, pertama aktifkan dulu mode developer

dengan cara buka Setting kemudian pilih System kemudian pilih About Phone, untuk masing-

masing device mungkin terdapat perbedaan untuk lokasi About Phone ada pula yang berada

pada Additional Setting

(33)

31 Kemudian pilih About Phone

(34)

32 Kemudian ketuk Build number beberapa kali, namun ini juga berbeda untuk beberapa versi

misalnya untuk Xiaomi dengan mengetuk MIUI Version beberapa kali

(35)

33 Selanjutnya mengaktifkan USB Debugger dengan cara pilih Developer Option pada System,

Developer Option ini akan muncul setelah mode Developer diaktifkan dengan cara diatas

(36)

34 Kemudian aktifkan USB Debugging

(37)

35 Jika telah selesai, hubungkan Handphone android dengan laptop/komputer dengan kabel

data, untuk memeriksa apakah sudah terhubung dengan Handphone, dapat dilihat pada

VSCode bagian pojok kanan bawah akan tertera nama device yang terhubung

(38)

36 Atau jika pada Android Studio terletak pada toolbar bagian atas tengah

Agar laptop bekerja lebih ringan dapat digunakan Text Editor VSCode dan menjalankan projek

langsung menggunakan Handphone Android. Untuk menjalankan projek melalui VSCode

dengan klik logo play pada bagian pojok kanan atas

(39)

37 Adapun tampilannya adalah sebagai berikut

(40)

38 Struktur Folder Flutter

Adapun struktur folder Projek flutter adalah sebagai berikut:

(41)

39

^android

berisi source code untuk aplikasi android;

^ios

berisi source code untuk aplikasi iOS;

^lib

berisi source code Dart, di sini kita akan menulis kode aplikasi;

^test

berisi source code Dart untuk testing aplikasi;

^.gitignore

adalah file Git;

^.metadata

merupakan file yang berisi metadata project yang di-generate otomatis;

^.packages

merupakan file yang berisi alamat path package yang dibuat oleh pub;

flutter_app.iml

merupakan file XML yang berisi keterangan project;

pubspec.lock

merupakan file yang berisi versi-versi library atau package. File ini dibuat oleh pub. Fungsinya untuk mengunci versi package.

pubspec.yaml

merupakan file yang berisi informasi tentang project dan libraray yang dibutuhkan;

^README.md

merupakan file markdown yang berisi penjelasan tentang source code.

(42)

40 BAB II : Membuat Projek Flutter

Membuat Hello World

Buka projek perpustakaan_app menggunakan VSCode agar lebih ringan. Buka file main.dart yang terletak pada folder lib kemudian ubah menjadi

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

2.

3. void main() {

4. runApp(const MyApp());

5. } 6.

7. class MyApp extends StatelessWidget {

8. const MyApp({Key? key}) : super(key: key);

9.

10. @override

11. Widget build(BuildContext context) { 12. return MaterialApp(

13. title: 'Perpustakaan', 14. home: Scaffold(

15. appBar: AppBar(

16. title: const Text("Belajar Flutter"), 17. ),

18. ), 19. );

20. } 21. }

Ketika dijalankan akan menghasilkan

(43)

41 Kemudian untuk menambahkan tampilan dibagian dalam (body), pada fungsi Scaffold terdapat parameter body. Silahkan modifikasi main.dart menjadi seperti berikut

2.

5. } 6.

9.

(44)

42

10. @override

11. Widget build(BuildContext context) { 12. return MaterialApp(

13. title: 'Perpustakaan', 14. home: Scaffold(

15. appBar: AppBar(

18. body: const Center(

19. child: Text("Hello World"), 20. ),

21. ), 22. );

23. } 24. }

Sehingga akan menghasilkan

(45)

43 Pada aplikasi di atas, kita membuat StatelessWidget yang berisi widget

MaterialApp()

. Kemudian di dalam

MateralApp()

berisi widget lagi:

Scaffold

,

AppBar

,

Center

, dan

Text

. Ini adalah widget dasar.

Penjelasan:

• MyApp

adalah StatelessWidget, merupakan widget induk;

• MaterialApp

adalah widget yang membungkus beberapa widget yang menggunakan tema material design

• Scaffold

adalah widget untuk struktur dasar material design;

• AppBar

adalah widget untuk membuat AppBar;

• Center

adalah Widget layout untuk membuat widget ke tengah;

• Text

adalah widget untuk membuat teks.

Untuk mempermudah dalam pembacaan kode dan maintenance dapat dilakukan dengan memisahkan MyApp dengan halaman yang ingin ditampilkan.

Silahkan buat sebuah file dengan nama hello_world.dart di dalam folder lib

(46)

44 Kemudian bagian Scaffold pada main.dart yang telah dibuat tadi akan kita masukkan ke dalam hello_world.dart, sehingga pada hello_world.dart akan menjadi

2.

3. class HelloWorld extends StatelessWidget {

4. const HelloWorld({Key? key}) : super(key: key);

5.

6. @override

7. Widget build(BuildContext context) { 8. return Scaffold(

9. appBar: AppBar(

12. body: const Center(

13. child: Text("Hello World"), 14. ),

15. );

16. } 17. }

Pada file main.dart kita modifikasi kembali pada bagian home menjadi

2. import 'hello_world.dart';

3.

6. } 7.

10.

11. @override

12. Widget build(BuildContext context) { 13. return const MaterialApp(

14. title: 'Perpustakaan', 15. home: HelloWorld(), 16. );

17. } 18. }

Pada bagian home, kita memanggil class HelloWorld yang telah kita buat sebelumnya pada file hello_world.dart

Jika kita perhatikan pada bagian body, terdapat Widget Center kemudian didalam Widget Center tersebut terdapat parameter child untuk meletakkan Widget lain didalam widget tersebut, dalam hal ini adalah Widget Text

Center(

child: Text('Hello World'), ),

Catatan : dalam Widget selain child, terdapat pula children dengan type data array yang

dimana kita dapat menempatkan beberapa Widget didalamnya contohnya pada Widget

Column dan Row

(47)

45 Untuk mempercepat dalam pembuatan class pada VSCode dapat dilakukan dengan mengetik st kemudian memilih stateless widget ataupun stateless widget kemudian ketikkan nama class yang diinginkan

Membuat Widget Column

Buat sebuah file dengan nama column_widget.dart didalam folder lib, kemudian ketikkan kode berikut

2.

3. class ColumnWidget extends StatelessWidget {

4. const ColumnWidget({Key? key}) : super(key: key);

5.

6. @override

9. appBar: AppBar(

10. title: const Text("Widget Column"), 11. ),

12. body: Column(

13. children: const [ 14. Text("Kolom 1"), 15. Text("Kolom 2"), 16. Text("Kolom 3"), 17. Text("Kolom 4") 18. ],

19. ), 20. );

21. } 22. }

(48)

46 Kemudian pada file main.dart ubah kodenya menjadi

2. import 'column_widget.dart';

3.

6. } 7.

10.

11. @override

12. Widget build(BuildContext context) { 13. return const MaterialApp(

14. title: 'Perpustakaan', 15. home: ColumnWidget(), 16. );

17. } 18. }

Dan hasilnya akan menjadi seperti berikut

Column biasanya digunakan untuk membuat Form

(49)

47 Membuat Widget Row

Untuk menampilkan Widget dalam posisi horizontal dapat menggunakan Widget Row. Buat sebuah file didalam folder lib dengan nama row_widget.dart, kemudian ketikkan kode berikut

2.

3. class RowWidget extends StatelessWidget {

4. const RowWidget({Key? key}) : super(key: key);

5.

6. @override

9. appBar: AppBar(

10. title: const Text("Widget Row"), 11. ),

12. body: Row(

13. children: const [ 14. Text("Row 1"), 15. Text("Row 2"), 16. Text("Row 3"), 17. Text("Row 4") 18. ],

19. ), 20. );

21. } 22. }

Kemudian seperti sebelumnya masukkan class RowWidget tersebut kedalam home pada

main.dart, seperti pada column widget sebelumnya dan hasilnya akan menjadi

(50)

48 StatelessWidget dan StatefullWidget

StatelessWidget adalah class widget yang propertinya immutable, artinya nilainya tidak bisa diubah, sedangkan StatefullWidget nilainya dapat berubah-ubah.

Contoh StatelessWidget :

1. class HelloWorld extends StatelessWidget {

2. const HelloWorld({ Key? key }) : super(key: key);

3.

4. @override

5. Widget build(BuildContext context) { 6. return Container(

7.

8. );

9. } 10. }

Contoh StatefullWidget

1. class HelloWorld extends StatefulWidget {

2. const HelloWorld({ Key? key }) : super(key: key);

3.

4. @override

5. _HelloWorldState createState() => _HelloWorldState();

6. } 7.

8. class _HelloWorldState extends State<HelloWorld> { 9. @override

10. Widget build(BuildContext context) { 11. return Container(

12.

13. );

14. } 15. }

(51)

49 BAB III : Membuat Halaman Mahasiswa

Membuat Form

Selanjutnya kita akan belajar membuat form pada flutter, agar lebih rapi untuk tampilan halaman akan kita kelompokkan dalam sebuah folder tersendiri, dalam hal ini kita membuat folder dengan nama ui didalam folder lib.

Kemudian didalam folder ui tersebut kita buat sebuah file dengan nama

mahasiswa_form.dart

(52)

50 Kemudian Ketikkan kode berikut

2.

3. class MahasiswaForm extends StatefulWidget {

4. const MahasiswaForm({Key? key}) : super(key: key);

5.

6. @override

7. State<MahasiswaForm> createState() => _MahasiswaFormState();

8. } 9.

10. class _MahasiswaFormState extends State<MahasiswaForm> { 11. @override

14. appBar: AppBar(

15. title: const Text("Form Mahasiswa"), 16. ),

17. body: SingleChildScrollView(

18. child: Column(

19. children: [ 20. TextField(

21. decoration: const InputDecoration(labelText: "NIM"), 22. ),

23. TextField(

24. decoration: const InputDecoration(labelText: "Nama"), 25. ),

26. TextField(

27. decoration: const InputDecoration(labelText: "Alamat"), 28. ),

29. ElevatedButton(onPressed: () {}, child: const Text("Simpan")) 30. ],

31. ), 32. ), 33. );

34. } 35. }

(53)

51 Ubah pada main.dart dengan memanggil class MahasiswaForm, sehingga hasilnya akan menjadi

Pemisahan Widget Kedalam fungsi-fungsi

Agar kode mudah dibaca dan dikembangkan, akan lebih baik jika widget-widget yang digunakan dipisahkan kedalam method/function tertentu, misalnya pada mahasiswa_form.dart terdapat widget seperti TextField dan ElevatedButton, pada widget tersebut akan kita pisahkan kedalam method tersendiri didalam class, sehingga menjadi seperti berikut

2.

5.

6. @override

8. } 9.

10. class _MahasiswaFormState extends State<MahasiswaForm> { 11. @override

14. appBar: AppBar(

18. child: Column(

19. children: [ 20. _txtFieldNim(), 21. _txtFieldNama(), 22. _txtFieldAlamat(), 23. _tombolSimpan() 24. ],

25. ), 26. ), 27. );

28. }

(54)

52

29.

30. _txtFieldNim() { 31. return TextField(

32. decoration: const InputDecoration(labelText: "NIM"), 33. );

34. } 35.

36. _txtFieldNama() { 37. return TextField(

38. decoration: const InputDecoration(labelText: "Nama"), 39. );

40. } 41.

42. _txtFieldAlamat() { 43. return TextField(

44. decoration: const InputDecoration(labelText: "Alamat"), 45. );

46. } 47.

48. _tombolSimpan() {

49. return ElevatedButton(onPressed: () {}, child: const Text("Simpan"));

50. } 51. }

Membuat Model Mahasiswa

Buat folder dengan nama model pada folder lib

(55)

53 Buat sebuah file dengan nama mahasiswa.dart pada folder model. Kemudian masukkan kode berikut

1. class Mahasiswa { 2. String? id;

3. String? nim;

4. String? nama;

5. String? alamat;

6.

7. Mahasiswa({this.id, this.nim, this.nama, this.alamat});

8. }

Membuat Detail Mahasiswa

Buat sebuah file dengan nama mahasiswa_detail.dart di dalam folder ui, kemudian ketikkan kode berikut

2. import '../model/mahasiswa.dart';

3.

4. class MahasiswaDetail extends StatefulWidget { 5. final Mahasiswa? mahasiswa;

6.

7. const MahasiswaDetail({Key? key, this.mahasiswa}) : super(key: key);

8.

9. @override

10. State<MahasiswaDetail> createState() => _MahasiswaDetailState();

11. } 12.

13. class _MahasiswaDetailState extends State<MahasiswaDetail> { 14. @override

17. appBar: AppBar(

18. title: const Text("Mahasiswa"), 19. ),

20. body: Column(

21. children: [

22. Text("NIM : " + widget.mahasiswa!.nim.toString()), 23. Text("Nama : ${widget.mahasiswa!.nama}"),

24. Text("Alamat : ${widget.mahasiswa!.alamat}"), 25. _tombolEditHapus()

26. ], 27. ), 28. );

29. } 30.

31. Widget _tombolEditHapus() { 32. return Row(

33. mainAxisSize: MainAxisSize.min, 34. children: [

35. ElevatedButton(

36. onPressed: () {},

37. child: const Text("Ubah"),

38. style: ElevatedButton.styleFrom(primary: Colors.green), 39. ),

40. const SizedBox(

41. width: 10.0, 42. ),

43. ElevatedButton(

44. onPressed: () {},

45. child: const Text("Hapus"),

(56)

54

46. style: ElevatedButton.styleFrom(primary: Colors.red), 47. )

48. ], 49. );

50. } 51. }

Membuat fungsi tombol simpan dan menampilkan data pada Detail Mahasiswa Buka kembali file mahasiswa_form.dart tambahkan attribute

final _nimTxtCtrl = TextEditingController();

final _namaTxtCtrl = TextEditingController();

final _alamatTxtCtrl = TextEditingController();

pada Class _MahasiswaFormState sehingga menjadi

3. import 'mahasiswa_detail.dart';

4.

7.

8. @override

10. } 11.

12. class _MahasiswaFormState extends State<MahasiswaForm> { 13. final _nimTxtCtrl = TextEditingController();

14. final _namaTxtCtrl = TextEditingController();

15. final _alamatTxtCtrl = TextEditingController();

16.

17. @override

20. appBar: AppBar(

24. child: Column(

31. ), 32. ), 33. );

34. } 35.

38. decoration: const InputDecoration(labelText: "NIM"), 39. );

40. } 41.

44. decoration: const InputDecoration(labelText: "Nama"), 45. );

46. } 47.

(57)

55

50. decoration: const InputDecoration(labelText: "Alamat"), 51. );

52. } 53.

55. return ElevatedButton(onPressed: () {}, child: const Text("Simpan"));

56. } 57. }

Pada setiap masing-masing TextField yang telah dibuat, data yang diinput dikirim ke attribute TextEditingController() yang telah kita buat sebelumnya

Pada fungsi _txtFieldNim() menjadi

_txtFieldNim() { return TextField(

decoration: const InputDecoration(labelText: "NIM"), controller: _nimTxtCtrl,

);

}

Pada fungsi _txtFieldNama() menjadi

_txtFieldNama() { return TextField(

decoration: const InputDecoration(labelText: "Nama"), controller: _namaTxtCtrl,

);

}

Pada fungsi _txtFieldAlamat() menjadi

_txtFieldAlamat() { return TextField(

decoration: const InputDecoration(labelText: "Alamat"), controller: _alamatTxtCtrl,

);

}

Kemudian pada fungsi _tombolSimpan() pada saat diklik akan mengirim data inputan dan menampilkan data tersebut pada MahasiswaDetail yang telah kita buat sebelumnya

_tombolSimpan() {

return ElevatedButton(

onPressed: () {

String nimMhs = _namaTxtCtrl.text;

String namaMhs = _namaTxtCtrl.text;

String alamatMhs = _alamatTxtCtrl.text;

// membuat instance class Mahasiswa

Mahasiswa mhs = Mahasiswa(nim: nimMhs, nama: namaMhs, alamat: alamatMhs);

// pindah ke halaman Detail Mahasiswa dan mengirim data mahasiswa Navigator.of(context).push(MaterialPageRoute(

builder: (context) => MahasiswaDetail ( mahasiswa: mhs,

)));

},

(58)

56

child: const Text('Simpan'));

}

Sehingga keseluruhan kode menjadi

4.

7.

8. @override

10. } 11.

12. class _MahasiswaFormState extends State<MahasiswaForm> { 13. final _nimTxtCtrl = TextEditingController();

14. final _namaTxtCtrl = TextEditingController();

15. final _alamatTxtCtrl = TextEditingController();

16.

17. @override

20. appBar: AppBar(

24. child: Column(

31. ), 32. ), 33. );

34. } 35.

38. decoration: const InputDecoration(labelText: "NIM"), 39. controller: _nimTxtCtrl,

40. );

41. } 42.

45. decoration: const InputDecoration(labelText: "Nama"), 46. controller: _namaTxtCtrl,

47. );

48. }

(59)

57

49.

52. decoration: const InputDecoration(labelText: "Alamat"), 53. controller: _alamatTxtCtrl,

54. );

55. } 56.

58. return ElevatedButton(

59. onPressed: () {

60. String nimMhs = _namaTxtCtrl.text;

61. String namaMhs = _namaTxtCtrl.text;

62. String alamatMhs = _alamatTxtCtrl.text;

63. // membuat instance class Mahasiswa 64. Mahasiswa mhs =

65. Mahasiswa(nim: nimMhs, nama: namaMhs, alamat: alamatMhs);

66. // pindah ke halaman Detail Mahasiswa dan mengirim data mahasiswa 67. Navigator.of(context).push(MaterialPageRoute(

68. builder: (context) => MahasiswaDetail(

69. mahasiswa: mhs, 70. )));

71. },

72. child: const Text("Simpan"));

73. } 74. }

(60)

58 Membuat ListView Mahasiswa

Buat sebuah file dengan nama mahasiswa_page.dart di dalam folder ui, kemudian ketikkan kode berikut

2.

3. class MahasiswaPage extends StatefulWidget {

4. const MahasiswaPage({Key? key}) : super(key: key);

5.

6. @override

7. State<MahasiswaPage> createState() => _MahasiswaPageState();

8. } 9.

10. class _MahasiswaPageState extends State<MahasiswaPage> {

(61)

59

11. @override

14. appBar: AppBar(

15. title: const Text("Data Mahasiswa"), 16. ),

17. body: ListView(

18. children: const [ 19. Card(

20. child: ListTile(

21. title: const Text("Ade Rahul"), 22. subtitle: const Text("12200655"), 23. ),

24. ), 25. Card(

27. title: const Text("Mimi Mariani"), 28. subtitle: const Text("12200910"), 29. ),

30. ), 31. Card(

33. title: const Text("Refaldo ismail"), 34. subtitle: const Text("12200682"), 35. ),

36. ), 37. Card(

39. title: const Text("Fitri Indriyani"), 40. subtitle: const Text("12200651"), 41. ),

42. ) 43. ], 44. ), 45. );

46. } 47. }

Kemudian daftarkan MahasiswaPage pada main.dart, dan hasilnya akan menjadi seperti

berikut

(62)

60 Membuat Route (Pindah Halaman)

Buka file mahasiswa_page.dart, kemudian modifikasi pada bagian AppBar menjadi seperti berikut

AppBar(

title: const Text("Data Mahasiswa"), actions: [

GestureDetector(

// menampilkan icon +

child: const Icon(Icons.add), //pada saat icon + di tap onTap: () async {

//berpindah ke halaman MahasiswaForm Navigator.push(

context,

MaterialPageRoute(

builder: (context) => const MahasiswaForm()));

}) ], )

GestureDetector adalah widget yang digunakan untuk mendeteksi gesture pada widget seperti gesture ontap, doubletab dan lain-lain.

Secara Keseluruhan kode tersebut akan menjadi

2. import 'mahasiswa_form.dart';

3.

6.

7. @override

9. } 10.

(63)

61

11. class _MahasiswaPageState extends State<MahasiswaPage> { 12. @override

15. appBar: AppBar(

16. title: const Text("Data Mahasiswa"), 17. actions: [

18. GestureDetector(

19. // menampilkan icon +

20. child: const Icon(Icons.add), 21. // pada saat icon + di tap 22. onTap: () async {

23. // berpindah ke halaman MahasiswaForm 24. Navigator.push(context,

25. MaterialPageRoute(builder: (context) => MahasiswaForm()));

26. }, 27. ) 28. ], 29. ),

30. body: ListView(

31. children: const [ 32. Card(

34. title: const Text("Ade Rahul"), 35. subtitle: const Text("12200655"), 36. ),

37. ), 38. Card(

40. title: const Text("Mimi Mariani"), 41. subtitle: const Text("12200910"), 42. ),

43. ), 44. Card(

46. title: const Text("Refaldo ismail"), 47. subtitle: const Text("12200682"), 48. ),

49. ), 50. Card(

52. title: const Text("Fitri Indriyani"), 53. subtitle: const Text("12200651"), 54. ),

55. ) 56. ], 57. ), 58. );

59. } 60. }

Hasilnya akan muncul icon + pada bagian kanan AppBar, jika diklik akan membuka

MahasiswaForm

(64)

62 Pemisahan Widget ke dalam Class StatelessWidget

Selain pemisahan widget ke dalam suatu function/method, pemisahan juga dapat dilakukan menggunakan class StatelessWidget, pada contoh kali ini kita akan memisahkan Card dengan membuat class tersendiri. Buat sebuah file mahasiswa_item.dart pada folder ui, kemudian buat ketikkan kode berikut

3.

4. class MahasiswaItem extends StatelessWidget { 5. final Mahasiswa? mahasiswa;

6.

7. const MahasiswaItem({Key? key, this.mahasiswa}) : super(key: key);

8.

9. @override

10. Widget build(BuildContext context) { 11. return Card(

13. title: Text(mahasiswa!.nama.toString()),

(65)

63

14. subtitle: Text(mahasiswa!.nim.toString()), 15. ),

16. );

17. } 18. }

Kemudian sertakan mahasiswa_item pada mahasiswa_page.dart menjadi

2. import 'mahasiswa_form.dart';

3. import 'mahasiswa_item.dart';

5.

8.

9. @override

11. } 12.

13. class _MahasiswaPageState extends State<MahasiswaPage> { 14. @override

17. appBar: AppBar(

18. title: const Text("Data Mahasiswa"), 19. actions: [

20. GestureDetector(

21. // menampilkan icon +

22. child: const Icon(Icons.add), 23. // pada saat icon + di tap 24. onTap: () async {

25. // berpindah ke halaman MahasiswaForm 26. Navigator.push(context,

27. MaterialPageRoute(builder: (context) => MahasiswaForm()));

28. }, 29. ) 30. ], 31. ),

32. body: ListView(

33. children: [ 34. MahasiswaItem(

35. mahasiswa: Mahasiswa(

36. nim: "12200655", 37. nama: "Ade Rahul",

38. alamat: "Jln Perdamaian No 13, Pontianak")), 39. MahasiswaItem(

41. nim: "12200910", 42. nama: "Mimi Mariani", 43. alamat:

44. "Jln Adisucipto Komp Teluk Mulus Blok A1, Pontianak")), 45. MahasiswaItem(

47. nim: "12200682",

48. nama: "Refaldo ismail", 49. alamat:

50. "Jln Sungai Raya Dalam Komp Batara Blok A10, Pontianak")), 51. MahasiswaItem(

53. nim: "12200651",

54. nama: "Fitri Indriyani",

55. alamat: "Jln Pangeran Nata Kusuma No 126, Pontianak")), 56. ],

57. ),

(66)

64

58. );

59. } 60. }

Menampilkan Detail Mahasiswa saat ListView diklik

Pada bagian ini kita akan menambahkan sebuah fungsi dimana saat salah satu ListView Mahasiswa di klik, maka akan membuka halaman Detail Mahasiswa yang telah kita buat sebelumnya

Kita akan memodifikasi Class MahasiswaItem pada file mahasiswa_item.dart. Untuk

menambahkan widget diatas widget yang telah dibuat dapat dilakukan dengan cara, arahkan kursor pada widget, misalnya dalam hal ini adalah widget Card

Pada bagian kiri akan muncul logo lampu, kemudian klik lampu tersebut dan pilih widget yang

ingin ditambahkan atau dalam hal ini kita akan memilih Warp with widget..

(67)

65 Kemudian akan menjadi

Setelah itu ubah widget menjadi GestureDetector dan kita juga menambahkan onTap yang kemudian akan membuka halaman Detail Mahasiswa, sehingga kode untuk Class

MahasiswaItem menjadi

4.

5. class MahasiswaItem extends StatelessWidget { 6. final Mahasiswa? mahasiswa;

7.

8. const MahasiswaItem({Key? key, this.mahasiswa}) : super(key: key);

9.

10. @override

11. Widget build(BuildContext context) { 12. return GestureDetector(

13. child: Card(

15. title: Text(mahasiswa!.nama.toString()), 16. subtitle: Text(mahasiswa!.nim.toString()), 17. ),

18. ),

19. onTap: () { 20. Navigator.push(

21. context,

22. MaterialPageRoute(

23. builder: (context) => MahasiswaDetail(

24. mahasiswa: mahasiswa, 25. )));

26. }, 27. );

28. } 29. }

(68)