Posts

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 melanjutkan materi yang kemarin menggukan rest api sebagai datanya dan kita akan buat bercabang atau saling berhubungan contohnya ketika kita memilih suatu tujuan lokasi pada saat pembelian kita akan di tampilkan sebuah dropdown dengan sebuah list array provinsi dan setelah selesai memilih array provinsi maka akan muncul otomatis list arrray kota sesuai dengan provinsi yang kita pilih okeh langsung saja kita mulai:

1. Sebelumnya kita telah membuat project ini pada saat kemarin kalian dapat melihat projectnya di link berikut ini :

https://www.udacoding.com/newuda/newuda/newuda/flutter-dropdown-menu-from-rest-api/

2. Lalu kita bisa tambahkan sebuah method baru yang mana itu untuk mengirim request terhadap webservice disini saya menggunakan contoh setelah memilih provinsi maka dia akan melakukan request untuk meminta data kota sesuai dengan id provinsi nya maka kita akan membuat sebuah fungsi method yang mana dia membutuhkan parameter id provinsi itu sendiri kurang lebih seperti ini:

String baseUrl = "http://192.168.10.232/news_server/index.php/Api/";
String _valProvince, _valCity;
List<dynamic> _dataProvince = List(), _dataCity = List();

// Method Get Province
void getProvince() async {
  final response = await http.get(baseUrl + "getProvince1"); //untuk melakukan request ke webservice
  var listData = jsonDecode(response.body); //lalu kita decode hasil datanya
  setState(() {
    _dataProvince = listData; // dan kita set kedalam variable _dataProvince
  });
  print("Data Province : $listData");
}


//Method get City sesuai dengan id Provinsi
void getCity(String idProvince)async{
  final response = await http.post(baseUrl + "getCity",body: {
    'id' : idProvince
  }); //untuk melakukan request ke webservice

  var listData = jsonDecode(response.body);  //lalu kita decode hasil datanya
  setState(() {
    _dataCity = listData;  // dan kita set kedalam variable _dataCity
  });
  print("Data City : $listData");
}

3. Setelah terbuat maka ada sedikit perubahan pada dropdown button yang pertama, dikarenakan pada suatu saat ketika melakukan request untuk meminta data city atau kota kita memerlukan id provinsi maka value pada dropdown provinsi kita ganti menjadi nilai id nya bukan nilai nama provinsinya dan pada bagian onchange setelah kita men set atau memberi tahu ada perubahan di dalam _valProvince maka kita jalan kan juga fungsi method untuk merequest data kota yang tadi telah kita buat yang mana isian parameter nya adalah value itu sendiri kurang lebih seperti ini :

Text("Silahkan pilih provinsi tujuan"),

DropdownButton(
  hint: Text("Select Province"),
  value: _valProvince,
  items: _dataProvince.map((item){
    return DropdownMenuItem(
      child: Text(item['province']),
      value: item['id'],
    );
  }).toList(),
  onChanged: (value) {
    setState(() {
      _valProvince = value;
    });
    getCity(value);
  },
),

4. Kemudian kita buat Dropdown yang kedua untuk menu list kota nya seperti ini :

Text("Silahkan pilih kota tujuan"),
DropdownButton(
  hint: Text("Select City"),
  value: _valCity,
  items: _dataCity.map((item){
    return DropdownMenuItem(
      child: Text("${item['type']} ${item['city']}"),
      value: item['id'],
    );
  }).toList(),
  onChanged: (value) {
    setState(() {
      _valCity = value;
    });
  },
),

5. Oke pada tahap kali ini kita dapat menampilkan kota sesuai dengan nama nya akan tetapi masih ada problem satu lagi, yah benar pada saat kita mengganti pilihan provinsi untuk kedua kalinya maka aplikasi kita akan memunculkan sebuah error seperti ini :

Nah disini error nya menjelaskan bahwa item atau value nya harus null nah pertanyaanya value siapa yang harus kita null, yah benar valuenya si kota atau city jadi ketika kita memilih provinsi untuk kedua kalinya maka kita harus mereset ulang nilai value pada nilai value kota menjadi null lagi, lalu dimana kita mereset nilai value nya yaitu pada saat terjadi perubahan pada saat mengganti provinsi, yah benar kita taruh pada setState perubahan provinsi kurang lebih seperti ini :

DropdownButton(
  hint: Text("Select Province"),
  value: _valProvince,
  items: _dataProvince.map((item){
    return DropdownMenuItem(
      child: Text(item['province']),
      value: item['id'],
    );
  }).toList(),
  onChanged: (value) {
    setState(() {
      _valProvince = value;
      _valCity = null;
    });
    getCity(value);
  },
),

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

https://gist.github.com/alamsyahh15/4ad0f73512fffc8806de3631ce6d9034#file-dropdown_cabang-dart

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> {
  String baseUrl = "http://192.168.10.232/news_server/index.php/Api/";
  String _valProvince, _valCity;
  List<dynamic> _dataProvince = List(), _dataCity = List();


  void getProvince() async {
    final response = await http.get(baseUrl + "getProvince1"); //untuk melakukan request ke webservice
    var listData = jsonDecode(response.body); //lalu kita decode hasil datanya
    setState(() {
      _dataProvince = listData; // dan kita set kedalam variable _dataProvince
    });
    print("Data Province : $listData");
  }


  void getCity(String idProvince)async{
    final response = await http.post(baseUrl + "getCity",body: {
      'id' : idProvince
    });

    var listData = jsonDecode(response.body);
    setState(() {
      _dataCity = listData;
    });
    print("Data City : $listData");
  }


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



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Dropdown Bercabang"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Text("Silahkan pilih provinsi tujuan"),

            DropdownButton(
              hint: Text("Select Province"),
              value: _valProvince,
              items: _dataProvince.map((item){
                return DropdownMenuItem(
                  child: Text(item['province']),
                  value: item['id'],
                );
              }).toList(),
              onChanged: (value) {
                setState(() {
                  _valProvince = value;
                  _valCity = null;
                });
                getCity(value);
              },
            ),


            Text("Silahkan pilih kota tujuan"),
            DropdownButton(
              hint: Text("Select City"),
              value: _valCity,
              items: _dataCity.map((item){
                return DropdownMenuItem(
                  child: Text("${item['type']} ${item['city']}"),
                  value: item['id'],
                );
              }).toList(),
              onChanged: (value) {
                setState(() {
                  _valCity = value;
                });
              },
            ),

          ],
        ),
      ),
    );
  }
}

7. Maka ketika kita running maka tampilannya seperti ini :

Kalian juga dapat melihat postingan saya di link bawah ini :

https://medium.com/@alamsyah15/flutter-branched-dropdown-menu-from-rest-api-7e587e3895e