Membuat Dropdown Search di Flutter Lengkap!

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara menggunakan dropdown search pada flutter. Ayo ikuti pembahaannya di bawah ini.

Drowdown Search

Dropdown adalah textfield, jika diklik maka akan menampilkan list ke bawah atau kita sebut dengan dropdown, list tersebut akan menampilkan pilihan data. Jika kalian bekerja dengan ratusan atau bahkan ribuan data, tentu fitur dropdown saja tidak cukup.

Dropdown search adalah fitur lanjutan dari dropdown. Dimana dropdown search menampilkan kotak pencarian, sehingga kita bisa menemukan data yang diinginkan hanya dengan mengetikkan kata yang dicari. Hal ini tentu lebih efektif dan efisien, karena user tidak perlu scroll ke bawah terus menerus untuk mencari data yang diinginkan.

Menambahkan Dropdown Search dan http di Flutter

Untuk membuat dropdown search di flutter sangatlah mudah. Kalian hanya perlu menambahkan package dropdown_search: di pubspec.yaml. Dan jangan lupa untuk menambahkan package http: untuk mengambil data darin internet.

Setelah instalasi selesai ikuti step di bawah ini. Di bawah ini saya membagi tutorial penggunaan dropdown search menjadi dua bagian. Pertama untuk pembuatan dropdown search sederhana, dan yang kedua penggunaan dropdown search dengan data yang besar dan bersumber dari internet.

Membuat Simple Dropdown Search

Ini adalah cara yang paling mudah untuk membuat dropdown search di flutter. Silahkan copy saja script di bawah ini dan paste pada file main.dart

    

    import 'package:dropdown_search/dropdown_search.dart';
    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatefulWidget {
      const MyApp({Key? key}) : super(key: key);
    
      @override
      State<MyApp> createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
    
      //inisialize countryname
      String? countryName;
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text("Dropdown Search"),
            ),
            body: Center(
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    DropdownSearch<String>(
                      mode: Mode.MENU,
                      showSelectedItems: true,
                      //country data as item
                      items: ["Brazil", "Itali", "Tunisia", 'Canada'],
    
                      //you can design input decroration here as you want
                      dropdownSearchDecoration: InputDecoration(
                        labelText: "Country Dropdown",
                        hintText: "Select Country",
                      ),
    
                      //what you can after clicked item
                      onChanged: (text) {
                        setState(() {
                          countryName = text;
                        });
                      },
                      showSearchBox: true,
                    ),
                    SizedBox(
                      height: 10,
                    ),
    
                    //show item clicked in text
                    Text(
                      "You choose ${countryName}",
                      style: TextStyle(fontSize: 20),
                    )
                  ],
                ),
              ),
            ),
          ),
        );
      }
    }

Silahkan jalankan script di atas untuk melihat hasilnya. Untuk contoh pertama ini saya rasa tidak ada yang sulit, kalian hanya perlu mengganti bagian items menjadi list data yang diinginkan.

Membuat Custom Dropdown Search

Kali ini kita akan coba mengambil data dari internet, lalu menampilkannya di dropdown search. Tidak hanya itu, kita juga akan mengambil id-dari setiap data yang dipilih. Jadi bukan namanya. Data yang dipilih akan ditampilkan di bagian bawah layar. Silahkan copy script di bawah ini dan paste di dalam file main.dart

    

        import 'dart:convert';

        import 'package:dropdown_search/dropdown_search.dart';
        import 'package:flutter/material.dart';
        import 'package:http/http.dart' as http;
        
        void main() {
          runApp(MyApp());
        }
        
        class MyApp extends StatefulWidget {
          const MyApp({Key? key}) : super(key: key);
        
          @override
          State<MyApp> createState() => _MyAppState();
        }
        
        class _MyAppState extends State<MyApp> {
          
          //inizialize variable
          List _get = [];
          String provinsi = '';
          int? kodeProvinsi;
        
          @override
          Widget build(BuildContext context) {
            return MaterialApp(
              home: Scaffold(
                appBar: AppBar(
                  title: Text("Dropdown Search"),
                ),
                body: Center(
                  child: Padding(
                    padding: const EdgeInsets.all(16),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        DropdownSearch<dynamic>(
        
                          //you can design textfield here as you want
                          dropdownSearchDecoration: InputDecoration(
                            labelText: "Provinsi",
                            hintText: "Pilih Provinsi",
                          ),
        
                          //have two mode: menu mode and dialog mode
                          mode: Mode.MENU,
                          //if you want show search box
                          showSearchBox: true,
        
                          //get data from the internet 
                          onFind: (text) async {
                            var response = await http.get(Uri.parse(
                                "https://dev.farizdotid.com/api/daerahindonesia/provinsi"));
        
                            if (response.statusCode == 200) {
                              final data = jsonDecode(response.body);
        
                              setState(() {
                                _get = data['provinsi'];
                              });
                            }
        
                            return _get as List<dynamic>;
                          },
        
                          //what do you want anfter item clicked
                          onChanged: (value) {
                            setState(() {                      
                              provinsi = value['nama'];
                              kodeProvinsi = value['id'];
                            });
                          },
                          
                          //this data appear in dropdown after clicked
                          itemAsString: (item) => item['nama'],
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        //show data in text
                        Text(
                          "Provinsi yang Dipilih: ${provinsi}",
                          style: TextStyle(fontSize: 18),
                        ),
                        SizedBox(height: 10,),
                        Text(
                          "Kode Provinsi yang Dipilih: ${kodeProvinsi}",
                          style: TextStyle(fontSize: 18),
                        )
                      ],
                    ),
                  ),
                ),
              ),
            );
          }
        }

Silahkan jalankan aplikasinya, jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini.

Hasil Akhir

bagaimana susah atau mudah?. Saya rasanya itu hanya kesulitan pemula saja. Silahkan bookmark artikel ini untuk memudahkan kalian mengulanginya di aplikasi selanjutnya. Pada tutorial kali ini saya belum menggunakan model.Jika kalian ingin menggunakan pemodelan bisa mengikuti tutorial saya yang ini. https://www.sahretech.com/2022/04/cara-mudah-membuat-aplikasi-cek-ongkir.html

Baca Artikel Lain ✨

📰 1. Cara Paling Mudah Membuat Login Google di Flutter read more

📰 2. CRUD Flutter + PHP + MySQL Part 2, Membuat Mobile App read more

📰 3. Membuat Aplikasi CRUD dengan Flutter dan SQFlite read more

Ok, sekian tutorial kali ini tentang cara membuat dropdown search di flutter. Semoga bermanfaat. Jika ada keluhan atau kesulitan silahkan tanya langsung di kolom komentar atau tanya langsung di fanspage sahretech. Sekian dan terima kasih.