Type 'List<dynamic>' is not a subtype of type 'FutureOr<List<RideData>>', Flutter

Issue

I’m calling an API but I’ve been trying to parse this JSON response correctly but I haven’t been able to resolve this issue. I call the API, and want to display the data with a FutureBuilder and Provider, but I get that error Type 'List<dynamic>' is not a subtype of type 'FutureOr<List<RideData>>' and I’m not sure what am I doing wrong. The code is below:

API Call:

  Future<List<RideData>> getRides() async {
    final response = await HTTP.apiRequest(Method.GET, '/rides');
    final data = jsonDecode(response.body)['data'];
    return data;
  }

The Future builder where I want to display the data:

 Future<List<RideData>> _getRideStreamList() async {
    final _vehicleStreamData = await APICall.instance.getRides();
    var provider = Provider.of<RideStore>(context, listen: false);
    provider.setVehicleList(_vehicleStreamData, notify: false);
    return _vehicleStreamData;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: Column(
            children: [
              Container(
                height: 1000,
                child: FutureBuilder<List<RideData>>(
                  future: _getRideStreamList(),
                  builder: (context, snapshot) {
                    if (snapshot.hasData) {
                      Consumer<RideStore>(
                        builder: (context, rideData, child) {
                          return ListView.builder(
                            shrinkWrap: true,
                            itemCount: rideData.rideList.length,
                            itemBuilder: (context, index) {
                              RideData rides = rideData.getRideByIndex(index);
                              return Text('${rides.rideId}');
                            },
                          );
                        },
                      );
                    } else if (snapshot.hasError) {
                      return Text("${snapshot.error}");
                    }
                    return Container();
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

I am almost certain that the issue with the API call and the response because I’m not parsing the JSON data correctly but maybe I’m wrong and something else is the issue…

Solution

Make Model class of RideData then

Future<List<RideData>> getRides() async {
        final response = await HTTP.apiRequest(Method.GET, '/rides');
        List<dynamic> data = jsonDecode(response.body)['data'];
        List<YourModelClass> list = [];
        if (response.data != null) {
          list = data.map((item) => YourModelClass.fromJson(item)).toList();
        }
        return list;
      }

You can generate model class
https://javiercbk.github.io/json_to_dart/

Answered By – Muhammad Ahmed

Answer Checked By – Clifford M. (FlutterFixes Volunteer)