flutter

Membuat Form Tambah Murid di Flutter

 

Tujuan:

  • Semua inputan harus diisi dan juga pilihan Tempat Lahir harus dipilih
  • Validasi : Jika inputan ada yang kosong lalu ditekan tombol Simpan maka akan menampilkan tulisan ‘harus diisi’
  • Validasi : Jika Tempat Lahir tidak dipilih lalu ditekan tombol Simpan maka akan menampilkan tulisan ‘Tempat lahir harus dipilih’
  • Jika tombol Simpan ditekan dan sukses maka akan menampilkan notifikasi singkat dibawah layar ‘Nilai tersimpan: $namaLengkap, $kotaTinggal, $jKel, $tglLahir, $alamat ‘

1. Membuat Class

Buatlah sebuah file bernama tambah_murid.dart lalu masukan kode berikut ini:

class TambahMurid extends StatefulWidget {
const TambahMurid({super.key});@override
State<TambahMurid> createState() => TambahMuridState();
}

2. Import Library Mask Tesk

Buka file pubspec.yaml lalu pada bagian dependencies maka tambahkan ini:

mask_text_input_formatter: ^2.9.0
Lalu pada terminal maka ketikkan perintah berikut ini:
flutter pub get
Keterangan:
  • Library ini digunakan untuk inputan tanggal
  • Perintah flutter pub get digunakan untuk mendownload library

3. Import file dart

Pada file tambah_murid.dart maka tulis ini:

import ‘package:mask_text_input_formatter/mask_text_input_formatter.dart’;

4. Membuat Form dalam Objek State

Tambahkan kode berikut ini:

class TambahMuridState extends State<TambahMurid> {
  final _formKey = GlobalKey<FormState>();
  var kotas = [‘Jakarta’, ‘Bogor’, ‘Tanggerang’, ‘Bekasi’, ‘Depok’];
  String? kotaTerpilih;
  final tglLahirFormat = MaskTextInputFormatter(mask: “##/##/####”);
  String? jKel = ‘Pria’;
  final List<String> opsiJkel = [‘Pria’, ‘Wanita’];
  String? namaLengkap;
  String? kotaTinggal;
  String? tglLahir;
  String? alamat;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Form(
        key: _formKey,
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 10),
          child: Column(
            spacing: 12.0,
            children: [
              TextFormField(
                decoration: InputDecoration(labelText: ‘Nama Lengkap’),
                validator: (nilai) {
                  if (nilai == null || nilai.isEmpty) {
                    return ‘Nama Lengkap harus diisi’;
                  }
                  return null;
                },
                onSaved: (nilai) {
                  namaLengkap = nilai;
                },
              ),
              Row(
                children: [
                  Expanded(
                    child: DropdownButtonFormField<String>(
                      initialValue: kotaTerpilih,
                      decoration: const InputDecoration(
                        labelText: ‘Tempat Lahir’,
                        border: InputBorder.none,
                      ),
                      items: kotas.map((kota) {
                        return DropdownMenuItem(value: kota, child: Text(kota));
                      }).toList(),
                      onChanged: (String? kota) {
                        setState(() {
                          kotaTerpilih = kota!;
                        });
                      },
                      validator: (nilai) {
                        if (nilai == null || nilai.isEmpty) {
                          return ‘Tempat lahir harus dipilih’;
                        }
                        return null;
                      },
                      onSaved: (nilai) {
                        kotaTinggal = nilai;
                      },
                    ),
                  ),
                  Expanded(
                    child: TextFormField(
                      inputFormatters: [tglLahirFormat],
                      autocorrect: false,
                      keyboardType: TextInputType.number,
                      decoration: const InputDecoration(
                        labelText: ‘Tanggal Lahir’,
                        hintText: “31/12/2020”,
                        hintStyle: TextStyle(color: Colors.grey),
                        fillColor: Colors.white,
                        filled: true,
                      ),
                      validator: (nilai) {
                        if (nilai == null || nilai.isEmpty) {
                          return ‘harus diisi’;
                        }
                        return null;
                      },
                      onSaved: (nilai) {
                        tglLahir = nilai;
                      },
                    ),
                  ),
                ],
              ),
              Align(
                alignment: Alignment.centerLeft,
                child: Text(
                  ‘Jenis Kelamin :’,
                  textAlign: TextAlign.start,
                  style: TextStyle(fontSize: 17),
                ),
              ),
              RadioGroup(
                onChanged: (String? nilai) {
                  setState(() {
                    jKel = nilai;
                  });
                },
                groupValue: jKel,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: opsiJkel.map((sex) {
                    return Expanded(
                      child: RadioListTile<String>(
                        title: Text(sex),
                        value: sex,
                      ),
                    );
                  }).toList(),
                ),
              ),
              TextFormField(
                keyboardType: TextInputType.multiline,
                minLines: 3,
                maxLines: 7,
                decoration: InputDecoration(
                  labelText: ‘Masukan Alamatmu disini’,
                  hintText: ‘nama jalan, rt, rt, kodepos’,
                ),
                validator: (nilai) {
                  if (nilai == null || nilai.isEmpty) {
                    return ‘harus diisi’;
                  }
                  return null;
                },
                onSaved: (nilai) {
                  alamat = nilai;
                },
              ),
              FilledButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    _formKey.currentState!.save();
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Text(
                          ‘Nilai tersimpan: $namaLengkap, $kotaTinggal, $jKel, $tglLahir, $alamat’,
                        ),
                      ),
                    );
                  }
                },
                child: Text(‘Simpan’),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Keterangan:

  • GlobalKey<FormState> bersifat unik dan digunakan untuk menyimpan state form
  • var kotas = [‘Jakarta’, ‘Bogor’, ‘Tanggerang’, ‘Bekasi’, ‘Depok’], kode ini digunakan untuk membuat nama variabel kotas bertipe List
  • String? kotaTerpilih -> kode ini berarti saya membuat variabel bernama kotaTerpilih, tanda tanya berarti variabel ini boleh kosong
  • final List<String> opsiJkel = [‘Pria’, ‘Wanita’], kode ini berarti saya membuat variabel bernama opsiJkel bertipe List<String>
  • padding: EdgeInsets.symmetric(horizontal: 10), kode ini berarti saya memberikan padding kiri dan kanan sebesar 10 pixel
  • spacing: 12.0 -> kode ini berarti saya memberikan jarak untuk setiap isi dari kolom sebesar 12 px
  • TextFormField adalah widget untuk inputan teks
  • DropdownButtonFormField adalah widget untuk pilihan dropdown
  • Expanded adalah widget untuk mengisi seluruh ruangan kosong, nah di dalam widget row ini harus digunakan karena jika tidak digunakan akan jadi error
  •  InputDecoration(labelText: ‘Nama Lengkap’) dalam widget TextFormField,  kode ini berarti saya memberikan tulisan sementara yang akan hilang ketika kita sudah isi data
  • validator adalah fungsi yang digunakan untuk memvalidasi data
  • onSaved adalah fungsi yang akan dijalankan saat form sudah disubmit
  • _formKey.currentState!.validate() -> kode ini berarti form sudah divalidasi, tanda seru digunakan untuk merubah tipe null menjadi tidak null
  • _formKey.currentState!.save() -> kode ini berarti data form disimpan
  • SnackBar adalah widget yang digunakan untuk menampilkan notifikasi singkat dibawah layar

 

5. Panggil  dari Menu Drawer

Bukalah file dashboard.dart lalu import  file tambah murid

import ‘tambah_murid.dart’;
Lalu pada variabel pages ganti
Text(‘Halaman Tambah Murid’)
dengan
TambahMurid()

 

6. Jalankan Aplikasi

Tekan menu Run -> Start Debugging atau shortcut tombol F5