I'm currently building a Flutter app which fetches data from an Api, but when I run the application I'm getting the error Flutter 'List' is not a subtype of type 'Map<String, dynamic>'.Here is my code
class NewsData with ChangeNotifier
{
Map<String,dynamic> _map = {};
bool _error = false;
String _errorMessage = '';
Map<String,dynamic> get map => _map;
bool get error => _error;
String get errorMessage => _errorMessage;
Future<void> get fetchdata async {
final response = await get(Uri.parse('https://script.google.com/macros/s/AKfycbz3ZmaMiTgR-y70MEE1v9VPz2QtmNzwnnnnnnn/exec'),);
if (response.statusCode == 200)
{
try
{
_map = jsonDecode(response.body);
_error = false;
}
catch(e) {
_error = true;
_errorMessage = e.toString();
_map = {};
}
}
else
{
_error = true;
_errorMessage = 'Error :it could be your internet connection ';
_map = {};
}
notifyListeners();
}
void initialValues()
{
_map = {};
_error = false;
_errorMessage = '';
notifyListeners();
}
}
stories.dart
class Storiespage extends StatelessWidget {
const Storiespage({ Key? key }) : super(key: key);
@override
Widget build(BuildContext context) {
context.read<NewsData>().fetchdata;
return Scaffold(
appBar: AppBar(
actions: [
IconButton(
icon: Icon(Icons.refresh),
onPressed:() {
context.read<NewsData>().initialValues();
context.read<NewsData>().fetchdata;
},
)
],
title: Text('ggg'),
),
body: RefreshIndicator(
onRefresh: () async {
await context.read<NewsData>().fetchdata;
},
child: Center(
child: Consumer<NewsData>(
builder: (context, value, child) {
return value.map.length == 0 && !value.error
? CircularProgressIndicator()
: value.error ? Text('oops,something went wrong ${value.errorMessage}'
,textAlign: TextAlign.center,) :
ListView.builder(
itemCount: value.map['feedback'].length,
itemBuilder: (context,index) {
return Newscard(map: value.map['feedback'][index]);
},
);
},
),
),
),
);
}
}
class Newscard extends StatelessWidget {
const Newscard({ Key? key,required this.map }) : super(key: key);
final Map<String,dynamic> map;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
elevation:10 ,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.network('${map['image']}'),
SizedBox(
height: 10,
),
Text('${map['heading']}'
),
SizedBox(
height: 10,
),
Text('${map['story']}'
),
],
),
),
),
);
}
}
and json file [ {"heading":"admire","story":2021,"date":" WORLD ","image":"01/A0000/06"},{"heading":"admire","story":2021,"date":" WORLD ","image":"01/A0000/06"},{"heading":"heading","story":"story","date":"date","image":"image"}]
The error occurs because your API returns a List
as you can see in your json file. After you use jsonDecode
your type of the decoding is List<dynamic>
.
To fix your issue you have to change the type
of _map
to List<dynamic>
.
If you want to have the type List<Map<String, dynamic>>
you can do the following.
List<Map<String, dynamic>> map = [];
...
_map = List<Map<String, dynamic>>.from(jsonDecode(response.body));