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 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 :

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(
          mainAxisAlignment: MainAxisAlignment.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 :

https://gist.github.com/alamsyahh15/9e2fbf1b0bdb546a7b9cf96c39a1f8c0

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;
  List<dynamic> _dataProvince = List();
  void getProvince() async {
    final respose = await http.get(_baseUrl + "getProvince1"); //untuk melakukan request ke webservice
    var listData = jsonDecode(respose.body); //lalu kita decode hasil datanya 
    setState(() {
      _dataProvince = listData; // dan kita set kedalam variable _dataProvince
    });
    print("data : $listData");
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getProvince(); //Ketika pertama kali membuka home screen makan method ini dijalankan untuk pertama kalinya juga
  }

  @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),
            )
          ],
        ),
      ),
    );
  }
}

Ketika kita running maka tampilannya seperti ini :

Atau kalian dapat mengunjugin medium saya di link dibawah ini

https://medium.com/@alamsyah15/flutter-dropdown-menu-from-rest-api-aca3ba6dc04d