B. Data JSON
1. Data JSON
Pada pertemuan kali ini kita akan membahas mengenai data json. Kita akan membuat data json kita sendiri & memanipulasikan data tersebut.
Yang pertama kita lakukan adalah membuat file baru dengan nama table_user.dart. Sebelum kita mulai install terlebih dahulu package data table 2
// ignore_for_file: sized_box_for_whitespace, prefer_const_constructors, prefer_is_empty, prefer_const_literals_to_create_immutables, avoid_print, sort_child_properties_last
import 'package:flutter/material.dart';
class TableUser extends StatefulWidget {
const TableUser({super.key});
@override
State<TableUser> createState() => _TableUserState();
}
class _TableUserState extends State<TableUser> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Data User"),
centerTitle: true,
backgroundColor: Colors.green[300],
),
body: Container(
padding: const EdgeInsets.all(40),
child: SingleChildScrollView(
child: Column(children: [
Container(
width: MediaQuery.of(context).size.width,
child: DataTable(
columns: [
DataColumn(label: Text("No")),
DataColumn(label: Text("Email")),
DataColumn(label: Text("Action")),
],
rows: List.generate(
10,
(index) => DataRow(cells: [
DataCell(Text((index + 1).toString())),
DataCell(Text("Tes@gmail.com")),
DataCell(Row(
children: [
IconButton(
onPressed: () {},
icon: Icon(Icons.edit)),
IconButton(
onPressed: (){},
icon: Icon(Icons.delete))
],
))
]))),
)
]),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
backgroundColor: Colors.green,
),
);
}
}
Selanjutnya kita akan mendaftarkan tampilan yang sudah kita buat di main.dart
routes: {
'/': (context) => MyHomePage(),
'/hal1': (context) => Page1(),
'/hal2': (context) => Page2(),
'/hal3': (context) => Page3(),
'/user':(context) => TableUser()
}
Lalu di bawah tombol next page kita akan membuat tombol untuk ke tabel user
children: [
Container(
margin: EdgeInsets.only(bottom: 20),
child: ElevatedButton(
onPressed: () => Navigator.pushNamed(context, "/hal1", arguments: "Hallo Route"),
child: const Text("Next Page")),
),
ElevatedButton(
onPressed: () => Navigator.pushNamed(context, "/user"),
child: const Text("Table User"),
)
]
jika dijalankan, bentuk tampilannya seperti ini:
Keterangan
- List generate digunakan untuk perulangan didalam children
2. Membuat Model
Selanjutnya kita akan membuat model datanya silahkan pada folder lib buat folder baru dengan nama model > lalu didalam folder model buat folder baru dengan nama user.dart. Ketikan kodenya seperti ini:
class User {
String email;
String password;
User(this.email, this.password);
}
List<User> dataUser = [
User("user123@gmail.com", "abc"),
User("user456@gmail.com", "def"),
User("user789@gmail.com", "ghi")
];
untuk pembuatan model hampir mirip dengan interface yang ada di nodejs kalau di nodejs untuk mendeklarasikan tipe dapat menggunakan : sedangkan flutter dapat menggunakan <> seperti tag html.
3. Menampilkan Data JSON
Untuk menampilkan data json kita akan memulai mengedit pada file table_user.dart
body: Container(
padding: const EdgeInsets.all(40),
child: SingleChildScrollView(
child: Column(children: [
dataUser.length != 0
? Container(
width: MediaQuery.of(context).size.width,
child: DataTable(
columns: [
DataColumn(label: Text("No")),
DataColumn(label: Text("Email")),
DataColumn(label: Text("Action")),
],
rows: List.generate(
dataUser.length,
(index) => DataRow(cells: [
DataCell(Text((index + 1).toString())),
DataCell(Text(dataUser[index].email)),
DataCell(Row(
children: [
IconButton(
onPressed: () {},
icon: Icon(Icons.edit)),
IconButton(
onPressed: () {},
icon: Icon(Icons.delete))
],
))
]))),
)
: Container(
margin: EdgeInsets.only(top: 50),
child: Center(child: Text("Data Kosong")),
),
]),
),
)
Keterangan
- Jika error atau warning silahkan klik saja lampu kuning.
- Sebelumnya kita menampilkan tabel dengan data langsung sedangkan sekarang kita menampilkan tabel berdasarkan data user yang telah kita buat di model.
- untuk memberikan validasi disini juga ada kondisi jika datanya tidak ada maka akan menampilkan data kosong.
4. Menambahkan Data JSON
Untuk menambahkan data user di aplikasi yang kita buat, kita harus membuat form / inputnya terlebih dahulu baru nantinya kita dapat memberikan proses add Jsonnya.
Kita akan mulai dari membuat tampilan pop up, taruh kode ini diatas @override Widget build
TextEditingController email = TextEditingController();
TextEditingController pw = TextEditingController();
showModal(User? data, int? index) {
AlertDialog alert = AlertDialog(
title: Text("Add Data"),
content: Container(
height: 150,
child: Column(
children: [
Container(
margin: EdgeInsets.only(bottom: 20),
child: TextField(
controller: email,
decoration: InputDecoration(hintText: "example@email.com"),
),
),
Container(
margin: EdgeInsets.only(bottom: 20),
child: TextField(
controller: pw,
obscureText: true,
decoration: InputDecoration(hintText: "***********")),
),
],
),
),
actions: [
ElevatedButton(
onPressed: () {},
child: Text(
"Save",
style: TextStyle(color: Colors.white),
),
style: ElevatedButton.styleFrom(backgroundColor: Colors.blue)),
ElevatedButton(
onPressed: () => Navigator.pop(context),
child: Text(
"Cancel",
style: TextStyle(color: Colors.white),
),
style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
),
],
);
return showDialog(context: context, builder: (context) => alert);
}
Keterangan
- Untuk membuat form tentunya kita harus membutuhkan controller agar kita bisa mendapatkan datanya
- Show modal ada 2 parameter yang sifatnya
?yakni null safety yang sifatnya boleh diisi atau di null (kosong) kan - Terdapat 3 area pada showDialog yakni title, content, action
Selanjutnya kita akan membuat prosesnya
saveData() {
dataUser.add(User(email.text, pw.text));
Navigator.pushReplacementNamed(context, "/user");
}
Lalu taruh pada onpressed
ElevatedButton(
onPressed: () => saveData(),
child: Text(
"Save",
style: TextStyle(color: Colors.white),
),
style: ElevatedButton.styleFrom(backgroundColor: Colors.blue)),
Keterangan
- Untuk menambahkan data didalam list/array kita dapat menggunakan
add - Setelah data disimpan kita refresh halaman kita agar data yang baru bisa ditampilkan
5. Mengedit Data JSON
Untuk mengedit data list kita akan menampilkan data user 1annya terlebih dahulu baru kita dapat merubahnya. Kita akan buat ketika icon pencilnya di klik akan memunculkan pop up yang sudah ada datanya caranya :
IconButton(
onPressed: () => showModal(dataUser[index], index),
icon: Icon(Icons.edit)
),
Pada tombol edit kita harus mengirimkan data user berserta indexnya agar nantinya kita bisa menampilkan data yang kita pilih & kita dapat merubahnya
Agar showmodal bisa untuk merubah data kita harus ubah sedikit:
showModal(User? data, int? index) {
if (data != null) {
email.text = data.email;
pw.text = data.password;
}else{
email.text = "";
pw.text = "";
}
AlertDialog alert = AlertDialog(
title: Text(data == null ? "Add Data" : "Edit Data"),
content: Container(
height: 150,
child: Column(
children: [
Container(
margin: EdgeInsets.only(bottom: 20),
child: TextField(
controller: email,
decoration: InputDecoration(hintText: "example@email.com"),
),
),
Container(
margin: EdgeInsets.only(bottom: 20),
child: TextField(
controller: pw,
obscureText: true,
decoration: InputDecoration(hintText: "***********")),
),
],
),
),
actions: [
ElevatedButton(
onPressed: () => data != null
? editData(index!)
: email.text != "" && pw.text != ""
? saveData()
: null,
child: Text(
"Save",
style: TextStyle(color: Colors.white),
),
style: ElevatedButton.styleFrom(backgroundColor: Colors.blue)),
ElevatedButton(
onPressed: () => Navigator.pop(context),
child: Text(
"Cancel",
style: TextStyle(color: Colors.white),
),
style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
),
],
);
return showDialog(context: context, builder: (context) => alert);
}
Jika dicopy maka akan error karena fungsi edit belum dibuat oleh karena itu masukkan kode ini:
editData(int index) {
dataUser[index].email = email.text;
dataUser[index].password = pw.text;
Navigator.pushReplacementNamed(context, "/user");
}
Keterangan
- Pada showmodal kita memberikan kondisi dimana ketika parameter data terdeteksi mempunyai value maka controller pada input kita perbaharui agar datanya dapat ditampilkan, dan memberikan beberapa kondisi yang lain seperti judul modal & onpressed pada tombol
- Untuk merubah data pada list kita tinggal memberikan indexnya dan data apa yang mau dirubah
- Sama seperti add setelah proses edit kita dapat melakukan refresh
6. Menghapus Data JSON
Untuk menghapus data list kita akan membuat tombol delete ketika di klik akan menghapus data yang berada di dalam list. Masukkan kode ini di bawah editData
deleteData(int index){
dataUser.removeAt(index);
Navigator.pushReplacementNamed(context, "/user");
}
Lalu berikan proses untuk menghapus datanya tersebut
Keterangan
removeAtdigunakan untuk menghapus data berdasarkan index nya- jangan lupa untuk merefresh nya