flutter

Menampilkan halaman saat menekan menu di Drawer Flutter

Ini adalah lanjutan dari Membuat Menu Drawer di Flutter

 

Tujuan:

  • Tekan menu HOME maka akan tampil judul ‘Dashboard’ dan halaman dengan tulisan ‘Halaman Utama’
  • Tekan menu Tambah Data Murid maka akan tampil judul ‘Tambah Murid’ dan halaman dengan tulisan ‘Halaman  Tambah Murid’
  • Tekan menu Lihat Daftar Murid maka akan tampil judul ‘Daftar Murid’ dan halaman dengan tulisan ‘Halaman Daftar Murid’

 

1. Merubah StatelessWidget menjadi StatefulWidget

Rubahlah class Dashboard menjadi seperti berikut ini:

class Dashboard extends StatefulWidget {

const Dashboard({super.key});

@override
State<Dashboard> createState() => _DashboardState();

}

Keterangan:

  • State<Dashboard> createState() => _DashboardState(), kode ini mengimplementasikan metode  abstrak createState

2. Membuat Objek State

Lalu rubahlah class isiDashboard beserta isinya menjadi class _DashboardState seperti berikut ini:

class _DashboardState extends State<Dashboard> {
  int _indeks = 0;
  final List<String> judul = [‘Dashboard’, ‘Tambah Murid’, ‘Daftar Murid’];
  final List<Widget> pages = [
    Text(‘Halaman Utama’),
    Text(‘Halaman Tambah Murid’),
    Text(‘Halaman Daftar Murid’),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(judul[_indeks]),
        foregroundColor: Colors.white,
        backgroundColor: Colors.lightBlue,
      ),
      body: Center(child: pages[_indeks]),
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(color: Colors.blue),
              child: Text(‘Fahmi’),
            ),
            ListTile(
              title: Text(‘Home’),
              onTap: () {
                setState(() {
                  _indeks = 0;
                });
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text(‘Tambah Data Murid’),
              onTap: () {
                setState(() {
                  _indeks = 1;
                });
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text(‘Lihat Data Murid’),
              onTap: () {
                setState(() {
                  _indeks = 2;
                });
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text(‘Close’),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}
Keterangan:
  • final List<String> judul -> kode ini berarti saya membuat sebuah List bernama judul yang semua isinya bertipe String
  • final List<Widget> pages -> kode ini berarti saya membuat sebuah List bernama pages yang semua isinya bertipe Widget
  • judul[_indeks] -> kode ini berarti saya mengambil isi dari variabel judul berdasarkan angka dari variabel  _indeks
  • pages[_indeks] -> kode ini berarti saya mengambil isi dari variabel pages berdasarkan angka dari variabel  _indeks
  • setState(() { _indeks = 1; }) -> kode ini berarti saya memberikan nilai _indeks = 1 lalu metode ini akan memberitahukan Framework agar memperbarui tampilannya berdasarkan _indeks yang sudah diperbarui

3.  Jalankan Aplikasi

Tekan menu Run -> Start Debugging atau shortcut tombol F5