【问题标题】:Cannot create Dropdown button in Flutter无法在 Flutter 中创建下拉按钮
【发布时间】:2020-08-12 23:23:22
【问题描述】:

我试图在颤振中使用来自 json 的 Dropdown,但是有一个错误,我无法看到它:

    Widget _listaCiudades(){
    //citiesProvider.getCities().then((value) => print(value));
    return FutureBuilder(
      future: citiesProvider.getCities(),

      builder: (context, AsyncSnapshot <List<dynamic>> snapshot) {
        //print('project snapshot data is: ${snapshot.data}');

        return DropdownButton(
          style: TextStyle(
            fontFamily: 'Monserrat',
            fontStyle: FontStyle.normal,
            fontSize: 20,
          ),
            disabledHint: Text("You can't select anything."),
            items: snapshot.data.map((valorCity) {
              print(valorCity['name']);
              return DropdownMenuItem<String>(
                value: valorCity['pk'].toString(),
                child: Text(valorCity['name'].toString()),
              );
            }).toList(),//allCities(snapshot.data),
            onChanged: (String newValue) {
              setState(() {
               value = newValue;
              });
            }
        );
      },
    );
  }
}

这是输出:

    Performing hot restart...
Syncing files to device Android SDK built for x86...
Restarted application in 5.373ms.

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following NoSuchMethodError was thrown building FutureBuilder<List<dynamic>>(dirty, state: _FutureBuilderState<List<dynamic>>#819ba):
The method 'map' was called on null.
Receiver: null
Tried calling: map<DropdownMenuItem<String>>(Closure: (dynamic) => DropdownMenuItem<String>)

The relevant error-causing widget was: 
  FutureBuilder<List<dynamic>> file:///C:/Users/FALABELLA/Desktop/Flutter/flutter-app-login-ui/lib/screens/signup_screen.dart:186:12
When the exception was thrown, this was the stack: 
#0      Object.noSuchMethod (dart:core-patch/object_patch.dart:53:5)
#1      _SignupScreenState._listaCiudades.<anonymous closure> (package:app_login_ui/screens/signup_screen.dart:199:34)
#2      _FutureBuilderState.build (package:flutter/src/widgets/async.dart:732:55)
#3      StatefulElement.build (package:flutter/src/widgets/framework.dart:4623:28)
#4      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4506:15)
...
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following NoSuchMethodError was thrown building FutureBuilder<List<dynamic>>(dirty, state: _FutureBuilderState<List<dynamic>>#819ba):
The method 'map' was called on null.
Receiver: null
Tried calling: map<DropdownMenuItem<String>>(Closure: (dynamic) => DropdownMenuItem<String>)

The relevant error-causing widget was: 
  FutureBuilder<List<dynamic>> file:///C:/Users/FALABELLA/Desktop/Flutter/flutter-app-login-ui/lib/screens/signup_screen.dart:186:12
When the exception was thrown, this was the stack: 
#0      Object.noSuchMethod (dart:core-patch/object_patch.dart:53:5)
#1      _SignupScreenState._listaCiudades.<anonymous closure> (package:app_login_ui/screens/signup_screen.dart:199:34)
#2      _FutureBuilderState.build (package:flutter/src/widgets/async.dart:732:55)
#3      StatefulElement.build (package:flutter/src/widgets/framework.dart:4623:28)
#4      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4506:15)
...
════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter ( 7314): Aartselaar
I/flutter ( 7314): Abancay
I/flutter ( 7314): Abbotsford
I/flutter ( 7314): Abingdon
I/flutter ( 7314): Absecon
I/flutter ( 7314): Abu Dhabi
I/flutter ( 7314): Acacias
I/flutter ( 7314): Acarigua
I/flutter ( 7314): Adelaide
I/flutter ( 7314): Aeropuerto
I/flutter ( 7314): Agua
I/flutter ( 7314): Agua Amarilla
I/flutter ( 7314): Agua Fria
I/flutter ( 7314): Agua Salada

【问题讨论】:

    标签: flutter flutter-layout flutter-dependencies flutter-web flutter-test


    【解决方案1】:

    您应该在返回下拉小部件之前检查快照是否有数据,使用以下条件

    if (snapshot.hasData) {
        return DropdownButton(
          ...
          ...
        );
    }
    

    你也可以试试,

    items: snapshot.data?.map((valorCity) {
                print(valorCity['name']);
                return new DropdownMenuItem<String>(
                  value: valorCity['pk'].toString(),
                  child: Text(valorCity['name'].toString()),
                );
              })?.toList() ?? [],
    

    【讨论】:

    • 感谢 Kaushik,我相信 snapshot.data 不为空,因为 valorCity['name'] 在打印时显示信息,但不知何故仍然无法工作:(
    最近更新 更多