get data from rest api ti DropdownButtonFormField in flutter

Question

I try fitch data from my Api and fill DropdownButtonFormField these are my codes on that,

import 'dart:convert';

import 'package:http/http.dart' as http;

var url = Uri.parse('https://api.myweb.com/api/getdata');
var token = Uri.parse('https://api.myweb.com/api/jwt');

class FetchData {
Future<List?> fetch() async {
  try {
  var resp = await http.get(url, headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'Authorization': 'Bearer $token',
  });
  var resBody = await json.decode(resp.body);
  return resBody;
 } catch (error) { }}}

and dropdownlist widget is

import 'package:flutter/material.dart';
import 'package:vin/services/get_api_data.dart';


class CarModelData extends StatefulWidget {
const CarModelData({Key? key}) : super(key: key);

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


class _CarModelDataState extends State<CarModelData> {
String selectedValue = "";
@override
Widget build(BuildContext context) {
return DropdownButtonFormField(
    decoration: InputDecoration(
      enabledBorder: OutlineInputBorder(
        borderSide: const BorderSide(color: Colors.blue, width: 2),
        borderRadius: BorderRadius.circular(20),
      ),
      border: OutlineInputBorder(
        borderSide: const BorderSide(color: Colors.blue, width: 2),
        borderRadius: BorderRadius.circular(20),
      ),
      filled: true,
      fillColor: Colors.red,
    ),
    value: selectedValue,
    icon: const Icon(Icons.flag),
    style: const TextStyle(color: Colors.blue, fontSize: 16),
    onChanged: (String? newValue) {
      setState(() {
        selectedValue = newValue!;
      });
    },
    items: ?????;);
 }
}

How can I fill items in last line???????

Answer 1

Do not call SetState inside FutureBuilder , it will re-fetch the data from server.

Pass fetched List<String> to the CarModelData .

class CarModelData extends StatefulWidget {
  const CarModelData({
    Key? key,
    required this.dropdownData,
  }) : super(key: key);

  final List<String> dropdownData;

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

class _CarModelDataState extends State<CarModelData> {
  String? selectedValue;
  @override
  Widget build(BuildContext context) {
    return DropdownButtonFormField<String?>(
      decoration: InputDecoration(
        hintText: "Select value",
        enabledBorder: OutlineInputBorder(
          borderSide: const BorderSide(color: Colors.blue, width: 2),
          borderRadius: BorderRadius.circular(20),
        ),
        border: OutlineInputBorder(
          borderSide: const BorderSide(color: Colors.blue, width: 2),
          borderRadius: BorderRadius.circular(20),
        ),
        filled: true,
        fillColor: Colors.red,
      ),
      value: selectedValue,
      icon: const Icon(Icons.flag),
      style: const TextStyle(color: Colors.blue, fontSize: 16),
      onChanged: (newValue) {
        setState(() {
          selectedValue = newValue;
        });
      },
      items: widget.dropdownData
          .map(
            (str) => DropdownMenuItem<String>(
              value: str,
              child: Text(str),
            ),
          )
          .toList(),
    );
  }
}

Tested on

class T extends StatelessWidget {
  const T({Key? key}) : super(key: key);

  Future<List<String>?> fetch() async {
    return await Future.delayed(
      const Duration(seconds: 3),
      () {
        return List.generate(4, (index) => "item $index");
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        children: <Widget>[
          FutureBuilder<List<String>?>(
              future: fetch(),
              builder: (context, snapshot) {
                if (snapshot.hasData &&
                    snapshot.connectionState == ConnectionState.done) {
                  print(snapshot.hasData &&
                      snapshot.connectionState == ConnectionState.done);
                  return CarModelData(
                    dropdownData: snapshot.data!,
                  );
                }

                ///handle other cases
                return CircularProgressIndicator();
              })
        ],
      ),
    );
  }
}