flutter - 下拉菜单不显示数据抖动

Question

我正在尝试在下拉菜单中显示数据，但我有一个奇怪的问题，我似乎无法弄清楚。问题是当打开包含下拉菜单的视图时，api 数据从服务器获取数据，它可以正常工作但是数据第一次没有显示到下拉菜单中，在调试模式下，当我按下热 realod 时，数据显示在下拉菜单中，而不是当视图第一次显示时

下拉式菜单

                  Flexible(
                    flex: 0,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Container(
                        height: 45,
                        width: 300,
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(5),
                            border: Border.all(
                                color: Color.fromRGBO(92, 52, 76, 1))),
                        child: DropdownButton<String>(
                            isExpanded: true,
                            itemHeight: 50,
                            underline: SizedBox(),
                            value: _selectedVehicle,
                            items: vehicle_list.map((vehicle) {
                              return DropdownMenuItem<String>(
                                value: vehicle.id,
                                child: new Text(
                                  vehicle.model,
                                  style: TextStyle(
                                      fontSize: 15,
                                      color: Color.fromRGBO(
                                          92, 52, 76, 1)),
                                ),
                              );
                            }).toList(),
                            hint: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text("Please Select Vehicle"),
                            ),
                            onChanged: (newValues) {
                              setState(() {
                                _selectedVehicle = newValues;
                              });
                            }),
                      ),
                    ),
                  )

API

Future<String> getVehicles() async {
    vehicle_list.clear();
    Future tokens = SharedPrefrence().getToken();
    tokens.then((data) async{
      token=data;
      var response = await http.get(Urls.BASE_URL + Urls.GET_VEHICLES, headers: {
        "Authorization": "Bearer " + token,
        "Content-Type": "application/json"
      });
      if (response.statusCode == 200) {
        print("vechiles " + response.body.toString());
        Map<String, dynamic> value = json.decode(response.body);
        try {
          var data = value['data'];
          for (int i = 0; i < data.length; i++) {
            var obj = data[i];
            vehicle_list.add(VehicleModel(
                obj['id'].toString(),
                obj['user_id'].toString(),
                obj['type'].toString(),
                obj['model'],
                obj['reg_no'],
                obj['fuel_type'].toString()));
          }
        } catch (e) {
          
          print(e.toString());
        }
      } else {
        print(response.body.toString());
      }
    });
  }

内化

List<VehicleModel> vehicle_list = [];
String _selectedVehicle;

这就是我调用函数的方式

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getVehicles();
   
  }

标签： flutter

Answer 1

我认为这将解决您的问题：

Future<String> getVehicles() async {
    vehicle_list.clear();
    Future tokens = SharedPrefrence().getToken();
    tokens.then((data) async{
      token=data;
      var response = await http.get(Urls.BASE_URL + Urls.GET_VEHICLES, headers: {
        "Authorization": "Bearer " + token,
        "Content-Type": "application/json"
      });
      if (response.statusCode == 200) {
        print("vechiles " + response.body.toString());
        Map<String, dynamic> value = json.decode(response.body);
        try {
          var data = value['data'];
          for (int i = 0; i < data.length; i++) {
            var obj = data[i];
            vehicle_list.add(VehicleModel(
                obj['id'].toString(),
                obj['user_id'].toString(),
                obj['type'].toString(),
                obj['model'],
                obj['reg_no'],
                obj['fuel_type'].toString()));
          }
          
          // add this line...
          WidgetsBinding.instance.addPostFrameCallback((_) => setState((){}));
        } catch (e) {
          
          print(e.toString());
        }
      } else {
        print(response.body.toString());
      }
    });
  }