在flutter中从rest api ti DropdownButtonFormField获取数据

Question

我尝试从我的 Api 获取数据并填写 DropdownButtonFormField 这些是我的代码，

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) { }}}

下拉列表小部件是

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: (newValue) {
      setState(() {
        selectedValue = newValue!;
      });
    },
  **items: widget.dropdownData!
      .map(
        (e) => DropdownMenuItem<String>(
          value: e.toString(),
          child: Text(e),
        ),
      )
      .toList(),**
 }
}

<del>最后一行如何填写项目？？？？？？ <del>

更新

这是发送下拉数据的“View_vin”

import 'package:flutter/material.dart';

import 'data/car_model_from_url.dart';
import 'package:vin/services/get_api_data.dart';

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

@override
Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: (Colors.green),
  appBar: AppBar(
    title: const Center(
      child: Text(
        'my Text',
        style: TextStyle(fontWeight: FontWeight.w600),
      ),
    ),
  ),
body: Column(
    children: <Widget>[
      FutureBuilder<List<String>?>(
          future: FetchData().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();
          })
    ],
  ),
 );
 }
 }

您可以在我的服务类和 wnat 中看到我的 fetch 以将数据添加到下拉列表我收到一个错误

参数类型“Future”不能分配给参数类型“List?”

我该如何解决？

更新 2

我在项目部分更新 CarModel 以及 Viewvin。

当我在 Viewvin 上的 car 中添加 Requerd 需要将 car 作为 argoman 时，如何删除 requerd在 Viewvin 上不需要通过车到 vinWiew？ 谢谢

Answer 1

不要在FutureBuilder内部调用SetState，它会从服务器重新获取数据。

将获取的List<String> 传递给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(),
    );
  }
}

经过测试

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();
              })
        ],
      ),
    );
  }
}