How to display Json nested objects (maps) in Flutter? - json

Question

I am new to flutter, I want to display json nested objects "nom" values (So I can later on create a tabBar using these values).
I am getting this error
type 'Null' is not a subtype of type 'Map<dynamic, dynamic>'
This is the json file I am working on
This is the main code
import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'tabbarclass.dart';
Future<stations> fetchDonnee() async {
print('fetch0');
final response = await http.get(Uri.parse('uri'));
if (response.statusCode == 200) {
print('fecth1');
// If the server did return a 200 OK response, then parse the JSON.
return stations.fromJson(jsonDecode(response.body));
}
else {
// If the server did not return a 200 OK response, then throw an exception.
throw Exception('Failed to load album');
}
}
class MyApp3 extends StatefulWidget {
const MyApp3({Key? key}) : super(key: key);
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp3> {
late Future<stations> futureDonnee;
Timer? timer;
#override
void initState() {
print('initstate');
futureDonnee=fetchDonnee();
timer= Timer.periodic(const Duration(seconds:1), (Timer t){
futureDonnee=fetchDonnee();
setState(() {});
print('initstate1');}
);
print('hi1');
super.initState();
}
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
print('builder');
FutureBuilder f1;
print('ok');
Center(
child:
f1=FutureBuilder<stations>(
future: futureDonnee,
builder: (context, snapshot) {
if (snapshot.hasData) {
print(snapshot.data!.comp);
//snapshot.data!.comp.forEach((k, v) => print(k));
return Scaffold(
body: Container(
width: size.width,
height: 85,
margin: EdgeInsets.fromLTRB(20, 20, 20, 0),
padding: const EdgeInsets.fromLTRB(10, 0, 10, 20),
decoration: const BoxDecoration(
color: Colors.white
),
child: Text('${snapshot.data!.ond}',style: TextStyle(fontSize: 13)),
)
);
}
else if (snapshot.hasError) {
return Text('${snapshot.error}');}
// By default, show a loading spinner.
return const CircularProgressIndicator();
},
)
);
return f1;
}
}
This is the class I defined
class stations {
final Map ond;
final Map comp;
final Map gaz;
final Map eau;
final Map nom;
const stations({
required this.ond,
required this.comp,
required this.eau,
required this.gaz,
required this.nom,
});
factory stations.fromJson(Map<String, dynamic>json) {
return stations(
ond: json['ond'],
comp: json['comp'],
eau: json['eau'],
gaz: json['gaz'],
nom: json['nom'],
);
}
}
And this is the response I am getting
Any help is much appreciated.