9

I want to retrieve data from the API and show it in the flutter drop down options.

API - http://webmyls.com/php/getdata.php

How to write the code to show the data from the API?

1 Answer 1

48

I am using your code only and edit just one line and it works like charm.

import "package:flutter/material.dart";
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;

void main() => runApp(MaterialApp(
      title: "Hospital Management",
      home: MyApp(),
    ));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _mySelection;

  final String url = "http://webmyls.com/php/getdata.php";

  List data = List(); //edited line

  Future<String> getSWData() async {
    var res = await http
        .get(Uri.encodeFull(url), headers: {"Accept": "application/json"});
    var resBody = json.decode(res.body);

    setState(() {
      data = resBody;
    });

    print(resBody);

    return "Sucess";
  }

  @override
  void initState() {
    super.initState();
    this.getSWData();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("Hospital Management"),
      ),
      body: new Center(
        child: new DropdownButton(
          items: data.map((item) {
            return new DropdownMenuItem(
              child: new Text(item['item_name']),
              value: item['id'].toString(),
            );
          }).toList(),
          onChanged: (newVal) {
            setState(() {
              _mySelection = newVal;
            });
          },
          value: _mySelection,
        ),
      ),
    );
  }
}

enter image description here Do you want to achieve something else?

Sign up to request clarification or add additional context in comments.

8 Comments

I have another api Api = webmyls.com/sts/get_advisor_village_sanch_acharya.php I need to have two drop down 1) First drop down Option -> Data should have the name field from "advisor" table 2) Second Drop Down Option -> Based on the option selected in the first drop down, the field "sanch_name" from the "sanch: " should be displayed ex. If Drop down 1 selected the name: "chidambaram", this table has the value of sanch_id: "2". In this case the second dropdown should show the sanch_name which hold id = 2. Kindly help me with this
Why do you want 3rd as dropdown? I think it should be a text which displays "Sriperumbadur II"
Some of the Id will have multiple rows in the table.
did you get answer for the multiple dynamic dropdown list?
Thanks for this but I am facing an error, as I page I am using contains multiple inputs, and the data are passed from another page using a modal class. There should be exactly one item with [DropdownButton]'s value: CT. Either zero or 2 or more [DropdownMenuItem]s were detected with the same value 'package:flutter/src/material/dropdown.dart': Failed assertion: line 834 pos 15: 'items == null || items.isEmpty || value == null || items.where((DropdownMenuItem<T> item) { return item.value == value; }).length == 1'
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.