Cara Membuat Dropdown Select dengan API di Flutter

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

Latihan kita kali ini adalah membuat dropdown select dengan data yang bersumber dari API. Terkadang kita perlu mengambil data secara dinamis dari internet untuk ditampilkan dalam pilihan dropdown, maka hal itu cukup penting untuk dipelajari.

Kita menggunakan data api dari https://dummyjson.com/products/categories. Nantinya akan ditampilkan di dalam pilihan dropdown. Isinya adalah kategori produk. Sebelum ini saya juga sudah membuat artikel tentang cara membuat dropdown select dengan data statik https://www.sahretech.com/2023/06/cara-membuat-dropdown-select-input-di.html. Scroll ke bawah untuk melihat hasil akhirnya

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 dengan Data API di Flutter

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

2. Buka pubspec.yaml. Lalu tambahkan paket http: seperti gambar di bawah ini.

Mengunduh Paket

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

import 'package:flutter/material.dart';
  import 'package:http/http.dart' as http;
  import 'dart:convert';
  
  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? selectedCategory;
    List<String> categoryOptions = [];
  
    String result = '';
  
    @override
    void initState() {
      super.initState();
      fetchCategories();
    }
  
    Future<void> fetchCategories() async {
      try {
        var response = await http.get(Uri.parse('https://dummyjson.com/products/categories'));
        if (response.statusCode == 200) {
          var data = jsonDecode(response.body);
          
          setState(() {
            categoryOptions = List<String>.from(data);
          });
  
        } else {
          print('Failed to fetch categories: ${response.statusCode}');
        }
      } catch (error) {
        print('Error fetching categories: $error');
      }
    }
  
    void _submitForm() {
      if (_formKey.currentState!.validate()) {
        _formKey.currentState!.save();
        setState(() {
          result = 'Selected Category: $selectedCategory';
        });
      }
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: const Text('Form Example'),
        ),
        body: SingleChildScrollView(
          padding: const EdgeInsets.all(20.0),
          child: Form(
            key: _formKey,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                DropdownButtonFormField<String>(
                  decoration: const InputDecoration(
                    labelText: 'Category',
                  ),
                  value: selectedCategory,
                  items: categoryOptions.map((String value) {
                    return DropdownMenuItem<String>(
                      value: value,
                      child: Text(value),
                    );
                  }).toList(),
                  onChanged: (newValue) {
                    setState(() {
                      selectedCategory = newValue;
                    });
                  },
                ),
                const SizedBox(height: 20.0),
                ElevatedButton(
                  onPressed: _submitForm,
                  child: const Text('Submit'),
                ),
                const SizedBox(height: 20.0),
                Text(
                  result,
                  style: const TextStyle(fontSize: 18.0),
                ),
              ],
            ),
          ),
        ),
      );
    }
  }

Penjelasan Script di atas:

1. import 'package:flutter/material.dart';: Mengimpor paket Flutter material, yang menyediakan komponen dan widget antarmuka pengguna.
2. import 'package:http/http.dart' as http;: Mengimpor paket http untuk melakukan permintaan HTTP.
3. import 'dart:convert';: Mengimpor pustaka dart:convert untuk mengelola data JSON.
4. void main() { ... }: Titik masuk aplikasi Flutter. Menjalankan widget MyApp.
5. class MyApp extends StatelessWidget { ... }: Mendefinisikan widget Flutter bernama MyApp. Ini mewakili akar aplikasi dan mengatur tema serta rute awal.
6. class MyForm extends StatefulWidget { ... }: Mendefinisikan widget stateful MyForm yang mengembangkan StatefulWidget. Ini menyimpan state yang dapat berubah untuk formulir.
7. final GlobalKey<FormState> _formKey = GlobalKey<FormState>();: Membuat kunci global untuk widget formulir. Kunci ini digunakan untuk mengidentifikasi dan memvalidasi formulir.
8. String? selectedCategory;: Mendeklarasikan variabel string yang dapat bernilai null untuk menyimpan nilai kategori yang dipilih.
9. List<String> categoryOptions = [];: Mendeklarasikan daftar kosong untuk menyimpan opsi kategori yang diambil dari API.
10. String result = '';: Mendeklarasikan variabel string kosong untuk menyimpan hasil pengiriman formulir.
11. void initState() { ... }: Menge-override metode initState. Ini adalah metode siklus hidup yang dipanggil ketika widget dimasukkan ke dalam pohon. Metode ini memanggil metode fetchCategories untuk mengambil opsi kategori.
12. Future<void> fetchCategories() async { ... }: Mendefinisikan metode asinkron fetchCategories untuk mengambil opsi kategori dari API.
13. var response = await http.get(Uri.parse('https://dummyjson.com/products/categories'));: Mengirimkan permintaan HTTP GET ke URL yang ditentukan menggunakan paket http dan menunggu responsenya.
14. if (response.statusCode == 200) { ... }: Memeriksa apakah respons HTTP berhasil (kode status 200).
15. var data = jsonDecode(response.body);: Mem-parsing isi respons dari format JSON ke objek Dart.
16. setState(() { ... }): Memperbarui state widget dengan opsi kategori yang diambil.
17. void _submitForm() { ... }: Mendefinisikan metode _submitForm yang dipanggil saat formulir dikirimkan.
18. if (_formKey.currentState!.validate()) { ... }: Memvalidasi formulir menggunakan kunci formulir dan memeriksa apakah semua bidang formulir valid.
19. _formKey.currentState!.save();: Menyimpan nilai bidang formulir saat ini.
20. setState(() { ... }): Memperbarui state widget dengan nilai kategori yang dipilih.
21. Widget build(BuildContext context) { ... }: Menge-override metode build untuk membangun hirarki widget.
22. DropdownButtonFormField<String>( ... ): Membuat widget dropdown button form field. Ini menampilkan daftar dropdown opsi kategori.
23. ElevatedButton( ... ): Membuat widget tombol untuk mengirimkan formulir.
24. Text( ... ): Menampilkan hasil pengiriman formulir.

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

  

Mudah bukan?, sekarang kalian bisa naik level dengan menggunakan dropdown search. Fitur ini sangat memudahkan user mencari pilihan data jika data yang ditampilkan sangat banyak. Kalian dapat mengikuti tutorial saya sebelumnya https://www.sahretech.com/2022/04/membuat-dropdown-search-di-flutter.html dan https://www.sahretech.com/2022/04/cara-mudah-membuat-aplikasi-cek-ongkir.html

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