title: How to populate data from Django REST API endpoint with flutter Dropdown widget
body: <p>I have a backend build with Django REST, with some endpoints. I need to display the list of a Country states with Flutter dropdown widget. But I am finding it difficult to display the list of states in a dropdown. What am I getting wrong and how do I go about getting it to work. </p>
  
  <p>I have followed this guide on flutter doc <a href="https://flutter.io/docs/cookbook/networking/background-parsing" rel="nofollow noreferrer">https://flutter.io/docs/cookbook/networking/background-parsing</a></p>
  
  <p>but I am still not getting it to work.</p>
  
  <p>Here is the error I am getting.</p>
  
  <pre><code>
  Compiler message:
  lib/src/ui/musicrelease/song_upload_page.dart:458:26: Error: The method
  '[]' isn't defined for the class '#lib1::States'.
  Try correcting the name to the name
  of an existing method, or defining a method named '[]'.
              value: states['id'].toString(),
                           ^^
  lib/src/ui/musicrelease/song_upload_page.dart:460:21: Error: The method '[]' isn't definedfor the class '#lib1::States'.
  Try correcting the name to the name of an existing method, or defining a method named '[]'.
                states['name'],
                      ^^lib/src/ui/musicrelease/song_upload_page.dart:492:16: Error: Getter not found: 'data'.
          items: data.map((dropDownStringItem) {
                 ^^^^
  lib/src/ui/musicrelease/song_upload_page.dart:492:16: Error: The getter 'data' isn't defined for the class '#lib1::SongUploadPageState'.
  Try correcting the name to the name of an existing getter, or defining a getter or field named 'data'.        items: data.map((dropDownStringItem) {
                 ^^^^
  Compiler failed on C:\Users\AZEEZ\IdeaProjects\vibespotcodebase\vibespot\lib/main.dartGradle task 'assembleDebug'... Done                         60.1s
  Gradle task assembleDebug failedwith exit code 1
  
  
  
  </code></pre>
  
  <p>Below is a sample of my code: </p>
  
  <p>Endpoint</p>
  
  <pre><code>http://localhost/api/state/
  </code></pre>
  
  <p>model.dart</p>
  
  <pre><code> import 'dart:convert';
  
  List&lt;States&gt; parseStates(String responseBody) {
    final parsed = json.decode(responseBody).cast&lt;Map&lt;String, dynamic&gt;&gt;();
  
    return parsed.map&lt;States&gt;((json) =&gt; States.fromJson(json)).toList();
  }
  
  class States {
    String id;
    String name;
    String countryId;
  
    States({
      this.id,
      this.name,
      this.countryId,
    });
  
    factory States.fromJson(Map&lt;String, dynamic&gt; json) =&gt; new States(
          id: json["id"],
          name: json["name"],
          countryId: json["country_id"],
        );
  
    Map&lt;String, dynamic&gt; toJson() =&gt; {
          "id": id,
          "name": name,
          "country_id": countryId,
        };
  }
  
  </code></pre>
  
  <p>services.dart</p>
  
  <pre><code>import 'package:http/http.dart' as http;
  import 'dart:async';
  import 'package:vibespot/src/models/dashboard/state_model.dart';
  
  
  Future&lt;List&lt;States&gt;&gt; fetchStates() async {
    final response = await http.get('http://localhost:8000/api/state/');
  final responsebody = parseStates(response.body);
  setState(() {
        states = responsebody;
  
      });
    return parseStates(response.body);
  }
  </code></pre>
  
  <p>ui.dart</p>
  
  <pre><code>import 'dart:async';
  import 'package:flutter/material.dart';
  import 'package:vibespot/src/models/dashboard/state_model.dart';
  import 'package:vibespot/src/services/dashboard/state_local_services.dart';
  import 'dart:io';
  
  class SongUploadPage extends StatefulWidget {
    @override
    SongUploadPageState createState() =&gt; SongUploadPageState();
  }
  
  class SongUploadPageState extends State&lt;SongUploadPage&gt; {
    var _currentItemSelected ;
    String _mySelection;
    List&lt;States&gt; states = [];
  
   @override
    void initState() {
      super.initState();
      fetchStates();
  
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text("Track",
              style: TextStyle(
                fontSize: 25,
                color: Colors.orange.shade700,
              )),
        ),
  
        body: Center(
          child: ListView(
              shrinkWrap: true,
              padding: EdgeInsets.only(left: 20.0, right: 20.0),
              children: &lt;Widget&gt;[
                stateList(),
                SizedBox(height: 20.0),
                submitReleaseBotton(),
              ]),
        ),
      );
    }
  
    Widget stateList() {
      return Container(
        // color: Colors.black,
        child: DropdownButtonFormField&lt;String&gt;(
          decoration: InputDecoration(
            hintText: 'Select State',
            filled: true,
            fillColor: Colors.white,
            hintStyle: TextStyle(color: Colors.black),
            contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
            // labelText: 'Number of tracks'
          ),
          items: states.map((States map) {
            return DropdownMenuItem&lt;String&gt;(
              value: map.id.toString(),
              child: Text(
                map.name,
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            );
          }).toList(),
          onChanged: (String newValueSelected) {
            setState(() {
              this._currentItemSelected = newValueSelected;
            });
          },
          value: _currentItemSelected,
        ),
      );
    }
  }
  
  </code></pre>