Flutter Membuat Widget Dropdown dengan API Source

Sobatcoding.com - Tutorial membuat Dropdown menggunakan data source API

Pada artikel sebelumnya kita telah belajar cara menampilkan listview dengan API JSON android dengan bahasa flutter, kali ini kita akan mencoba menampilkan data dari API berupa format JSON dan menampilkannya pada widget Dropdown. Bagaimana caranya? Ikuti langkah berikut.

Pada artikel kali ini kita akan mencoba membuat tutorial menampilkan data static dan dinamis menggunakan datasource API.

Membuat View Page

Kita buat terlebih dahulu halaman view

import 'dart:convert';

import 'package:androidflutter/models/cities.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class DropdownPage extends StatefulWidget {
  const DropdownPage({Key? key}) : super(key: key);

  @override
  _DropdownPageState createState() => _DropdownPageState();
}

class _DropdownPageState extends State<DropdownPage> {
  
  @override
  void initState() {
    super.initState();
  }

  @override
  dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Demo Dropdwon"),
        ),
        body: Center(
          child: ListView(children:  [
            const Padding(
              padding: EdgeInsets.all(8.0),
              child:  Text("List Kota Static"),
            ),
            const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text("List Kota dengan API"),
            ),
          ],),
    ));
  }
}

Membuat variable Data

Tambahkan beberapa variable berikut.

  String? txtCity, txtCityStatic;
  //variabel untuk menyimpan data API
  List<Cities> listCities = [];
 //set data kota secara manual
  List<Cities> listCitiesStatic = [
    Cities(id: 1, name: "Jakarta"),
    Cities(id: 2, name: "Bandung"),
    Cities(id: 3, name: "Semarang"),
    Cities(id: 4, name: "Surabaya"),
    Cities(id: 5, name: "Yogyakarta"),
  ];

Get Data dari REST API

Membuat function untuk mengambil data dari API

getAPICities() async {
    try {
      final response = await http.get(
          Uri.parse("https://api.sobatcoding.com/testing/cities"),
          headers: {
            'Content-Type': 'application/json; charset=UTF-8',
          });

      if (response.statusCode == 200) {
        final dataDecode = jsonDecode(response.body);
        setState(() {
          for (var i = 0; i < dataDecode.length; i++) {
            listCities.add(Cities.fromJson(dataDecode[i]));
          }
        });
      }
    } catch (e) {
      debugPrint('$e');
    }
  }

Kemudian tambahkan ke dalam initState.

@override
  void initState() {
    getAPICities();
    super.initState();
  }

Menampilkan Data ke Dropdown

Buatlah sebuah widget untuk menampilkan data static ke dropdown dengan kode berikut.

Widget dropdownStatic() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: DropdownButtonFormField<String>(
        isExpanded: true,
        hint: const Text("Pilih Kota Yang Dituju"),
        value: txtCityStatic,
        items: listCitiesStatic
            .map((data) => DropdownMenuItem<String>(
                  child: Text(data.name.toString()),
                  value: data.id.toString(),
                ))
            .toList(),
        onChanged: (value) {
          //
        },
        validator: (value) => value == null ? 'Pilih kota yang dituju' : null,
      ),
    );
  }

Buatlah sebuah widget untuk menampilkan data API ke dropdown dengan kode berikut.

Widget dropdownAPI() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: DropdownButtonFormField<String>(
        isExpanded: true,
        hint: const Text("Pilih Kota Yang Dituju"),
        value: txtCity,
        items: listCities
            .map((data) => DropdownMenuItem<String>(
                  child: Text(data.name.toString()),
                  value: data.id.toString(),
                ))
            .toList(),
        onChanged: (value) {
          //
        },
        validator: (value) => value == null ? 'Pilih kota yang dituju' : null,
      ),
    );
  }

Kita tambahkan kedua widget tersebut ke dalam body sehingga kode menjadi seperti berikut.

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Demo Dropdwon"),
        ),
        body: Center(
          child: ListView(children:  [
            const Padding(
              padding: EdgeInsets.all(8.0),
              child:  Text("List Kota Static"),
            ),
            dropdownStatic(),
            const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text("List Kota dengan API"),
            ),
            dropdownAPI(),
          ],),
    ));
  }

Sekian tutorial kali ini. Jika teman-teman memiliki pertanyaan atau saran mengenai artikel ini, jangan ragu untuk meninggalkan komentar pada form di bawah ini.

Semoga bermanfaat.