flutter model for dynamic json array - flutter

Question

so I have a json file(mock data). It goes something like this:
{
"data":
[
{
"id": "1",
"name": "Kacchi Biriyani",
"videoLink": "https://www.youtube.com/watch?v=K4TOrB7at0Y",
"author": "Alan Ford",
"category":"Biriyani",
"time": "15 min",
"steps": {
"step 1": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"step 2": "Suspendisse vel sapien elit"
},
"isFavorite": "yes"
},
{
"id": "2",
"name": "Mughal Biriyani",
"videoLink": "https://www.youtube.com/watch?v=aNVviTECNM0",
"author": "Ricky James",
"category":"Biriyani",
"time": "10 min",
"steps": {
"step 1": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"step 2": "Suspendisse vel sapien elit",
"step 3": "Proin luctus, quam non dapibus pretium",
"step 4": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
},
"isFavorite": "yes"
}
]
}
This is what I have as my model:
class RecipeModel {
final String id;
final String name;
final String videoLink;
final String author;
final String category;
final String time;
RecipeModel({
required this.id,
required this.name,
required this.videoLink,
required this.author,
required this.category,
required this.time,
});
factory RecipeModel.fromJson(Map<String, dynamic> json) {
return RecipeModel(
id: json['id'],
name: json['name'],
videoLink: json['videoLink'],
author: json['author'],
category: json['category'],
time: json['time'],
);
}
}
Now as you can see the steps:{...} are dynamic so it can be different for different items. One item can have 5 steps on the other hand another item can have more than 10 steps.
How can I write a dynamic List in my model for steps data that's coming from json?
Update 1:
List<RecipeModel> recipes = [];
Future<List<RecipeModel>> getRecipeData() async {
// var response = await http.get(
// Uri.https("jsonplaceholder.typicode.com", 'users'),
// );
String response = await DefaultAssetBundle.of(context)
.loadString('assets/json/recipe.json');
var result = json.decode(response);
for (var u in result["data"]) {
RecipeModel recipe = RecipeModel(
id: u['id'] ?? "",
name: u['name'] ?? "",
videoLink: u['videoLink'] ?? "",
author: u['author'] ?? "",
category: u['category'] ?? "",
time: u['time'] ?? "",
// steps: u["steps"],
);
recipes.add(recipe);
}

Answer 1

Cast the map of steps into a List<String> type using the from method.
// The steps from your api call.
var json = { "steps": { "step 1": "foo", "step 2": "bar" } }
// Convert the steps from the map to a List.
List<String> steps = List<String>.from(json["steps"].values);
// The result.
steps = ['foo', 'bar']
Update
This is what your RecipeModel should look like.
class RecipeModel {
final String id;
final String name;
final String videoLink;
final String author;
final String category;
final String time;
// The dynamic list of steps.
final List<String> steps;
RecipeModel({
required this.id,
required this.name,
required this.videoLink,
required this.author,
required this.category,
required this.time,
// The dynamic list of steps.
required this.steps,
});
factory RecipeModel.fromJson(Map<String, dynamic> json) {
return RecipeModel(
id: json['id'],
name: json['name'],
videoLink: json['videoLink'],
author: json['author'],
category: json['category'],
time: json['time'],
// The dynamic list of steps.
steps: List<String>.from(json['steps'].values),
);
}

Answer 2

Also just as a suggestion, make your variables match the data type it will be holding. For example, id can be and int instead of String, isFavorite can be a bool, etc. Trust me, it makes using them in dart code much easier.
Ex: if(isFavorite) {...} instead of if(isFavorite.toLowerCase() == "yes") {...}