LAPORAN PRAKTIKUM PEMROGRAMAN BERORIENTASI OBJEK LANJUT

(1)

LAPORAN PRAKTIKUM

PEMROGRAMAN BERORIENTASI OBJEK LANJUT

DOSEN PENGAMPU :

BAPAK TEGUH TAMRIN, S.Kom, M.Kom

DI SUSUN OLEH :

Nama : Reihan Saputra NIM : (211240001100)

PROGAM STUDI TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS ISLAM NAHDLATUL ULAMA JEPARA

TAHUN AKADEMIK 2022/2023

(2)

KATA PENGANTAR

Puji syukur kita panjatkan kehadirat Allah Swt, yang telah memberikan rahmat dan hidayah-nya sehingga saya dapat menyelesaikan tugas yang berjudul “Laporan Pemrograman Berorientasi Objek Lanjut” ini tepat pada waktunya.

Adapun tujuan penulisan dari laporan ini adalah untuk memenuhi tugas pada mata kuliah Pemrograman Berorientasi Objek Lanjut. Selain itu, laporan ini juga bertujuan untuk menambah wawasan tentang progam-progam dart bagi para pembaca dan juga penulis.

Terlebih dahulu, saya mengucapkan terima kasih kepada Bapak Teguh Tamrin, S.Kom, M.Kom selaku Dosen Pemrograman Berorientasi Objek Lanjut yang telah memberikan tugas ini sehingga dapat menambah pengetahuan dan wawasan sesuai dengan bidang studi yang saya tekuni ini.

Saya juga mengucapkan terima kasih kepada semua pihak yang tidak dapat saya sebutkan semua, terima kasih atas bantuannya sehingga saya dapat menyelesaikan tugas ini.

Kemudian, saya menyadari bahwa tugas yang saya tulis ini masih jauh dari kata sempurna. Oleh karena itu, kritik dan saran yang membangun kami butuhkan demi kesempurnaan laporan ini.

Jepara, 5 Januari 2023

Penulis

(3)

DAFTAR ISI

HALAMAN JUDUL...1

KATA PENGANTAR...2

DAFTAR ISI...3

PERTEMUAN 1...5

PERTEMUAN 2...5

2.1 Pengertian Flutter...5

2.2 Aplikasi apa saja yang dibutuhkan untuk install Flutter ?...5

2.3 Download Flutter dan Aplikasi pendukung...5

2.4 Install Extension Flutter di Visual Studio Code...8

2.5 Buat Aplikasi Pertama dengan Flutter...8

2.6 Membuat Form di Flutter...9

2.7 Komponen Umum pada Form...10

2.8 TextFormField Widget...10

2.9 Label dan Placeholder pada TextFormField...10

2.1.1 AutoFocus...10

2.1.2 Password...11

2.1.3 keyboardType...11

2.1.4 Validation...11

2.1.5 Check Box dan Switch Button...13

2.1.6 widget tersebut berupa boolean (true / false)...14

2.1.7 Slider Widget...14

PERTEMUAN 3...22

PERTEMUAN 4...22

4.1 StatelessWidget dan StatefulWidget...22

4.2 StatelessWidget...23

4.3 Tugas Modifikasi Statefull Widget:...27

PERTEMUAN 5...31

PERTEMUAN 6...31

Pertemuan 7...32

7.1 Widget Row...32

7.2 Widget Column...33

7.3 Tugas 2 Pertemuan 7 PBOL...34

(4)

7.4 Tugas 2 Pertemuan 7...46

PERTEMUAN 8...47

PERTEMUAN 9...47

9.1 Pengertian Shared Preferences...47

9.2 Langkah Membuat Program Membuat Shared Preferences...47

PERTEMUAN 10-15...56

10.1 Langkah-langkah pembuatan program :...56

10.1 Hasil Program...68

(5)

PERTEMUAN 1

Kontrak Kuliah dan Presensi Kehadiran

PERTEMUAN 2

2.1 Pengertian Flutter

Apa itu Flutter ? Flutter adalah sebuah framework open-source yang dikembangkan oleh Google untuk membuat aplikasi mobile Android dan iOS dengan satu basis code. Dirilis pada Mei 2017 ditulis menggunakan bahasa pemrograman Dart. Flutter dirancang untuk memberi kemudahan kepada para programmer mobile dalam membangun aplikasi mobile multi platform dengan performa “native” dengan cepat.

2.2 Aplikasi apa saja yang dibutuhkan untuk install Flutter ?

Ada beberapa software yang harus kita unduh dan install terlebih dahulu agar Flutter dapat berjalan dengan baik. Berikut:

 Java Development Kit (JDK);

 Android Studio;

 Android SDK;

 Flutter SDK;

 IDE / Teks Editor (disini kita akan menggunakan Visual Studio Code)

2.3 Download Flutter dan Aplikasi pendukung

Download Java SE Development Kit.

Silahkan download Java SE Development Kit versi terbaru. Terdapat dua versi (zip dan exe), silahkan pilih versi exe saja agar mudah dalam proses installasi dan simpan di folder C:\src.

Lalu install sampai selesai.

Download aplikasi Android Studio

Download dan simpan juga di folder C:\src. Lalu install sampai selesai.

Download Visual Studio Code

Visual studio code merupakan salah satu IDE atau text editor yang disarankan oleh pihak

Flutter. Bagi yang komputernya sudah ada VsCode silahkan lewati tahapan ini. Bagi yang

belum silahkan download lalu install sampai selesai.

(6)

Download Flutter

Terakhir download Flutter untuk Windows di halaman https://flutter.dev/docs/get- started/install/windows dan simpan juga di folder src

Install Flutter

Untuk install flutter lakukan tahapan dibawah ini:

1. Buka ke folder C:\src

2. Extract Flutter zip file dengan cara klik kanan pada file zip lalu pilih “extract here”

sehingga struktur foldernya akan menjadi seperti ini C:\src\flutter

3. setelah selesai extract, selanjutnya kita ke menu search bar di pojok kiri windows lalu ketikan “ENV” lalu tekan enter

4. Tekan tombol Enviroment Variables di pojok kanan bawah dialog

5. pada table User variables for …. pilih Path lalu klik Edit (Jika tidak ada pilihan Path maka

anda dapat membuat baru dengan cara memilih tombol (New)

(7)

6. Klik tombol New lalu ketikan C:\src\flutter\bin 7. Klik Ok, lalu Restart Komputer

Untuk mengecek apakah flutter kita sudah terinstall dengan baik, silahkan buka CMD lalu

ketikan “Flutter”. Jika muncul pesan error seperti “not recognize ..” harap cek kembali

tahapan diatas dan ulangi sampai berhasil.

(8)

2.4 Install Extension Flutter di Visual Studio Code

1. Buka Aplikasi Visual Studio Code

2. klik menu Extension yang ada di kiri toolbar 3. lalu ketikan “Flutter” dan install

4. untuk mempermudah pekerjaan kita nanti ada baiknya install juga “Flutter Widgets Snippet”

2.5 Buat Aplikasi Pertama dengan Flutter

masih di text editor visual studio code, untuk membuat projek flutter caranya yaitu :

1. Klik menu view -> Command Palette atau cara lebih mudahnya tekan tombol Ctrl+Shift+P 2. Lalu ketikan “Flutter” dan pilih Flutter: New Project”

3. masukan nama projeknya contoh “belajar_flutter” setelah itu tekan Enter dan pilih lokasi tempat menyimpan projek tersebut

4. Tekan F5 untuk menjalankan Aplikasi Flutter Pertama kita lalu pilih Emulator yang akan kita gunakan.

2.6 Membuat Form di Flutter

Form merupakan hal yang umum ditemukan dan penting dalam sebuah aplikasi mobile. Penggunaan form juga sangat beragam, dari mulai untuk form login,register, kolom komentar, halaman order, dan

(9)

banyak lagi. Karena pentingnyamemahami penggunaan form pada sebuah aplikasi mobile, untuk itu dalam kesempatan ini kita akan membahas cara membuat form di Flutter menggunakan Form widget beserta komponen dan widget di dalamnya Form widget sendiri berfungsi untuk mempermudah dalam proses pembuatan dan memberi keamanan lebih pada aplikasi flutter seperti validasi, dan aksi lainnya yang umum terdapat pada sebuah form. Contoh penggunaan form

widget seperti dibawah:

import 'package:flutter/material.dart';

void main() {

runApp(MaterialApp(

title: "Latihan Form Flutter", home: LatihanForm(), ));

}

class LatihanForm extends StatefulWidget { @override

_LatihanFormState createState() => _LatihanFormState();

}

class _LatihanFormState extends State<LatihanForm> { final _formKey = GlobalKey<FormState>();

@override

Widget build(BuildContext context) { return Scaffold(

appBar: AppBar(

title: Text("PBO LANJUT"), ),

body: Form(

key: _formKey, child: Container(

padding: EdgeInsets.all(20.0), child: Column(

children: [

// tambahkan komponen seperti input field disini ],),),),

);}}

Perhatikan potongan kode seperti dibawah ini final _formKey = GlobalKey<FormState>();

Variable _formKey berfungsi sebagai identifier untuk sebuah form yang nantinya dapat kita gunakan untuk validasi, dll. Umumnya setiap form memiliki satu unik key jadi apabila anda memiliki dua form yang berbeda maka buat lah kembali form key dengan nama variable berbeda. misal _formKey2

2.7 Komponen Umum pada Form

Banyak sekali pilihan flutter widget yang dapat digunakan dalam sebuah form seperti

TextFormField, CheckBox, RadioButton, Slider Widget, dan Button.

(10)

2.8 TextFormField Widget

TextFormField berfungsi sebagai input field, biasanya digunakan untuk input nama lengkap, searching, email, password dan input lainnya. Untuk contoh kode penggunaannya seperti dibawah ini

TextFormField();

2.9 Label dan Placeholder pada TextFormField

Untuk menambahkan label, placeholder atau icon pada TextField, kita dapat menggunakan properti decoration. contohnya seperti ini:

TextFormField(

decoration: new InputDecoration(

hintText: "Masukan Nama Lengkap Anda", labelText: "Nama Lengkap",

icon: Icon(Icons.people)), ),

masih pada properti decoration, kita juga dapat menambah border, contohnya seperti ini :

child: TextFormField(

hintText: "masukan nama lengkap anda", labelText: "Nama Lengkap",

icon: Icon(Icons.people), border: OutlineInputBorder(

borderRadius: new BorderRadius.circular(5.0)), ),),

2.1.1 AutoFocus

Cara mengaktifkan auto fokus pada text field yaitu dengan men-set properti autofocus menjadi true

2.1.2 Password

Untuk merubah tampilan TextFormField atau TextField menjadi password, bisa dengan menggunakan properti obscureText dan set valuenya

menjadi true

(11)

2.1.3 keyboardType

Kita juga dapat merubah tampilan tipe keyboard saat textFormField aktif, caranya dengan menggunakan properti keyboardType. Contoh :

Lengkapnya seperti ini:

Untuk memunculkan pilihan yang tersedia silahkan tekan CTRL + space

keyboardType: TextInputType.phone, decoration: new InputDecoration(

hintText: "contoh: 0812xxxxxxx", labelText: "Nomor Telp",

icon: Icon(Icons.phone), border: OutlineInputBorder(

borderRadius: new BorderRadius.circular(5.0)), ),)

2.1.4 Validation

Untuk menambahkan validasi pada TextFormField cukup mudah, caranya yaitu seperti ini child: TextFormField(

decoration: new InputDecoration(

borderRadius: new BorderRadius.circular(5.0)), ),

validator: (value) { if (value!.isEmpty) {

return 'Nama tidak boleh kosong';

}

return null;

},)

Kode value!.isEmpty untuk mengecek apakah nilai pada field tersebut kosong atau tidak.

Kita juga dapat menambah kondisi lain sesuai kebutuhan seperti menggunakan regex untuk mengecek format email dan sejenisnya. Properti validation akan aktif apabila fungsi

validate() pada formKey di trigger _formKey.currentState.validate() Selengkapnya dislide

selanjutnya :

(12)

void main() {

runApp(MaterialApp(

}

class _LatihanFormState extends State<LatihanForm> { final _formKey = GlobalKey<FormState>();

@override

appBar: AppBar(

title: Text("PBO"), ),

body: Form(

padding: EdgeInsets.all(20.0), child: Column(children: [

// tambahkan komponen seperti input field disini TextFormField(

}

return null;

}, ) ]))));

} }

appBar: AppBar(

title: Text("PBO"), ),

body: Form(

padding: EdgeInsets.all(20.0),

(13)

child: Column(

children: [

// tambahkan komponen seperti input field disini TextFormField(

}

return null;

}, ),

ElevatedButton(

child: Text(

"Submit Form",

style: TextStyle(color: Colors.white), ),

onPressed: () {

if (_formKey.currentState!.validate()) {}

}, ) ], ), ), ), );

}

2.1.5 Check Box dan Switch Button

Pada flutter, untuk membuat check box bisa menggunakan Checkbox widget. Dan untuk Switch button menggunakan Switch Widget. Nilai atau value untuk kedua

Checkbox(

value: true,

onChanged: (value) {}, ),

// contoh Switch Switch(

value: true,

onChanged: (value) {},

),

(14)

2.1.6 widget tersebut berupa boolean (true / false).

Apabila membutuhkan label dan subtitle, agar lebih mudah dapat menggantinya menggunakan CheckboxListTile atau SwitchListTile widget

CheckboxListTile(

title: Text('Widget Dasar Flutter'), subtitle: Text('Dart, widget, http'), value: true,

activeColor: Colors.deepPurpleAccent, onChanged: (value) {},

),

SwitchListTile(

title: Text('Bahasa Programming'),

subtitle: Text('Dart, Nodejs, PHP, Java, dll'), value: true,

activeTrackColor: Colors.pink[100], activeColor: Colors.red,

onChang

properti activeColor untuk merubah warna widget saat value true. Agar widget ini dapat terlihat bekerja, maka nilai pada key value harus bersifat dinamis (di simpan pada state)

2.1.7 Slider Widget

Sesuai namanya, untuk membuat input slider pada flutter silahkan gunakan Slider Widget.

Nilai pada widget ini berupa Number (double). Secara sederhana

penggunaanya seperti ini : Slider(

value: 25, min: 0, max: 100,

onChanged: (value) {}, ),

Sama seperti checkbox widget, agar dapat di-slide kita perlu merubah nilai pada properti value menjadi dinamis yaitu dengan menyimpan pada state. Caranya Buat

variable baru, contoh kita beri nama nilaiSlider. Lalu gunakan fungsi setState pada properti onChange. Kurang lebih seperti dibawah ini :

double nilaiSlider = 25;

(15)

Slider(

value: nilaiSlider, min: 0,

max: 100,

onChanged: (value) { setState(() {

nilaiSlider = value;

});}, ),

Tugas Memodifikasi TextField :

void main() {

runApp(MaterialApp(

}

class _LatihanFormState extends State<LatihanForm> { bool _isHidePass = true;

int _value = 0;

bool _termsChecked = false;

int radioValue = -1;

final TextEditingController Mycon = TextEditingController();

String hasil = "";

get value => null;

void _togglePass() { setState(() {

_isHidePass = !_isHidePass;

});

}

final _formKey = GlobalKey<FormState>();

@override

appBar: AppBar(

title: Text("Project 1 - Text Field"), ),

body: Form(

key: _formKey,

(16)

child: Container(

// decoration: BoxDecoration(

// image:

// DecorationImage(image: AssetImage('assets/pngwing.png'))), padding: EdgeInsets.all(20.0),

child: Column(

children: [ // nama FormText(

prefix: "nama :", ikon: Icon(

Icons.person, size: 35, ),

labelText: "Masukkan nama anda :", validText: "Nama tidak boleh kosong", ),

// Password Container(

margin: EdgeInsets.only(bottom: 20.0), child: TextFormField(

return "Password tidak boleh kosong";

} else if (value.length < 8) {

return "Password harus lebih dari 8";

} else { Null;

} },

// (value) =>

// (value!.isEmpty || ) ? "Password tidak boleh kosong" : null, obscureText: _isHidePass,

// obscuringCharacter: "*", showCursor: true,

//style

style: TextStyle(fontSize: 15), //decoration

decoration: InputDecoration(

icon: Icon(

Icons.lock, size: 35, ),

suffixIcon: GestureDetector(

onTap: () { _togglePass();

},

child: Icon(

_isHidePass

? Icons.visibility_off : Icons.visibility,

color: _isHidePass ? Colors.grey : Colors.blue,

(17)

), ),

isDense: true,

labelText: "Masukkan password : ", border: OutlineInputBorder(

borderRadius: BorderRadius.circular(10))), ),

), // Email Container(

showCursor: true, keyboardType: TextInputType.phone, validator: (value) => validateEmail(value),

// //style

icon: Icon(

Icons.email, size: 35, ),

prefixText: "Email : ",

hintStyle: TextStyle(color: Colors.grey), labelText: "Masukkan email : ",

border: OutlineInputBorder(

),

// Nomer handphone Container(

showCursor: true, keyboardType: TextInputType.phone, validator: (value) => validTelp(value),

controller: Mycon, onChanged: (value) {}, onFieldSubmitted: (value) { hasil = value;

setState(() {});

},

// validator: (value) {

// Pattern patttern = RegExp(r'(^(?:[0 - 9])$)');

// RegExp regex = new RegExp(patttern);

// return (!regex.hasMatch(value)) ? "masukan nomor" : null;

// }, // //style

icon: Icon(

Icons.phone, size: 35,

(18)

),

prefixText: "No Telp : ",

hintStyle: TextStyle(color: Colors.grey), labelText: "Masukkan no telepon : ", border: OutlineInputBorder(

),

// Alamat FormText(

prefix: "Alamat : ", ikon: Icon(

Icons.location_pin, size: 35,

),

labelText: "Masukkan Alamat :", validText: "Alamat tidak boleh kosong", ),

Container(

child: Row(

mainAxisAlignment: MainAxisAlignment.start, children: [

Icon(

Icons.female, size: 37,

color: Color.fromARGB(255, 121, 118, 118), ),

Container(

padding: EdgeInsets.only(left: 20), child: Text(

"Jenis Kelamin :", style: TextStyle(

fontSize: 18,

color: Color.fromARGB(255, 121, 118, 118)), ),

), ]), ),

Container(

padding: EdgeInsets.only(left: 60), child: Column(

RadioListTile(

value: 1,

groupValue: _value, onChanged: (value) { setState(() {

_value = 1;

});

},

title: Text(

"Laki-Laki", style:

(19)

TextStyle(color: Color.fromARGB(255, 94, 92, 92)), ),

),

RadioListTile(

value: 2,

groupValue: _value, onChanged: (value) { setState(() {

_value = 2;

});

},

title: Text(

"Perempuan", style:

TextStyle(color: Color.fromARGB(255, 94, 92, 92)), ),

) ], ), ),

ElevatedButton(

child: Text(

"Submit Form",

onPressed: () {

if (_formKey.currentState!.validate()) {}

}, ),

Text(hasil) ],

), )), );

}

validateEmail(String? value) { String pattern =

r"^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]"

r"{0,253}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]"

r"{0,253}[a-zA-Z0-9])?)*$";

RegExp regex = RegExp(pattern);

if (value == null || value.isEmpty || !regex.hasMatch(value)) return 'Masukkan email yang benar';

else

return null;

}

validTelp(String? value) { String pattern = r"^[0-9]";

RegExp regex = RegExp(pattern);

if (value == null || value.isEmpty || !regex.hasMatch(value)) return 'Masukkan No telepon yang benar';

else

(20)

return null;

} }

class FormText extends StatelessWidget { const FormText(

{Key? key,

required this.prefix, required this.ikon, required this.labelText, required this.validText}) : super(key: key);

final String prefix;

final String labelText;

final String validText;

final Icon ikon;

@override

Widget build(BuildContext context) { return Container(

// validator: (value) => (value!.isEmpty) ? validText : null, showCursor: true,

//style

icon: ikon,

prefixText: prefix,

hintStyle: TextStyle(color: Colors.grey), labelText: labelText,

border:

OutlineInputBorder(borderRadius: BorderRadius.circular(10))), ),

);

} }

Hasil :

(21)

PERTEMUAN 3

(22)

Project 1 input

PERTEMUAN 4

4.1 StatelessWidget dan StatefulWidget

Seperti yang kita tahu jantung dari aplikasi Flutter adalah widget. Sebagian besar yang ada pada Flutter merupakan widget. Membuat tombol, menampilkan gambar, text, dan membuat tampilan berada di tengah pada Flutter semuanya menggunakan widget. Kita juga dapat membuat widget sendiri untuk dapat digunakan lain waktu ataupun dibagikan kepada Flutter developer lain (dalam bentuk packages).

Widget pada Flutter memiliki dua jenis, yaitu StatelessWidget dan StatefulWidget. Sebagai developer Flutter, kita harus memahami betul kedua jenis widget tersebut, maka pada bagian ini kita akan mempelajari apa itu StatelessWidget dan StatefulWidget.

Apa itu State?

Sebelum membahas kedua jenis widget tersebut, kita harus berkenalan terlebih dahulu dengan istilah State. Kenapa demikian? Widget kita akan terus berurusan dengan State. Lalu apa itu State?

Untuk teman-teman dengan background frontend web developer, tentu tak akan asing dengan istilah State ini, terutama menggunakan framework ReactJS. Tetapi untuk Kalian

tanpa background tersebut tidak perlu risau. State tidaklah sulit untuk dimengerti. Jadi State

adalah data yang ada pada suatu widget. Widget menyimpan data yang nantinya dapat

berubah sesuai interaksi pengguna.

(23)

Karena Flutter menggunakan paradigma OOP (Object-Oriented Programming), state biasanya menjadi suatu properti dari sebuah class. Contohnya sebagai berikut:

class ContohWidget extends StatelessWidget { final String _judul

...

}

Variabel _judul di atas merupakan contoh pendeklarasian state pada suatu widget.

4.2 StatelessWidget

Setelah mengenal apa itu state, maka yang pertama kita akan bahas adalah StatelessWidget.

StatelessWidget adalah widget yang nilai state-nya tidak dapat berubah (immutable) maka widget tersebut lebih bersifat statis dan memiliki interaksi yang terbatas

Sekarang kita akan membuat sebuah Widget sederhana:Widget di atas merupakan sebuah widget untuk membuat Heading (sebuah text yang digunakan untuk judul).Buat projek baru lalu Kita akan panggil widget yang telah diubah ke kode projek tersebut.

(24)

Kita coba ubah widget Text yang menampilkan

"Hello world!" dengan widget Heading yang kita buat.

Maka ketika kita ubah Text dengan widget Heading, hasilnya akan berubah. Tulisan "Hello world!" jadi lebih besar.

(25)

Sesuai definisi StatelessWidget, state-nya tidak dapat berubah (immutable), maka state yang ada di dalam kelas tersebut harus dibuat final. Nilainya hanya dapat diisi melalui constructor class-nya.

Misalnya kita coba membuat contoh StatefulWidget sederhana:

Letakkan kode di atas setelah StatelessWidget Heading yang telah kita buat sebelumnya lalu panggil StatefulWidget BiggerText pada Projek kita.

(26)

(27)

Hasilnya menjadi seperti Ini :

Ketika tombol "Perbesar" ditekan, text "Hello world!" akan membesar karena state _textSize diubah nilainya. Mengubah nilai state harus dilakukan pada fungsi setState seperti berikut:

4.3 Tugas Modifikasi Statefull Widget:

void main() { runApp(MyApp());

}

class MyApp extends StatefulWidget {

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

@override

State<MyApp> createState() => _MyAppState();

}

class _MyAppState extends State<MyApp> {

TextEditingController _mycon = TextEditingController();

double _number = 40;

bool _cek = false;

String _text = "Hallo Dunia!!!";

String _value = "";

List<Widget> _listText = [];

void _addtext() { setState(() {

_listText.add(_textWidget());

(28)

});

}

void tekanPerbesar() { setState(() {

_number = _number + 5;

});

}

void tekanPerkecil() { setState(() {

_number = _number - 5;

});

}

@override

Widget build(BuildContext context ) { return MaterialApp(

home: Scaffold(

appBar: AppBar(

title: Text("Submit button"), flexibleSpace: Container(

decoration: BoxDecoration(

gradient: LinearGradient(

colors: [Color(0xff0096ff), Color(0xff6610f2)], begin: FractionalOffset.topLeft,

end: FractionalOffset.topRight)), ),

),

body: Container(

child: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center, children: [

_textWidget(),

Padding(padding: EdgeInsets.only(bottom: 10)), Flexible(

child: SizedBox(

width: 500, height: 400,

child: ListView.builder(

itemCount: _listText.length,

itemBuilder: (_, index) => _listText[index]), )),

Row(

SizedBox(

child: ElevatedButton(

onPressed: () { tekanPerbesar();

},

child: Text(

(29)

"Perbesar",

style: TextStyle(fontSize: 17), ),

style: ElevatedButton.styleFrom(primary: Colors.teal), ),

),

Padding(padding: EdgeInsets.only(left: 20)), SizedBox(

child: ElevatedButton(

onPressed: () { tekanPerkecil();

},

child: Text(

'Perkecil',

style: ElevatedButton.styleFrom(primary: Colors.orange), ),

), ], ),

Padding(padding: EdgeInsets.only(bottom: 10)), SizedBox(

controller: _mycon, showCursor: true, onChanged: (value) { setState(() {

_text = value;

});

},

onFieldSubmitted: (value) { setState(() {

_addtext();

});

},

prefixText: "input text : ",

hintStyle: TextStyle(color: Colors.grey), labelText: "Ganti text : ",

), ], ),

(30)

), ),

floatingActionButton: FloatingActionButton(

onPressed: _addtext, child: Icon(Icons.add), ),

), );

}

Widget _textWidget() { return Text(

_text, style:

TextStyle(fontSize: _number, color: Color.fromARGB(255, 71, 70, 70)), );}}

Hasil :

(31)

PERTEMUAN 5

Mengerjakan Project 2

PERTEMUAN 6

Pertemuan 7

Row dan Column 7.1 Widget Row

Widget Row merupakan suatu widget yang digunakan untuk membuat widget- widget tersusun berjajar secara horizontal. Row memiliki sintaks seperti berikut:

Row(

children : <Widget> [

//Disini Diisi dengan Widget-widget ],)

Untuk membuat widget-widget berjajar secara horizontal kita harus memasukkan widget-widget tersebut ke dalam parameter children. Parameter children berisi kumpulan atau list dari widget karena kita dapat menyusun beberapa widget sekaligus di dalamnya. Jika mengacu pada contoh tombol-tombol di atas kodenya seperti berikut:

Row(

mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[

Icon(Icons.share), Icon(Icons.thumb_up), Icon(Icons.thumb_down), ],)

Dengan Kode Seperti Ini kita aakan menghasilkan output dengan tampilan

seperti dibawah ini

(32)

Kita juga bisa mengubah posisi icon diatas dengan menggunakan mainAxisAlignment, Untuk lebih jelasnya mengenai jenis-jenisnya ada pada tampilan dibawah ini

7.2 Widget Column

Kebalikan dari Row, Column merupakan suatu widget yang digunakan untuk membuat widget-widget tersusun berjajar secara vertikal. Column memiliki sintaks mirip dengan Row, seperti berikut:

Column(

children : <Widget> [

//Disini Diisi dengan Widget-widget ],

)

Contoh penerapan dari Widget Column seperti berikut :

Column(

children: <Widget>[

Text('Sebuah Judul',

style: TextStyle(fontSize: 32, fontWeight:

FontWeight.bold),),

Text('Lorem ipsum dolor sit amet'), ],)

(33)

Hasil dari kode Widget Column ada pada tampilan dibawah ini :

7.3 Tugas 2 Pertemuan 7 PBOL

import 'dart:ui';

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

class MyApp extends StatelessWidget { @override

Widget build(BuildContext context) { return MaterialApp(

title: 'Tugas 3 (row-column)', debugShowCheckedModeBanner: false, theme: ThemeData(

primarySwatch: Colors.lightGreen, ),

home: Scaffold(

body: ListView(

children: <Widget>[

Row(

mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[

Container(

margin: EdgeInsets.only(top: 20), height: 150,

width: 700,

padding: EdgeInsets.only(top: 20, left: 50, right: 50),

(34)

color: Color.fromARGB(255, 178, 77, 92), borderRadius: BorderRadius.only(

topLeft: Radius.circular(20), bottomLeft: Radius.circular(20), topRight: Radius.circular(20), bottomRight: Radius.circular(20)), ),

child: Row(

children: <Widget>[

Column(

children: [ Text(

'Doni Collection',

textAlign: TextAlign.left, style: TextStyle(

fontSize: 35,

fontWeight: FontWeight.bold, color: Colors.white,

), ) ], ),

Spacer(), Align(

alignment: Alignment.centerRight, child: Column(

children: [

Image.asset('../assets/logo.png'), ],

), ) ], ), ), ], ), Row(

(35)

mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[

Container(

alignment: Alignment.center, margin: EdgeInsets.only(top: 20),

padding: EdgeInsets.only(left: 35, top: 13, right: 15),

height: 53, width: 690,

color: Colors.white,

borderRadius: BorderRadius.circular(50), boxShadow: [

BoxShadow(

offset: Offset(0, 10), blurRadius: 50,

color: Colors.black.withOpacity(0.6), )

], ),

child: Row(

children: [ Column(

children: [ Text(

'Search . . . .',

textAlign: TextAlign.left, style: TextStyle(

fontSize: 20,

fontWeight: FontWeight.bold,

color: Color.fromARGB(255, 178, 77, 92),

), ) ], ),

Spacer(), Align(

(36)

alignment: Alignment.centerRight, child: Column(

children: [ Icon(

Icons.search, size: 40,

color: Color.fromARGB(255, 178, 77, 92),

) ], ), ), ], ), ), ], ), Row(

Container(

margin: EdgeInsets.only(left: 30, top: 25), child: Row(

children: [ Text(

'Your Recomendation', style: TextStyle(

fontSize: 24, fontWeight:

FontWeight.bold),

) ], ), ) ], ), Row(

mainAxisAlignment: MainAxisAlignment.spaceAround, children: [

(37)

Container(

margin: EdgeInsets.only(

top: 20, ),

padding: EdgeInsets.only(bottom: 40), width: 690,

topLeft: Radius.circular(40), topRight: Radius.circular(40))), child: Row(

mainAxisAlignment:

MainAxisAlignment.spaceBetween, children: [ Container(

margin: EdgeInsets.only(top: 40, left:

40),

padding: EdgeInsets.all(20), height: 230,

width: 150,

color: Colors.white, borderRadius:

BorderRadius.all(Radius.circular(20)), boxShadow: [ BoxShadow(

color:

Colors.black.withOpacity(0.4), ) ], ),

child: Column(

children: [

Image.asset('../assets/biru.png'), Spacer(),

(38)

Text(

'Kemeja Biru', style: TextStyle(

FontWeight.bold),

),

Spacer(), Text(

'Rp.100.000,00',

], ), ),

Container(

margin: EdgeInsets.only(top: 40), padding: EdgeInsets.all(20), decoration: BoxDecoration(

color:

Colors.black.withOpacity(0.4)) ], ),

child: Column(

children: [

Image.asset('../assets/putih.png'), Spacer(),

Text(

'Kemeja Putih', style: TextStyle(

(39)

FontWeight.bold),

),

Spacer(), Text(

'Rp.100.000,00',

], ), ),

Container(

margin: EdgeInsets.only(right: 40, top:

40),

padding: EdgeInsets.all(20), decoration: BoxDecoration(

color:

child: Column(

children: [

Image.asset('../assets/hitam.png'), Spacer(),

Text(

'Kemeja Hitam', style: TextStyle(

FontWeight.bold),

(40)

),

Spacer(), Text(

'Rp.100.000,00',

], ), ), ], ), ) ], ), Row(

mainAxisAlignment: MainAxisAlignment.spaceAround, children: [

Container(

width: 690,

margin: EdgeInsets.only(bottom: 30), decoration: BoxDecoration(

bottomLeft: Radius.circular(40), bottomRight: Radius.circular(40))), child: Row(

mainAxisAlignment:

MainAxisAlignment.spaceBetween, children: [ Container(

margin: EdgeInsets.only(top: 40, left: 40, bottom: 40),

padding: EdgeInsets.all(20), height: 230,

width: 150,

color: Colors.white,

(41)

borderRadius:

color:

child: Column(

children: [

Image.asset('../assets/kuning.png'), Spacer(),

Text(

'Kemeja Kuning', style: TextStyle(

FontWeight.bold),

),

Spacer(), Text(

'Rp.100.000,00',

], ), ),

Container(

padding: EdgeInsets.all(20), decoration: BoxDecoration(

(42)

color:

child: Column(

children: [

Image.asset('../assets/merah.png'), Spacer(),

Text(

'Kemeja Merah', style: TextStyle(

FontWeight.bold),

),

Spacer(), Text(

'Rp.100.000,00',

], ), ),

Container(

margin: EdgeInsets.only(right: 40), padding: EdgeInsets.all(20),

(43)

color:

child: Column(

children: [

Image.asset('../assets/hijau.png'), Spacer(),

Text(

'Kemeja Hijau', style: TextStyle(

FontWeight.bold),

),

Spacer(), Text(

'Rp.100.000,00',

], ), ), ], ), ) ], ), Row(

Container(

margin: EdgeInsets.only(top: 30), ),

Text(

'Store Rating',

style: TextStyle(fontSize: 14, fontWeight:

FontWeight.bold), )

(44)

], ), Row(

mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[

Icon(

Icons.star,

color: Color.fromARGB(255, 241, 124, 141), size: 40,

), Icon(

Icons.star,

), Icon(

Icons.star,

), Icon(

Icons.star,

), Icon(

Icons.star_half,

), ], ), Row(

Container(

(45)

color: Color.fromARGB(255, 178, 77, 92), margin: EdgeInsets.only(top: 20, bottom: 20), child: Row(

Text(

'Copyright @2022 Doni Agung Prasetyo', textAlign: TextAlign.center,

style: TextStyle(fontSize: 12, color:

Colors.white),

) ], ), ) ], ) ], ), ), );

} }

7.4 Tugas 2 Pertemuan 7

(46)

PERTEMUAN 8

(47)

UTS

PERTEMUAN 9

Shared Preferences

9.1 Pengertian Shared Preferences

Biasanya setiap aplikasi mobile memiliki data yang disimpan pada lokal device.

Seperti token yang biasa dijadikan penanda user sudah pernah login atau belum pada aplikasi.

Dengan hal tersebut user tidak harus login berulang kali setiap aplikasi dibuka. Pada flutter kita menggunakan shared_preferences untuk penyimpanan data lokal yang bersifat key- value pairs. Package ini memiliki fungsi yang sama dengan SharedPreferences di Android, dan UserDefaults di iOS.

9.2 Langkah Membuat Program Membuat Shared Preferences

Pertama buat projek baru, pada pubspec.yaml tambahkan package shared_preferences

Selanjutnya buat 3 file baru dengan nama myModel.dart, mySharedPref.dart dan SharedActivity.dart

Setelah itu pada file mySharedPref.dart Tambahkan Kode seperti berikut ini

import 'package:shared_preferences7/myModel.dart';

import 'package:shared_preferences/shared_preferences.dart';

class MySharedPref {

static const String keyValue = "value";

(48)

static const String keyValue1 = "value";

static const String keyValue2 = "value";

static const String keyMyModel = "MyModel";

Future<SharedPreferences> getPreferences() async =>

await SharedPreferences.getInstance();

setValue(String value, String key) async {

(await getPreferences()).setString(key, value);

}

Future<String?> getValue(key) async =>

(await getPreferences()).getString(key);

setModel(MyModel model) async {

(await getPreferences()).setString(keyMyModel, MyModelToJson(model));

}

Future<MyModel?> getModel() async {

var data = (await getPreferences()).getString(keyMyModel);

if (data != null) return MyModelFromJson(data);

return null;

}

Future<bool> clearAllData() async {

var sharedPref = await SharedPreferences.getInstance();

sharedPref.remove(keyValue);

sharedPref.remove(keyValue1);

sharedPref.remove(keyValue2);

sharedPref.remove(keyMyModel);

return true;

} }

Keterangan ;

(49)

- keyValue dan keyExampleModel adalah key yang kita gunakan untuk mengambil nilai dari SharedPreferences

- Method getPreferences() digunakan untuk mendapatkan object SharedPreferences yang digunakan untuk mengelola data lokal

- setValue dan getValue merupakan contoh sederhana dalam menyimpan value dengan tipe data String.

- setModel dan getModel merupakan contoh menyimpan object dengan mengubahnya menjadi string agar bisa disimpan pada SharedPreferences

- Method clearAllData digunakan untuk menghapus semua data lokal pada SharedPreferences

Selanjutnya pada file myModel.dart tambahkan kode seperti dibawah ini

// To Parse this JSON data, do //

// final MyModel = MyModelFromJson(json String);

import 'dart:convert';

MyModel MyModelFromJson(String str) =>

MyModel.fromJson(json.decode(str));

String MyModelToJson(MyModel data) => json.encode(data.toJson());

class MyModel { MyModel({

required this.greeting, required this.instructions, });

String greeting;

List<String> instructions;

factory MyModel.fromJson(Map<String, dynamic> json) => MyModel(

greeting: json["greeting"],

instructions: List<String>.from(json["instructions"].map((x) =>

x)), );

(50)

Map<String, dynamic> toJson() => { "greeting": greeting,

"instructions": List<dynamic>.from(instructions.map((x) => x)), };

}

Pada file SharedActivity.dart Tambahkan kode seperti berikut

import 'package:shared_preferences7/mySharedPref.dart';

class SharedActivity extends StatefulWidget { @override

State<SharedActivity> createState() => SharedActivityState();

}

class SharedActivityState extends State<SharedActivity> { MySharedPref _mySharedPref = MySharedPref();

String _value = "kosong";

String _value1 = "kosong";

String _value2 = "kosong";

String _isi = "kosong";

TextEditingController controllerText = TextEditingController();

TextEditingController controllerText1 = TextEditingController();

TextEditingController controllerText2 = TextEditingController();

final _fromkey = GlobalKey<FormState>();

@override

body: Stack(

children: [ Form(

key: _fromkey,

(51)

child: Align(

alignment: Alignment.center, child: Column(

mainAxisSize: MainAxisSize.min, children: [

Container(

margin: EdgeInsets.only(left: 24, right: 24, bottom: 8),

controller: controllerText,

keyboardType: TextInputType.text, decoration: InputDecoration(

border: OutlineInputBorder(), labelText: "Masukkan Nilai", ),

validator: ((value) {

if (value == null || value.isEmpty) { return 'Masukkan Nilai';

}

return null;

}), ), ),

Container(

controller: controllerText1, keyboardType: TextInputType.text, decoration: InputDecoration(

border: OutlineInputBorder(), labelText: "Masukkan Nama", ),

validator: ((isi) {

if (isi == null || isi.isEmpty) { return 'Masukkan Nama';

}

return null;

(52)

}), ), ),

Container(

controller: controllerText2, keyboardType: TextInputType.text, decoration: InputDecoration(

border: OutlineInputBorder(), labelText: "Masukkan NIM", ),

validator: ((value) {

if (value == null || value.isEmpty) { return 'Masukkan NIM';

}

return null;

}), ), ),

ElevatedButton(

onPressed: () {

if (_fromkey.currentState!.validate()) {

_mySharedPref.setValue(controllerText.value.text, 'keyValue');

_mySharedPref.setValue(controllerText1.value.text, 'keyValue1');

_mySharedPref.setValue(controllerText2.value.text, 'keyValue2');

controllerText.text = "";

controllerText1.text = "";

controllerText2.text = "";

} },

child: Text("Simpan Data Anda"),

(53)

),

Container(

margin: EdgeInsets.only(top: 12, bottom: 8), child: Text(

"Ambil Nilai",

style: TextStyle(fontWeight: FontWeight.bold), ),

),

Container(

margin: EdgeInsets.only(bottom: 8), child: Column(

children: [

Text("nilai : $_value",), Text("nama : $_value1"), Text("nim : $_value2"), ],

) ),

ElevatedButton(

onPressed: () { setState(() {

_mySharedPref.getValue('keyValue').then((value) {

if (value != null) _value = value;

});

_mySharedPref.getValue('keyValue1').then((value) {

if (value != null) _value1 = value;

});

_mySharedPref.getValue('keyValue2').then((value) {

if (value != null) _value2 = value;

});

},

child: Text("Ambil"), ),

(54)

], ), ), ) ], ), );

} }

Selanjutnya yang terakhir pada file main.dart tambahkan kode seperti berikut ini

import 'package:shared_preferences7/SharedActivity.dart';

void main() => runApp(SharedApp());

class SharedApp extends StatelessWidget { @override

Widget build(BuildContext context) { return MaterialApp(

title: 'Projek Shared Preferences',

theme: ThemeData(primarySwatch: Colors.pink), home: SharedActivity(),

);}}

Setelah semua dirasa lengkap maka kitab isa langsung menjalankan kode tersebut. Untuk

tampilannya dan cara kerjanya kurang lebih akan seperti ini.

(55)

Cara Kerja : Isi angka Kemudian klik Simpan data anda, setelah itu Klik Ambil untuk bisa

mengambil nila seperti tampilan dibawah ini

(56)

PERTEMUAN 10-15

10.1 Langkah-langkah pembuatan program :

1. Tambahkan kodingan sqflite di pubsc.yaml seperti dibawah ini:

2. sdk: '>=2.18.5 <3.0.0'

3. Kemudian buat folder database pada folder lib dan buat file db_helper.dart didalamnya. Lalu ketikan kode berikut

import 'package:uas/model/mahasiswa.dart';

import 'package:sqflite/sqflite.dart';

import 'package:sqflite/sqlite_api.dart';

import 'package:path/path.dart';

class DbHelper {

static final DbHelper _instance = DbHelper._internal();

static Database? _database;

//INISIALISASI BEBERAPA VARIABLE YANG DIBUTUHKAN final String tableName = 'tableMhs';

final String columnId = 'id';

final String columnNama = 'nama';

final String columnNim = 'nim';

(57)

final String columnEmail = 'email';

final String columnProdi = 'prodi';

DbHelper._internal();

factory DbHelper() => _instance;

//CEK APAKAH DATABASE ADA

Future<Database?> get _db async { if (_database != null){

return _database;

}

_database = await _initDb();

return _database;

}

Future<Database?> _initDb() async {

String databasePath = await getDatabasesPath();

String path = join(databasePath, 'mhs_db');

return await openDatabase(path, version: 1, onCreate: _onCreate);

}

//MEMBUAT TABLE DAN FIELD

Future<void> _onCreate(Database db, int version) async {

var sql = 'CREATE TABLE $tableName($columnId INTEGER PRIMARY KEY,' "$columnNama TEXT,"

"$columnNim TEXT,"

"$columnEmail TEXT,"

"$columnProdi TEXT)";

await db.execute(sql);

}

//INSERT KE DATABASE

Future<int?> saveMhs(Mahasiswa mhs) async{

var dbClient = await _db;

return await dbClient!.insert(tableName, mhs.toMap());

}

//READ DATABASE

Future<List?> getAllMhs() async { var dbClient = await _db;

var result = await dbClient!.query(tableName,

columns: [columnId, columnNama, columnProdi, columnNim, columnEmail]);

return result.toList();

}

Future<List?> getAllMahasiswa() async { var dbClient = await _db;

var result = await dbClient!.query(tableName,

columns: [columnId, columnNama, columnProdi, columnNim, columnEmail]);

return result.toList();

}

//UPDATE DATABASE

Future<int?> updateMhs(Mahasiswa mhs) async { var dbClient = await _db;

return await dbClient!.update(tableName, mhs.toMap(), where: '$columnId = ?', whereArgs: [mhs.id]);

}

//HAPUS DATABASE

Future<int?> deleteMhs(int id) async{

var dbClient = await _db;

return await dbClient!.delete(tableName, where: '$columnId = ?', whereArgs:

[id]);

}

(58)

}

Kode diatas berfungsi sebagai menyambungkan table-tabel yang kita buat nanti ke databasenya

4. Kemudian membuat file bernama mahasiswa.dart yang berada di folder model yang berada di folder lib. Berikut kodingannya :

class Mahasiswa{

int? id;

String? nama;

String? nim;

String? email;

String? prodi;

Mahasiswa ({this.id, this.nama, this.nim, this.email, this.prodi});

Map<String, dynamic> toMap(){

var map = Map<String, dynamic>();

if (id != null){

map['id'] = id;

}

map['nama'] = nama;

map['nim'] = nim;

map['email'] = email;

map['prodi'] = prodi;

return map;

}

Mahasiswa.fromMap(Map<String, dynamic> map){

this.id = map['id'];

this.nama = map['nama'];

this.nim = map['nim'];

this.email = map['email'];

this.prodi = map['prodi'];

} }

Isi kodingan dari file tersebut adalah pembuatan class dan tipenya yang kita butuhkan

(59)

5. Selanjutnya membuat tampilan awal di (list_mahasiswa.dart) didalam folder lib selanjutnya akan diwariskan ke main.dart, Berikut kodenya

import 'package:uas/database/db_helper.dart';

import 'package:uas/edit_mahasiswa.dart';

import 'package:uas/form_mahasiswa.dart';

import 'package:uas/edit_mahasiswa.dart';

import 'package:uas/tabel_mahasiswa.dart';

class Menu extends StatefulWidget { const Menu({super.key});

@override

_MenuState createState() => _MenuState();

}

class _MenuState extends State<Menu> { List<Mahasiswa> listMhs = [];

DbHelper db = DbHelper();

@override

void initState() {

//Menjalankan fungsi getAllMahasiswa pertama kali dimuat _getAllMhs();

super.initState();

}

@override

appBar: AppBar(

title: Center(

child: Text('Data Mahasiswa'), )),

body: ListView.builder(

itemCount: listMhs.length, itemBuilder: (context, index) { Mahasiswa mhs = listMhs[index];

return Padding(

padding: EdgeInsets.only(top: 20), child: ListTile(

leading: Icon(

Icons.person, size: 50, ),

title: Text('${mhs.nim}'), subtitle: Column(

mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[

Padding(

padding: EdgeInsets.only(top: 8), child: Text('Nama: ${mhs.nama}'), ),

Padding(

(60)

padding: EdgeInsets.only(top: 8), child: Text('Email: ${mhs.email}'), ),

Padding(

padding: EdgeInsets.only(top: 8), child: Text('Prodi: ${mhs.prodi}'), ),

], ),

trailing: FittedBox(

fit: BoxFit.fill, child: Row(

children: <Widget>[

// button edit IconButton(

onPressed: () {

_openFormEdit(mhs);

},

icon: Icon(Icons.edit), ),

// delete button IconButton(

icon: Icon(Icons.delete), onPressed: () {

// membuat dialog // konfirmasi hapus

AlertDialog hapus = AlertDialog(

title: Text('Information'), content: Container(

height: 100, child: Column(

children: <Widget>[

Text('Yakin ingin menghapus data $ {mhs.nama}')

], ), ),

//terdapat 2 button

//jika ya jalankan _deleteMhs() jika tidak maka tutup dialog

actions: [ TextButton(

onPressed: () {

_deleteMhs(mhs, index);

Navigator.pop(context);

},

child: Text('Ya'), ),

TextButton(

child: Text('Tidak'), onPressed: () {

}, ) ], );

showDialog(

context: context, builder: (context) => hapus);

},

(61)

) ], ), ), ), );

}, ),

// membuat button mengapung dibagian bawah kanan layar

// BUTTON REKAP

floatingActionButton: Column(

mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[

FloatingActionButton(

child: Icon(Icons.add), onPressed: () {

AlertDialog hapus = AlertDialog(

title: Text('Information'), content: Container(

height: 100, child: Column(

children: <Widget>[Text('Tambah Data ?')], ),

),

// Terdapat 2 button actions: [

TextButton(

onPressed: () {

_openFormCreate();

},

child: Text('Ya'), ),

TextButton(

onPressed: () {

},

child: Text('Tidak'), )

], );

showDialog(context: context, builder: (context) => hapus);

}, ),

SizedBox(

height: 10, ),

], ), );

}

//mengambil semua data mahasiswa Future<void> _getAllMhs() async { var list = await db.getAllMhs();

//perubahan state

(62)

setState(() {

//hapus data listMhs listMhs.clear();

//perulangan var list list!.forEach((mhs) { //masukan data ke list

listMhs.add(Mahasiswa.fromMap(mhs));

});

}

// hapus data mhs

Future<void> _deleteMhs(Mahasiswa mhs, int position) async { await db.deleteMhs(mhs.id!);

setState(() {

listMhs.removeAt(position);

});

}

// halaman tambah mahasiswa

Future<void> _openFormCreate() async { var result = await Navigator.push(

context, MaterialPageRoute(builder: (context) => FormMahasiswa()));

if (result == 'save') { await _getAllMhs();

} }

//membuka halaman edit

Future<void> _openFormEdit(Mahasiswa mhs) async { var result = await Navigator.push(context,

MaterialPageRoute(builder: ((context) => FormMahasiswa(mhs:

mhs))));

if (result == 'update') { await _getAllMhs();

} }

// membuka halaman rekap tabel mahasiswa void _openTabelMahasiswa(){

Navigator.of(context)

.push(MaterialPageRoute(builder: (context) => TabelMahasiswa()));

}

// membuat snackbar

void snackBar(String value){

ScaffoldMessenger.of(context)

.showSnackBar(new SnackBar(content: new Text(value)));

} }

6. Selanjutnya membuat tampilan pada form input, buat file form_mahasiswa.dart. Berikut kode nya:

(63)

import 'package:flutter/services.dart';

import 'package:uas/database/db_helper.dart';

class FormMahasiswa extends StatefulWidget { final Mahasiswa? mhs;

FormMahasiswa({this.mhs});

@override

_FormMahasiswaState createState() => _FormMahasiswaState();

}

class _FormMahasiswaState extends State<FormMahasiswa> { DbHelper db = DbHelper();

TextEditingController? nama;

TextEditingController? namaAkhir;

TextEditingController? nim;

TextEditingController? email;

TextEditingController? prodi;

@override

void initState() { nama =

TextEditingController(text: widget.mhs == null ? '' : widget.mhs!.nama);

nim =

TextEditingController(text: widget.mhs == null ? '' : widget.mhs!.nim);

email = TextEditingController(

text: widget.mhs == null ? '' : widget.mhs!.email);

prodi = TextEditingController(

text: widget.mhs == null ? '' : widget.mhs!.prodi);

super.initState();

}

@override

appBar: AppBar(

title: Text('Form Kontak'), ),

body: ListView(

padding: EdgeInsets.all(16.0), children: [

Padding(

padding: const EdgeInsets.only(

top: 20, ),

child: TextField(

inputFormatters: [

FilteringTextInputFormatter.allow(RegExp(r"^[a-zA-Z]+")) ],

controller: nama,

(64)

labelText: 'Nama',

borderRadius: BorderRadius.circular(8), )),

), ),

Padding(

top: 20, ),

child: TextField(

inputFormatters: <TextInputFormatter>[

FilteringTextInputFormatter.allow(RegExp("[0-9]")), ],

controller: nim,

labelText: 'NIM',

), ),

Padding(

top: 20, ),

child: TextField(

controller: email,

keyboardType: TextInputType.emailAddress, decoration: InputDecoration(

hintText: 'example@gmail.com', labelText: 'Email',

), ),

Padding(

top: 20, ),

child: TextField(

controller: prodi,

labelText: 'Prodi',

), ),

Padding(

padding: const EdgeInsets.only(top: 20), child: ElevatedButton(

child: (widget.mhs == null) ? Text(

'Add',

style: TextStyle(color: Colors.white), )

(65)

: Text(

'Update',

onPressed: () { upsertMahasiswa();

}, ), )