Kali ini kami akan membahas tentang Cara Penggunaan Dropdown pada Flutter. Mari kita mulai. Secara sederhana seperti ini penggunaanya

String dropdownValue = 'Merah';

DropdownButton<String>(
              value: dropdownValue,
              onChanged: (String newValue) {
                setState(() {
                  dropdownValue = newValue;
                });
              },
              items: <String>['Merah', 'Kuning', 'Hijau']
                  .map<DropdownMenuItem<String>>(
                (String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                },
              ).toList(),
            );

dari script diatas akan menghasilkan seperti ini

Cara Penggunaan Dropdown pada FlutterLalu bagaimana jika kita ingin menggunakan json dari yang kita dapatkan menggunakan url ?



Cara Penggunaan Dropdown pada Flutter

Sekarang kami akan menggunakan json yang berasal dari https://jsonplaceholder.typicode.com/users. Formatnya seperti ini

[
 {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "Shanna@melissa.tv",
    "address": {
      "street": "Victor Plains",
      "suite": "Suite 879",
      "city": "Wisokyburgh",
      "zipcode": "90566-7771",
      "geo": {
        "lat": "-43.9509",
        "lng": "-34.4618"
      }
    },
    "phone": "010-692-6593 x09125",
    "website": "anastasia.net",
    "company": {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
    }
  },
...
]

Namun, kita hanya akan menggunakan field id & name. Ok, pertama kita harus membaca json tersebut melalui aplikasi kita. Jadi kita membutuhkan sebuah package yang bernama http. Tambahkan package tersebut kedalam file pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2
  http: ^0.12.0+1

lalu jalankan flutter pub get

Setelah itu kita harus mengimport package diatas dengan cara import 'package:http/http.dart' as http;. Kita akan menggunakan Future, berikut caranya

Future<String> getData() async {
   var res = await http.get(
       Uri.encodeFull("https://jsonplaceholder.typicode.com/users"),
       headers: {"Accept": "application/json"});
   var resBody = json.decode(res.body);
   return "Sucess";
 }

jika anda menambahkanprint(resBody); anda akan melihat json dari url “https://jsonplaceholder.typicode.com/users”. Sekarang bagaimana cara memunculkannya ?

Pertama kita harus mendeklarkan List

List data = List();

Jadi, kita akan memasukan response json tadi kedalam variable data dengan data.add(resBody). Jadi kita akan mengubah fungsi getData() mejadi seperti ini

Future<String> getData() async {
  var res = await http.get(
      Uri.encodeFull("https://jsonplaceholder.typicode.com/users"),
      headers: {"Accept": "application/json"});
  var resBody = json.decode(res.body);
  data.add(resBody)
  return "Sucess";
}




Sekarang bagian dropdwonnya , berikut adalah script dropdownnya

DropdownButton(
                  hint: new Text("--Choose--"),
                  items: data.map((item) {
                    return new DropdownMenuItem(
                      child: new Text(item["name"].toString()),
                      value: item["id"].toString(),
                    );
                  }).toList(),
                  onChanged: (newValue) {
                    setState(() {
                      dropdownValue = newValue;
                    });
                  },
                  value: dropdownValue,
                ),

Secara keseluruhan berikut adalah scriptnya

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Mengenal Column dan Row'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List data = List();
  String dropdownValue = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                width: MediaQuery.of(context).size.width * .50,
                child: DropdownButton(
                  hint: new Text("--Choose--"),
                  items: data.map((item) {
                    return new DropdownMenuItem(
                      child: new Text(item["name"].toString()),
                      value: item["id"].toString(),
                    );
                  }).toList(),
                  onChanged: (newValue) {
                    setState(() {
                      dropdownValue = newValue;
                    });
                  },
                  value: dropdownValue,
                ),
              ),
              FlatButton(
                child: Text("Submit"),
                onPressed: () {
                  print(dropdownValue);
                },
              )
            ],
          ),
        ));
  }

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

  Future<String> getData() async {
    var res = await http.get(Uri.encodeFull("https://jsonplaceholder.typicode.com/users"));
    var resBody = json.decode(res.body);
    setState(() {
      data.addAll(resBody);
    });
    return "Sucess";
  }
}

Sekian semoga artikel ini bermanfaat.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Kami memberikan tutorial baru tiap harinya !!!

You have Successfully Subscribed!