Menampilkan Data dari Database dalam Flutter

 

Tujuan:

Menampilkan data dari tabel murid yang berada dalam database db_sekolah.db ke widget DataTable

1. Pembuatan Kode Tampil

Buatlah sebuah file bernama tampil_murid.dart lalu masukkan kode berikut ini:

import 'package:flutter/material.dart';
import 'package:teks/dashboard.dart';
import 'package:teks/helper.dart';

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

  @override
  State createState() {
    return TampilMuridState();
   
  }
}

class TampilMuridState extends State {
  late Future<List<Map<String, dynamic>>> dataSemuaMurid;

  Future<List<Map<String, dynamic>>> ambilDataMurid() async {
    await Future.delayed(const Duration(seconds: 1));
    return tampilDataMurid();
  }

  @override
  void initState() {
    super.initState();
    dataSemuaMurid = tampilDataMurid();
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<List<Map<String, dynamic>>>(
        future: dataSemuaMurid,
        builder: (konteks, snapshot) {
          if (snapshot.hasError) {
            return Text(
              'Error: ${snapshot.error}',
              style: const TextStyle(color: Colors.red),
            );
          }
          if (snapshot.hasData) {
            final data = snapshot.data;

            return DataTable(
              columns: const [
                DataColumn(label: Text("Nama")),
                DataColumn(label: Text("Jenis\nKelamin")),
                DataColumn(
                  headingRowAlignment: MainAxisAlignment.center,
                  label: Text("Aksi"),
                ),
              ],
              rows: data!.map((m) {
                return DataRow(
                  cells: [
                    DataCell(Text(m['nama'])),
                    DataCell(Text(m['jkel'])),
                    DataCell(
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          TextButton(
                            onPressed: () {
                             
                            },
                            child: Text('Edit'),
                          ),
                          TextButton(
                            onPressed: () {
                              
                            },
                            child: Text('Hapus'),
                          ),
                        ],
                      ),
                    ),
                  ],
                );
              }).toList(),
            );
          }
          return const CircularProgressIndicator();
        },
      ),
    );
  }
}

Keterangan:

  • Future.delayed adalah fungsi untuk delay
  • initState() adalah fungsi yang dijalankan sekali saja saat objek state dibuat
  • tampilDataMurid() adalah fungsi dalam file helper yang digunakan untuk mengambil data murid

 

2. Panggil dari Menu Drawer

Bukalah file dashboard.dart lalu importĀ  file tampil_murid.dart

import ‘tampil_murid.dart’;

Lalu pada variabel pages ganti

Text(‘Halaman Daftar Murid’)

dengan

TampilMurid()

 

3. Jalankan Aplikasi

Tekan menu Run -> Start Debugging atau shortcut tombol F5