Flutter DropDownButton 使用 FutureBuilder 获取 JSON 数据答案

【问题标题】：Flutter DropDownButton using FutureBuilder to get JSON dataFlutter DropDownButton 使用 FutureBuilder 获取 JSON 数据
【发布时间】：2021-01-18 21:54:53
【问题描述】：

我正在尝试将字符串列表添加到来自未来的 DropdwonButton，但它无法正常工作，我是新来的。

我编写了一个 FutureBuilder 来从 API（国家/地区）获取数据，它工作得很好，但是当我将数据添加到 DropdwonButton 时，它什么也没有显示，并且指示的错误是“在 null 上调用方法添加”

这是我的代码：

声明：

List countries = List();
Positions pos;
Future<Positions> _posi;

未来功能：

Future<Positions> getPosition() async {
  var response = await http.get('https://umrahashal.com/api/getpositions');
var obj = jsonDecode(response.body);
 pos = Positions.fromJson(obj);
 return pos;
}

初始化状态：

@override
  void initState() {
    super.initState();

  _posi = getPosition();
 
    _dropDownMenuItemsCountries = getDropDownMenuItemsCountries();
    currentCounty = _dropDownMenuItemsCountries[0].value;
  }

FutureBuilder：

 FutureBuilder(
             future: _posi,
             builder: (_, AsyncSnapshot<Positions> snapshot){
              
                switch (snapshot.connectionState) {
                    case ConnectionState.active:
                    case ConnectionState.waiting:
                    return Center(child: CircularProgressIndicator());
                    break;
                    case ConnectionState.done:
                      if (snapshot.hasData && !snapshot.hasError) {
                        if (snapshot.data == null) {
                          return Text("No Data",style: new TextStyle(  fontSize: 20.0));
                        } else {
                          for(int i=0; i<= snapshot.data.countries.length;i++){
                           countries.add(snapshot.data.countries[i].name);
                          }
                     return 

  Padding(
              padding: EdgeInsets.only(top: size.height * 00.2383, bottom: 1),
              child: ListView(
                padding: const EdgeInsets.all(10),
                children: <Widget>[

Container(
                      height: size.height * 0.1047,
                      decoration: BoxDecoration(
                      color:NeumorphicTheme.baseColor(context),
                      borderRadius: BorderRadius.circular(29)),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: <Widget>[
                          new DropdownButton(
                    value: currentCounty,
                    items: _dropDownMenuItemsCountries,
                    onChanged: changedDropDownItemCountry,
                    
                  ),SizedBox(
                            width: size.width * .55,
                          ),
                         Image.asset('assets/images/r3.png'),
                        ],
                      )),
                      SizedBox(height: size.height * 0.0369),

【问题讨论】：

您是否对此进行了调试并为快照添加了监视？我会假设snapshot.data.countries。是不正确的。所以看看作为快照传递了什么
是的，我做到了，当我打印国家列表时，它会显示从 API 获取的国家。 @w461
在哪一行抛出错误？ _dropDownMenuItemsCountries 是国家列表还是每个国家的文本小部件列表？
_dropDownMenuItemsCountries 是一个项目列表。

标签： flutter flutter-futurebuilder

【解决方案1】：

您需要将项目声明为小部件列表，例如 in

items: <String>['One', 'Two', 'Free', 'Four']
          .map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),

这将创建一个列表 [Text('One'), ....]

【讨论】：

这是我传递的方法：List<DropdownMenuItem<String>> getDropDownMenuItemsCountries() { List<DropdownMenuItem<String>> itemscountry = new List(); for (String country in countries) { itemscountry.add(new DropdownMenuItem( value: country, child: new Text(country) )); } return itemscountry; }