flutter

Update data database dalam Flutter

1. Pembuatan File Edit

Copy file tambah_murid.dart menjadi edit_murid.dart

 

2. Perubahan Class

Rubahlah class TambahMurid menjadi EditMurid seperti berikut ini:

class EditMurid extends StatefulWidget {
  final Map<String, dynamic> dataMurid;
  const EditMurid({super.key, required this.dataMurid});

  @override
  State createState() => EditMuridState();
}

 

3. Perubahan  objek State

Rubahlah objek TambahMuridState menjadi EditMuridState seperti berikut ini:
class EditMuridState extends State

 

4. Membuat Variabel TextEditingController

Masukanlah variabel berikut ini ke dalam objek state:

 late TextEditingController txtNamaLengkap;
 late TextEditingController txtTglLahir;
 late TextEditingController txtAlamat;

Keterangan:

  • TextEditingController disini digunakan untuk mengisi nilai awal pada atrribut controller dari widget TextFormField

5. Pembuatan metode initState

Masukanlah variabel berikut ini ke dalam objek state:

 @override
  void initState() {
    super.initState();
    
    txtNamaLengkap = TextEditingController(text: widget.dataMurid['nama']);
    txtTglLahir = TextEditingController(text: widget.dataMurid['tgl_lahir']);
    kotaTerpilih = widget.dataMurid['tempat_lahir'];
    jKel = widget.dataMurid['jkel'];
    txtAlamat = TextEditingController(text: widget.dataMurid['alamat']);
  }

Keterangan:

  • TextEditingController(text: widget.dataMurid[‘nama’]), kode ini berarti saya mengisi text dari objek TextEditingController dengan nilai dari class utama

 

6. Pembuatan Metode dispose

Masukanlah variabel berikut ini ke dalam objek state:

@override
  void dispose() {
    txtNamaLengkap.dispose();
    txtTglLahir.dispose();
    super.dispose();
  }

Keterangan:

  • txtNamaLengkap.dispose() -> kode digunakan untuk menghapus widget txtNamaLengkap

 

7. isi nilai awal pada widget TextFormField Nama Lengkap

Tambahkan atribute berikut ini:

controller : txtNamaLengkap

 

8. isi nilai awal pada widget DropdownButtonFormField Tempat Lahir

Tambahkan atribute berikut ini:

initialValue: kotaTerpilih

9. isi nilai awal pada widget TextFormField Tanggal Lahir

Tambahkan atribute berikut ini:

controller: txtTglLahir

10. isi nilai awal pada widget TextFormField Alamat

Tambahkan atribute berikut ini:

controller: txtAlamat

 

11. Perubahan Tombol

Rubahlah tombol Simpan menjadi Update lalu pada metode onPressed rubahlah metode :
     masukinDataMurid(dataMurid);
Menjadi
    updateDataMurid(dataMurid);
Keterangan:
  • updateDataMurid(dataMurid) -> adalah metode yang terdapat pada file helper

12. Terima data pada Dashboard

Bukalah file dashboard.dart lalu rubahlah isi class Dashboard  menjadi berikut ini:
 final Map<String, dynamic> dataMurid;
 const Dashboard({super.key, required this.dataMurid});

 

13. Menambahkan halaman edit ke Menu Drawer

Masih pada Dashboard lalu pada variabel pages tambahkan kode berikut ini:

EditMurid(dataMurid: widget.dataMurid)

Keterangan:

  • widget.dataMurid adalah nilai variabel dataMurid yang ada di class utama

 

14. Membuka Halaman Edit jika ada kiriman data

Masih pada Dashboard lalu pada objek state masukan kode berikut ini:

@override
  void initState() {
    super.initState();
    if (widget.dataMurid.isNotEmpty) {
      setState(() {
        _indeks = 3;
      });
    }
  }

 

15. Perubahan pada file Tampil

Bukalah file tampil_murid.dart lalu pada bagian Tombol Edit pada metode onPressed masukan kode berikut ini:

Navigator.push(
                                context,
                                MaterialPageRoute(
                                  builder: (context) {
                                    return Dashboard(dataMurid: m);
                                  },
                                ),
                              );

 

16. Jalankan Aplikasi

Tekan menu Run -> Start Debugging atau shortcut tombol F5