Flutter Dropdown Menu From Rest API

Asslamu’alaikum Wr. Wb.

Hallo sobat flutter kembali lagi di posting saya , pada postingan kali ini saya akan membahas tentang Dropdown Menu Button apasih Dropdown Menu Button itu, Dropdown Menu Button adalah sebuah menu yang menampilkan sebuah daftar data yang fungsinya untuk memilih suatu nilai data itu sendiri untuk di inputkan kedalam suatu data global, tapi pada postingan kali ini kita akan menggukan rest api sebagai datanya okeh langsung saja kita mulai:

1. Pertama kita buat project flutter baru terlebih dahulu dengan nama project flutter dropdown
2. Sebelum itu kita mengoding hal yang harus di perhatikan pastikan kalian sudah mempunyai backend list sebuah array yang berbentuk json disini saya mempunyai sample backend nama nama provinsi
3. kemudian kita juga membutuhkan library dependencies http untuk melakukan request kita terhadap server dengan menambahkan script berikut di bagian pubspec.yaml :

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  http:  

4. Jangan lupa kita package get atau flutter get package untuk mendownload dan mensync kedalam project kita

5. Setelah itu edit main.dart nya dengan hapus semua dan kita akan menaruh home nya di class HomeScreen kurang lebih seperti ini :

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() => runApp(MaterialApp(
  home: HomeScreen(),
));

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Dropdown Menu Button")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[

          ],
        ),
      ),
    );
  }
}

6. Kemudian kita buat sebuah method request terhadap webservice atau backend kita lalu kita test dengan cetak print dengan mengetikan script berikut :

String _baseUrl = "http://192.168.10.232/news_server/index.php/Api/";
List _dataProvince;
void getProvince() async {
  final respose = await http.get(_baseUrl + "getProvince1"); 
  var listData = jsonDecode(respose.body); 
  print("data : $listData"); 
  setState(() {
    _dataProvince = listData;
  });
}

@override
void initState() {
  // TODO: implement initState
  super.initState();
  getProvince(); 
}

7. Kemudian kita buat menu Dropdownnya dengan mengetikan source code berikut ini :

class _HomeScreenState extends State<HomeScreen> {
  String _baseUrl = "http://192.168.10.232/news_server/index.php/Api/";
  String _valProvince;
  List<dynamic> _dataProvince = List();
  void getProvince() async {
    final respose = await http.get(_baseUrl + "getProvince1");
    var listData = jsonDecode(respose.body);
    setState(() {
      _dataProvince = listData;
    });
    print("data : $listData");
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getProvince();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Dropdown Menu Button JSON")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            DropdownButton(
              hint: Text("Select Province"),
              value: _valProvince,
              items: _dataProvince.map((item) {
                return DropdownMenuItem(
                  child: Text(item['province']),
                  value: item['province'],
                );
              }).toList(),
              onChanged: (value) {
               setState(() {
                 _valProvince = value;
               });
              },
            ),
            Text(
              "Kamu memilih provinsi $_valProvince",
              style: TextStyle(
                  color: Colors.black,
                  fontSize: 20,
                  fontWeight: FontWeight.bold),
            )
          ],
        ),
      ),
    );
  }
}

8. Maka kurang lebih untuk full source code nya seperti ini :