I am currently working on a project that involves using Django REST for the backend with Flutter dropdown widget to display a list of Country states. However, I am facing challenges in getting the list of states to appear in the dropdown menu. Can anyone provide guidance on where I may be going wrong and how to resolve this issue?

While trying to troubleshoot the problem, I came across a guide on the Flutter documentation website:

Despite following the guide, I am still unable to get it to work properly.

Below are the errors I encountered:

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

Here is an excerpt from my code:

Endpoint

http://localhost/api/state/

model.dart

 import 'dart:convert';

List<States> parseStates(String responseBody) {
  final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();

  return parsed.map<States>((json) => States.fromJson(json)).toList();
}

class States {
  String id;
  String name;
  String countryId;

  States({
    this.id,
    this.name,
    this.countryId,
  });

  factory States.fromJson(Map<String, dynamic> json) => new States(
        id: json["id"],
        name: json["name"],
        countryId: json["country_id"],
      );

  Map<String, dynamic> toJson() => {
        "id": id,
        "name": name,
        "country_id": countryId,
      };
}

services.dart

import 'package:http/http.dart' as http;
import 'dart:async';
import 'package:vibespot/src/models/dashboard/state_model.dart';


Future<List<States>> fetchStates() async {
  final response = await http.get('http://localhost:8000/api/state/');
final responsebody = parseStates(response.body);
setState(() {
      states = responsebody;

    });
  return parseStates(response.body);
}

ui.dart

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() => SongUploadPageState();
}

class SongUploadPageState extends State<SongUploadPage> {
  var _currentItemSelected ;
  String _mySelection;
  List<States> 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: <Widget>[
              stateList(),
              SizedBox(height: 20.0),
              submitReleaseBotton(),
            ]),
      ),
    );
  }

  Widget stateList() {
    return Container(
      // color: Colors.black,
      child: DropdownButtonFormField<String>(
        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<String>(
            value: map.id.toString(),
            child: Text(
              map.name,
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          );
        }).toList(),
        onChanged: (String newValueSelected) {
          setState(() {
            this._currentItemSelected = newValueSelected;
          });
        },
        value: _currentItemSelected,
      ),
    );
  }
}