Fixing a type 'List<dynamic>' is not a subtype of type 'String'-CodePudding

I am trying to show a list of Json name that is obtained from an API but when I try to display it I receive type List error as result of snapshot.error. I am not sure exactly how and which line is resulting in this error.

Here is the screen dart:

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});
 
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}
 
class _HomeScreenState extends State<HomeScreen> {
  late Future<List<Workouts_Model>> futureWorkouts;
 
  @override
  void initState() {
    super.initState();
    futureWorkouts = APIService.fetchUserWorkout();
  }
....................................
            FutureBuilder<List<Workouts_Model>>(
              future: futureWorkouts,
              builder: (BuildContext context,
                  AsyncSnapshot<List<Workouts_Model>> snapshot) {
                if (snapshot.hasData) {
                  return Column(
                      children: List.generate(snapshot.data!.length,
                          (index) => Text(snapshot.data![index].name)));
                } else if (snapshot.hasError) ;
                print(snapshot.error);
                // throw snapshot.error!;
                // //
                {
                  return Text('${snapshot.error}'); <———error here
                }
                return const CircularProgressIndicator();
              },
            ),

Here is the api called:

  static Future<List<Workouts_Model>> fetchUserWorkout() async {
    final response = await http.get(Uri.parse(...),
      headers: {...},);
 
    final responseJson = jsonDecode(response.body);
 
    if (response.statusCode == 200) {
      return workoutsModelFromJson(jsonDecode(response.body));
    } else {
      throw Exception('Failed to load User');
    }
  }

If I could get help on knowing why and how to solve it.

Here is the model:

List<Workouts_Model> workoutsModelFromJson(String str) =>
    List<Workouts_Model>.from(
        json.decode(str).map((x) => Workouts_Model.fromJson(x)));
 
String workoutsModelToJson(List<Workouts_Model> data) =>
    json.encode(List<dynamic>.from(data.map((x) => x.toJson())));
 
class Workouts_Model {
  Workouts_Model({
    required this.id,
    required this.user,
    required this.active,
    required this.name,
    required this.slug,
  });
 
  int id;
  String user;
  bool active;
  String name;
  String slug;
 
  factory Workouts_Model.fromJson(Map<String, dynamic> json) => Workouts_Model(
        id: json["id"],
        user: json["user"],
        active: json["active"],
        name: json["name"],
        slug: json["slug"],
      );
 
  Map<String, dynamic> toJson() => {
        "id": id,
        "user": user,
        "active": active,
        "name": name,
        "slug": slug,
      };
}

This is the result of final responseJson = jsonDecode(response.body); print(responseJson);

[{id: 4, user: Username, active: false, name: T-shirt1, slug: Upper1}, {id: 5, user: Username, active: false, name: T-shirt2, slug: Lower1}]

CodePudding user response：

if you look closely you've already decoded your response.body which being past.

final responseJson = jsonDecode(response.body); // Decoded already
 
if (response.statusCode == 200) {

  return workoutsModelFromJson(jsonDecode(response.body));  //// Decoded data is pasted to workoutsModelFromJson.
} else {
  throw Exception('Failed to load User');
}

So your model "workoutsModelFromJson" should be

  List<Workouts_Model> workoutsModelFromJson(dynamic decodedResponse) =>
  List<Workouts_Model>.from(
      decodedResponse.map((x) => Workouts_Model.fromJson(x)));