How can I get string value from API in flutter? - flutter

Question

I am trying to get string value from the API to the list in a flutter.
Each time I try to get the list there is an exception "Unhandled Exception: type 'String' is not a subtype of type 'Map'"
the data I have is in the format given below:
{
"status": 1,
"data": [
"Chapter 1",
"Chapter 2",
]
}

Answer 1

Use this response class to load response and access all the variables.
class ResponseData {
String status;
List<String> data;
ResponseData({
this.status,
this.data,
});
factory ResponseData.fromJson(Map<String, dynamic> json) => ResponseData(
status: json["status"],
data: List<String>.from(json["data"].map((x) => x)),
);
}
Add our response json to ResponseData class
ResponseData responseDataFromJson(String responseFromServiceCall) => ResponseData.fromJson(json.decode(responseFromServiceCall));

Answer 2

From the above mentioned json i have created a sample json for ListView :
{
"status": 1,
"data": [
"Chapter 1",
"Chapter 2"
]
}
Creating a model class from the json :
// To parse this JSON data, do
//
// final data = dataFromJson(jsonString);
import 'dart:convert';
Data dataFromJson(String str) => Data.fromJson(json.decode(str));
String dataToJson(Data data) => json.encode(data.toJson());
class Data {
int status;
List<String> data;
Data({
this.status,
this.data,
});
factory Data.fromJson(Map<String, dynamic> json) => Data(
status: json["status"],
data: List<String>.from(json["data"].map((x) => x)),
);
Map<String, dynamic> toJson() => {
"status": status,
"data": List<dynamic>.from(data.map((x) => x)),
};
}
Parsing data and then rendering it on ui :
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dummy.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
MyApp({Key key}) : super(key: key);
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
List<String> dataList = List();
bool _isLoading = false;
#override
void initState() {
super.initState();
loadYourData();
}
Future<String> loadFromAssets() async {
return await rootBundle.loadString('json/parse.json');
}
loadYourData() async {
setState(() {
_isLoading = true;
});
String jsonString = await loadFromAssets();
final data = dataFromJson(jsonString);
// here you get the complete object
dataList = data.data;
setState(() {
_isLoading = false;
});
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
child: _isLoading
? CircularProgressIndicator()
: ListView.builder(
itemCount: dataList.length,
itemBuilder: (BuildContext context, int index) {
return Card(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(dataList[index]),
),
],
),
);
},
),
),
),
);
}
}
Following is the parse.json file :
And below is the pubspec file where you need to define the json folder :
Let me know if it works.