Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara membuat dropdown select input di flutter secara cepat dan mudah. Penasaran?, ayo ikuti tutorialnya di bawah ini.

Latihan kita kali ini adalah membuat dropdown select input sederhana. Caranya sedikit tricky, tapi sebenarnya mudah untuk digunakan. Jadi kita akan membuat project flutter sederhana yang menampilkan form input nama, form dropdown select jenis kelamin, agama, dan edukasi. Lalu terdapat tombol untuk menampilkan hasilnya.

Latihan ini adalah dasar dari tutorial saya tentang cara menggunakan dropdown search di flutter. Dan cara membuat aplikasi cek ongkir. Untuk melihat hasil akhirnya silahkan scroll ke bagian paling bawah artikel ini.

Baca Artikel Lain ✨

📰 1. Membuat Restful Api di Laravel Tanpa Library Tambahan Part 1 read more

📰 2. Menampilkan Data dengan API dan Token di Laravel Part 2 read more

📰 3. Cara Membuat Custom Registrasi dan Prosesnya di Laravel Part 1 read more

📰 4. Cara Membuat Custom Login di Laravel Part 2 read more

Cara Membuat Dropdown Select Input di Flutter

1. Buatlah sebuah project flutter baru dengan nama bebas. Gunakan flutter versi terbaru atau flutter yang mendukung null safety.

2. Buka lib/main.dart lalu ganti dengan script di bawah ini.

import 'package:flutter/material.dart';

  void main() {
    runApp(MyApp());
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Form Example',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyForm(),
      );
    }
  }
  
  class MyForm extends StatefulWidget {
    @override
    _MyFormState createState() => _MyFormState();
  }
  
  class _MyFormState extends State<MyForm> {
    final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
    String? name;
    String? gender;
    String? religion;
    String? education;
  
    List<String> genderOptions = ['Male', 'Female'];
    List<String> religionOptions = [
      'Islam',
      'Christianity',
      'Catholicism',
      'Hinduism',
      'Buddhism'
    ];
    List<String> educationOptions = [
      'Elementary School',
      'Junior High School',
      'Senior High School',
      'Bachelor',
      'Master',
      'Doctorate'
    ];
  
    String result = '';
  
    void _submitForm() {
      if (_formKey.currentState!.validate()) {
        _formKey.currentState!.save();
        setState(() {
          result =
              'Name: $name\n\nGender: $gender\n\nReligion: $religion\n\nEducation: $education';
        });
      }
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Form Example'),
        ),
        body: SingleChildScrollView(
          padding: EdgeInsets.all(20.0),
          child: Form(
            key: _formKey,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                TextFormField(
                  decoration: InputDecoration(
                    labelText: 'Name',
                  ),
                  validator: (value) {
                    if (value!.isEmpty) {
                      return 'Name cannot be empty';
                    }
                    return null;
                  },
                  onSaved: (value) {
                    name = value;
                  },
                ),
                SizedBox(height: 20.0),
                DropdownButtonFormField<String>(
                  decoration: InputDecoration(
                    labelText: 'Gender',
                  ),
                  value: gender,
                  items: genderOptions.map((String value) {
                    return DropdownMenuItem<String>(
                      value: value,
                      child: Text(value),
                    );
                  }).toList(),
                  onChanged: (newValue) {
                    setState(() {
                      gender = newValue;
                    });
                  },
                ),
                SizedBox(height: 20.0),
                DropdownButtonFormField<String>(
                  decoration: InputDecoration(
                    labelText: 'Religion',
                  ),
                  value: religion,
                  items: religionOptions.map((String value) {
                    return DropdownMenuItem<String>(
                      value: value,
                      child: Text(value),
                    );
                  }).toList(),
                  onChanged: (newValue) {
                    setState(() {
                      religion = newValue;
                    });
                  },
                ),
                SizedBox(height: 20.0),
                DropdownButtonFormField<String>(
                  decoration: InputDecoration(
                    labelText: 'Education',
                  ),
                  value: education,
                  items: educationOptions.map((String value) {
                    return DropdownMenuItem<String>(
                      value: value,
                      child: Text(value),
                    );
                  }).toList(),
                  onChanged: (newValue) {
                    setState(() {
                      education = newValue;
                    });
                  },
                ),
                SizedBox(height: 20.0),
                ElevatedButton(
                  onPressed: _submitForm,
                  child: Text('Submit'),
                ),
                SizedBox(height: 20.0),
                Text(
                  result,
                  style: TextStyle(fontSize: 18.0),
                ),
              ],
            ),
          ),
        ),
      );
    }
  }

Penjelasan Script di atas:

1. import 'package:flutter/material.dart';: Baris ini mengimpor pustaka Flutter yang diperlukan untuk mengembangkan antarmuka pengguna.
2. void main() { ... }: Fungsi main adalah fungsi utama yang pertama kali dijalankan saat aplikasi dimulai. Fungsi ini menjalankan aplikasi Flutter dengan menjalankan widget MyApp().
3. class MyApp extends StatelessWidget { ... }: Ini adalah kelas yang mewakili aplikasi utama. Ini adalah turunan dari StatelessWidget yang berarti tidak memiliki state yang berubah selama eksekusi aplikasi.
4. build(BuildContext context) { ... }: Metode build adalah metode yang didefinisikan oleh StatelessWidget yang menggambarkan antarmuka pengguna aplikasi. Metode ini mengembalikan tampilan antarmuka pengguna yang diinginkan. Di sini, kita mengembalikan widget MaterialApp yang berisi judul, tema, dan tampilan form MyForm().
5. class MyForm extends StatefulWidget { ... }: Ini adalah kelas yang mewakili form yang berubah-ubah di aplikasi. Ini adalah turunan dari StatefulWidget yang berarti memiliki state yang berubah selama eksekusi aplikasi.
6. class _MyFormState extends State<MyForm> { ... }: Ini adalah kelas yang mewakili state dari form. Ini adalah turunan dari State yang menghubungkan antarmuka pengguna dengan state yang terkait.
7. final GlobalKey<FormState> _formKey = GlobalKey<FormState>();: Ini adalah kunci global yang digunakan untuk mengakses dan memvalidasi status form. Ini digunakan dalam widget Form untuk menghubungkan form dengan kunci.
8. String? name;: Variabel untuk menyimpan nilai input nama dari TextFormField.
9. String? gender;: Variabel untuk menyimpan nilai input jenis kelamin dari DropdownButtonFormField.
10. String? religion;: Variabel untuk menyimpan nilai input agama dari DropdownButtonFormField.
11. String? education;: Variabel untuk menyimpan nilai input pendidikan terakhir dari DropdownButtonFormField.
12. List<String> genderOptions = ['Male', 'Female'];: Variabel untuk menyimpan opsi jenis kelamin yang akan ditampilkan dalam DropdownButtonFormField.
13. List<String> religionOptions = ['Islam', 'Christianity', 'Catholicism', 'Hinduism', 'Buddhism'];: Variabel untuk menyimpan opsi agama yang akan ditampilkan dalam DropdownButtonFormField.
14. List<String> educationOptions = ['Elementary School', 'Junior High School', 'Senior High School', 'Bachelor', 'Master', 'Doctorate'];: Variabel untuk menyimpan opsi pendidikan terakhir yang akan ditampilkan dalam DropdownButtonFormField.
15. String result = '';: Variabel untuk menyimpan hasil dari form yang akan ditampilkan sebagai teks.
16. void _submitForm() { ... }: Metode yang dipanggil ketika tombol submit ditekan. Metode ini memvalidasi form dan menyimpan nilai input ke dalam variabel name, gender, religion, dan education. Hasilnya akan ditampilkan dalam variabel result.
17. build(BuildContext context) { ... }: Metode build dari MyForm yang menggambarkan antarmuka pengguna dari form. Di sini, kita menggunakan Scaffold sebagai kerangka utama dan menempatkan elemen-elemen form di dalamnya.
18. TextFormField: Widget untuk input teks yang digunakan untuk memasukkan nama. Properti validator digunakan untuk memvalidasi input, sedangkan onSaved digunakan untuk menyimpan nilai input ke dalam variabel name.
19. SizedBox: Widget yang digunakan untuk memberikan ruang kosong (jarak) antara elemen-elemen dalam tampilan.
20. DropdownButtonFormField: Widget untuk dropdown select input yang digunakan untuk memilih jenis kelamin, agama, dan pendidikan terakhir. Properti value digunakan untuk menyimpan nilai saat ini, items digunakan untuk menentukan pilihan yang tersedia, dan onChanged digunakan untuk memperbarui nilai saat dipilih.
21. ElevatedButton: Widget untuk tombol submit. Properti onPressed digunakan untuk menentukan fungsi yang akan dijalankan ketika tombol ditekan.
22. Text: Widget untuk menampilkan teks hasil dari form.

Ok sekarang jalankan emulator. Jika berhasil maka tampilannya akan terlihat seperti gambar di bawah ini.

      

Mudah bukan?, sekarang kalian dapat membuat dropdown select input dan mengimplementasikannya di project yang sebenarnya. Lakukan improvisasi dengan menggunakan data yang bersumber dari internet agar pilihan jawabannya lebih beragam.

Sekian tutorial kali ini tentang cara membuat dropdown select input di flutter. Semoga tulisan singkat ini membantu. Jika ada pertanyaan silahkan tanya langsung di kolom komentar di bawah ini. Sekian dan terima gaji.