Halo teman Flutter! Pada artikel kali ini saya ingin membahas tentang “How to Use Dropdown with Rest API”.

Drop-down merupakan sebuah button widget pada Flutter yang memungkinkan pengguna dapat memilih satu nilai dari daftar. Ketika daftar drop-down tidak aktif, daftar menu hanya menampilkan satu nilai. Ketika diaktifkan, menu menampilkan daftar nilai, yang dimana pengguna dapat memilih salah satu dari daftar yang tersedia.

1. Tambahkan library berikut pada pubspec.yaml.

shared_preferences: ^2.0.6
provider: ^6.0.0
http: ^0.13.3

2. Buatlah class dengan nama Constant.dart. class ini berfungsi sebagai tempat pemanggilan link API yang akan digunakan.

class Constant {
  static String SatuURL = "Isi link API nya disini ya";
  static String DuaURL = "Isi link API nya disini ya";
  static String TigaURL = "Isi link API nya disini ya";
}

3. Buatlah tampilan UI sesuai kebutuhan.

Container(
                      margin: EdgeInsets.symmetric(horizontal: 17, vertical: 1),
                      padding:
                          EdgeInsets.symmetric(horizontal: 10, vertical: 1),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        border: Border.all(color: Color(0XFFF2F2F2), width: 2),
                        boxShadow: [
                          BoxShadow(color: Colors.white, spreadRadius: 1)
                        ],
                      ),
                      child: DropdownButtonHideUnderline(
                        child: DropdownButton(
                          
                        ),
                      ),
                    ),

4. Buatlah sebuah provider dropdown untuk menyimpan token serta link API menggunakan state management provider.

import 'dart:convert';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:shared_preferences/shared_preferences.dart';

class DropdownProvider extends ChangeNotifier {
 
  bool loading = true;
  List listRiwayat = []; //tambahkan list dropdown
  List listQori = [];
  List listBahasa = [];
  var itemRiwayat;
  var itemQori;
  var itemBahasa; //tambahkan variabel


  Future<void> getRiwayat(BuildContext context) async {
    loading = true;
    notifyListeners();
    SharedPreferences pref = await SharedPreferences.getInstance();
    String? token = pref.getString('accesToken');

    http.Response res = await http.get(Uri.parse(Constant.SatuURL),  //panggil dari dalam constant
        headers: {'Authorization': 'Bearer ${token}'});

    print(res.body);
    loading = false;
    notifyListeners();

    if (res.statusCode == 200) {
      var dataRiwayat = jsonDecode(res.body);
      listRiwayat = dataRiwayat['data'];
      notifyListeners();
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Error Get Data')));
    }
  }

  Future<void> getQori(BuildContext context) async {
    loading = true;
    notifyListeners();

    SharedPreferences pref = await SharedPreferences.getInstance();
    String? token = pref.getString('accesToken');

    http.Response res = await http.get(Uri.parse(Constant.DuaURL), //panggil dari dalam constant
        headers: {'Authorization': 'Bearer ${token}'});
    print(res.body);
    loading = false;
    notifyListeners();

    if (res.statusCode == 200) {
      var dataQori = jsonDecode(res.body);
      listQori = dataQori['data'];
      notifyListeners();
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Error Get Data')));
    }
  }

  Future<void> getBahasa(BuildContext context) async {
    loading = true;
    notifyListeners();
    SharedPreferences pref = await SharedPreferences.getInstance();
    String? token = pref.getString('accesToken');

    http.Response res = await http.get(Uri.parse(Constant.TigaURL),  //panggil dari dalam constant
        headers: {'Authorization': 'Bearer ${token}'});
    print(res.body);
    notifyListeners();

    if (res.statusCode == 200) {
      var dataBahasa = jsonDecode(res.body);
      listBahasa = dataBahasa['data']; // data diambil dari API
      notifyListeners();
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text("Error Get Data")));
    }
  }
}

5. Buatlah class baru dengan nama dropdown_button. Kemudian tambahlan Multi Provider dan panggil ChangeNotifierProvider(),

@override
  Widget build(BuildContext context) {
    return MultiProvider( //Multi Provider digunakan jika banyak provider yang akan dipanggil dalam satu class
      providers: [
        ChangeNotifierProvider(
          create: (context) => DropdownProvider(context),
        ),
      ],
),
},

6. Kemudian panggil Consumer didalam class serta buat value dengan nama provider didalam parameternya.

@override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (context) => DropdownProvider(context),
        ),
      ],
      child: Consumer<DropdownProvider>(
        builder: (BuildContext context, provider, Widget? child) {
          return Scaffold();
         },
      ),
   ),
}

7. Terakhir lengkapi dengan code berikut didalam drop down yang akan digunakan.

 Container(
                      margin: EdgeInsets.symmetric(horizontal: 17, vertical: 1),
                      padding:
                          EdgeInsets.symmetric(horizontal: 10, vertical: 1),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        border: Border.all(color: Color(0XFFF2F2F2), width: 2),
                        boxShadow: [
                          BoxShadow(color: Colors.white, spreadRadius: 1)
                        ],
                      ),
                      child: 
                      DropdownButtonHideUnderline(
                        child: DropdownButton(
                          iconSize: 36,
                          icon: Icon(
                            Icons.arrow_drop_down,
                            color: Color(0xff13A89E),
                          ),
                          isExpanded: true,
                          value: provider.itemRiwayat,
                          onChanged: (value) {
                            setState(() {
                              provider.itemRiwayat = value;
                            });
                          },
                          items: provider.listRiwayat.map((item) {
                            return DropdownMenuItem(
                              child: Text(item['riwayat']),
                              value: item,
                            );
                          }).toList(),
                          hint: Padding(
                            padding: const EdgeInsets.all(10.0),
                            child: Text('Pilih Riwayat'),
                          ),
                        ),
                      ),
                    ),

8. Hasil running dari aplikasi

Selamat Mencoba sobat Flutter 🙂