UDACODING

Posts

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(
          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();
}
Screenshot_2020-03-01_21-23-00-1024x232 Flutter Dropdown Menu From Rest API

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 :

Screenshot_1583073409-576x1024 Flutter Dropdown Menu From Rest API

Atau kalian dapat mengunjugin medium saya di link dibawah ini

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

1 Comment :

  1. […] Flutter Dropdown Menu From Rest API […]

    Reply

Leave a Reply :

* Your email address will not be published.