FLUTTER Json local file reading and detail page - json

Question

Hello everybody i'm new to flutter so i'm making this project and i get an issue. i want to have a detail page of the items listed with a json local file. but i get errors i don't know where is my mistake. so i hope find the solution
here is my code :
import 'dart:core';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MaladieDetails {
final String titreCh;
final String numCh;
final String titreCat;
final String codeM;
final String titreM;
final String classeM;
MaladieDetails(
{required this.titreCh,
required this.numCh,
required this.titreCat,
required this.codeM,
required this.titreM,
required this.classeM});
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return const MaterialApp(
// Remove the debug banner
debugShowCheckedModeBanner: false,
title: 'Kindacode.com',
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
HomePageState createState() => HomePageState();
}
class HomePageState extends State<HomePage> {
// This holds a list of fiction maladies
// You can use data fetched from a database or a server as well
final List<Map<String, dynamic>> _maladies = [
{
"titre_ch": "Certaines maladies infectieuses et parasitaires",
"num_ch": "1",
"titre_cat": "Maladies intestinales infectieuses",
"code_m": "A00",
"titre_m": "Choléra",
"classe_m": "Choléra"
},
{
"titre_ch": "Certaines maladies infectieuses et parasitaires",
"num_ch": "1",
"titre_cat": "Maladies intestinales infectieuses",
"code_m": "A00.0",
"titre_m": "A Vibrio cholerae 01, biovar cholerae",
"classe_m": "Choléra",
"explication_m": "A Vibrio cholerae 01, biovar cholerae"
},
{
"titre_ch": "Certaines maladies infectieuses et parasitaires",
"num_ch": "1",
"titre_cat": "Maladies intestinales infectieuses",
"code_m": "A00.1",
"titre_m": "A Vibrio cholerae 01, biovar El Tor",
"classe_m": "Choléra",
"explication_m": "A Vibrio cholerae 01, biovar El Tor"
},
{
"titre_ch": "Certaines maladies infectieuses et parasitaires",
"num_ch": "1",
"titre_cat": "Maladies intestinales infectieuses",
"code_m": "A00.9",
"titre_m": "Choléra, sans précision",
"classe_m": "Choléra",
"explication_m": "Choléra, sans précision"
},
{
"titre_ch": "Certaines maladies infectieuses et parasitaires",
"num_ch": "1",
"titre_cat": "Maladies intestinales infectieuses",
"code_m": "A01",
"titre_m": "Fièvres typhoïde et paratyphoïde",
"classe_m": "Fièvres typhoïde et paratyphoïde"
},
{
"titre_ch": "Certaines maladies infectieuses et parasitaires",
"num_ch": "1",
"titre_cat": "Maladies intestinales infectieuses",
"code_m": "A01.0",
"titre_m": "Fièvre typhoïde",
"classe_m": "Fièvres typhoïde et paratyphoïde",
"explication_m": "Fièvre typhoïde"
},
{
"titre_ch": "Certaines maladies infectieuses et parasitaires",
"num_ch": "1",
"titre_cat": "Maladies intestinales infectieuses",
"code_m": "A01.1",
"titre_m": "Paratyphoïde A",
"classe_m": "Fièvres typhoïde et paratyphoïde",
"explication_m": "Paratyphoïde A"
},
{
"titre_ch": "Certaines maladies infectieuses et parasitaires",
"num_ch": "1",
"titre_cat": "Maladies intestinales infectieuses",
"code_m": "A01.2",
"titre_m": "Paratyphoïde B",
"classe_m": "Fièvres typhoïde et paratyphoïde",
"explication_m": "Paratyphoïde B"
},
{
"titre_ch": "Certaines maladies infectieuses et parasitaires",
"num_ch": "1",
"titre_cat": "Maladies intestinales infectieuses",
"code_m": "A01.3",
"titre_m": "Paratyphoïde C",
"classe_m": "Fièvres typhoïde et paratyphoïde",
"explication_m": "Paratyphoïde C"
},
{
"titre_ch": "Certaines maladies infectieuses et parasitaires",
"num_ch": "1",
"titre_cat": "Maladies intestinales infectieuses",
"code_m": "A01.4",
"titre_m": "Paratyphoïde, sans précision",
"classe_m": "Fièvres typhoïde et paratyphoïde",
"explication_m": "Paratyphoïde, sans précision"
},
{
"titre_ch": "Certaines maladies infectieuses et parasitaires",
"num_ch": "1",
"titre_cat": "Maladies intestinales infectieuses",
"code_m": "A02",
"titre_m": "Autres infections à Salmonella",
"classe_m": "Autres infections à Salmonella"
},
];
// This list holds the data for the list view
List<Map<String, dynamic>> _trouverMaladies = [];
#override
initState() {
// at the beginning, all maladies are shown
_trouverMaladies = _maladies;
super.initState();
}
// This function is called whenever the text field changes
void _runFilter(String enteredKeyword) {
List<Map<String, dynamic>> results = [];
if (enteredKeyword.isEmpty) {
// if the search field is empty or only contains white-space, we'll display all maladies
results = _maladies;
} else {
results = _maladies
.where((maladie) => maladie["titre_m"]
.toLowerCase()
.contains(enteredKeyword.toLowerCase()))
.toList();
// we use the toLowerCase() method to make it case-insensitive
}
// Refresh the UI
setState(() {
_trouverMaladies = results;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Kindacode.com'),
),
body: Padding(
padding: const EdgeInsets.all(10),
child: Column(
children: [
const SizedBox(
height: 20,
),
TextField(
onChanged: (value) => _runFilter(value),
decoration: const InputDecoration(
labelText: 'Cherchez ...', suffixIcon: Icon(Icons.search)),
),
const SizedBox(
height: 20,
),
Expanded(
child: _trouverMaladies.isNotEmpty
? ListView.builder(
itemCount: _trouverMaladies.length,
itemBuilder: (context, index) => Card(
color: Colors.amberAccent,
elevation: 4,
margin: const EdgeInsets.symmetric(vertical: 10),
child: ListTile(
leading: Text(
_trouverMaladies[index]["code_m"].toString(),
style: const TextStyle(fontSize: 24),
),
title: Text(_trouverMaladies[index]['titre_m']),
subtitle: Text(
_trouverMaladies[index]["titre_cat"].toString()),
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => DetailScreen(
maladieDetails: _trouverMaladies[index]
['titre_m']),
),
);
},
),
),
)
: const Text(
'No results found',
style: TextStyle(fontSize: 24),
),
),
],
),
),
);
}
}
class DetailScreen extends StatelessWidget {
// In the constructor, require a maladieDetails.
const DetailScreen({super.key, required this.maladieDetails});
// Declare a field that holds the maladieDetails.
final MaladieDetails maladieDetails;
#override
Widget build(BuildContext context) {
// Use the maladieDetails to create the UI.
return Scaffold(
appBar: AppBar(
title: Text(maladieDetails.titreM),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Text(maladieDetails.codeM),
),
);
}
}
the errors shows after i choose an item from the list.

Answer 1

What's missing is the deserialization from the JSON to the MaladieDetails entity object. Generally, it's a function called fromJson that is responsible to deserialize the JSON into the entity properties.
I've implemented the MaladieDetails.fronJson and changed some other places to make it work. Take a look:
import 'dart:core';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MaladieDetails {
final String titreCh;
final String numCh;
final String titreCat;
final String codeM;
final String titreM;
final String classeM;
MaladieDetails(
{required this.titreCh,
required this.numCh,
required this.titreCat,
required this.codeM,
required this.titreM,
required this.classeM});
MaladieDetails.fromJson(Map<String, dynamic> json)
: titreCh = json['titre_ch'],
numCh = json['num_ch'],
titreCat = json['titre_cat'],
codeM = json['code_m'],
titreM = json['titre_m'],
classeM = json['classe_m'];
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return const MaterialApp(
// Remove the debug banner
debugShowCheckedModeBanner: false,
title: 'Kindacode.com',
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
HomePageState createState() => HomePageState();
}
class HomePageState extends State<HomePage> {
// This holds a list of fiction maladies
// You can use data fetched from a database or a server as well
final _maladies = [
{
"titre_ch": "Certaines maladies infectieuses et parasitaires",
"num_ch": "1",
"titre_cat": "Maladies intestinales infectieuses",
"code_m": "A00",
"titre_m": "Choléra",
"classe_m": "Choléra"
},
{
"titre_ch": "Certaines maladies infectieuses et parasitaires",
"num_ch": "1",
"titre_cat": "Maladies intestinales infectieuses",
"code_m": "A00.0",
"titre_m": "A Vibrio cholerae 01, biovar cholerae",
"classe_m": "Choléra",
"explication_m": "A Vibrio cholerae 01, biovar cholerae"
},
{
"titre_ch": "Certaines maladies infectieuses et parasitaires",
"num_ch": "1",
"titre_cat": "Maladies intestinales infectieuses",
"code_m": "A00.1",
"titre_m": "A Vibrio cholerae 01, biovar El Tor",
"classe_m": "Choléra",
"explication_m": "A Vibrio cholerae 01, biovar El Tor"
},
{
"titre_ch": "Certaines maladies infectieuses et parasitaires",
"num_ch": "1",
"titre_cat": "Maladies intestinales infectieuses",
"code_m": "A00.9",
"titre_m": "Choléra, sans précision",
"classe_m": "Choléra",
"explication_m": "Choléra, sans précision"
},
{
"titre_ch": "Certaines maladies infectieuses et parasitaires",
"num_ch": "1",
"titre_cat": "Maladies intestinales infectieuses",
"code_m": "A01",
"titre_m": "Fièvres typhoïde et paratyphoïde",
"classe_m": "Fièvres typhoïde et paratyphoïde"
},
{
"titre_ch": "Certaines maladies infectieuses et parasitaires",
"num_ch": "1",
"titre_cat": "Maladies intestinales infectieuses",
"code_m": "A01.0",
"titre_m": "Fièvre typhoïde",
"classe_m": "Fièvres typhoïde et paratyphoïde",
"explication_m": "Fièvre typhoïde"
},
{
"titre_ch": "Certaines maladies infectieuses et parasitaires",
"num_ch": "1",
"titre_cat": "Maladies intestinales infectieuses",
"code_m": "A01.1",
"titre_m": "Paratyphoïde A",
"classe_m": "Fièvres typhoïde et paratyphoïde",
"explication_m": "Paratyphoïde A"
},
{
"titre_ch": "Certaines maladies infectieuses et parasitaires",
"num_ch": "1",
"titre_cat": "Maladies intestinales infectieuses",
"code_m": "A01.2",
"titre_m": "Paratyphoïde B",
"classe_m": "Fièvres typhoïde et paratyphoïde",
"explication_m": "Paratyphoïde B"
},
{
"titre_ch": "Certaines maladies infectieuses et parasitaires",
"num_ch": "1",
"titre_cat": "Maladies intestinales infectieuses",
"code_m": "A01.3",
"titre_m": "Paratyphoïde C",
"classe_m": "Fièvres typhoïde et paratyphoïde",
"explication_m": "Paratyphoïde C"
},
{
"titre_ch": "Certaines maladies infectieuses et parasitaires",
"num_ch": "1",
"titre_cat": "Maladies intestinales infectieuses",
"code_m": "A01.4",
"titre_m": "Paratyphoïde, sans précision",
"classe_m": "Fièvres typhoïde et paratyphoïde",
"explication_m": "Paratyphoïde, sans précision"
},
{
"titre_ch": "Certaines maladies infectieuses et parasitaires",
"num_ch": "1",
"titre_cat": "Maladies intestinales infectieuses",
"code_m": "A02",
"titre_m": "Autres infections à Salmonella",
"classe_m": "Autres infections à Salmonella"
},
].map((e) => MaladieDetails.fromJson(e)).toList();
// This list holds the data for the list view
List<MaladieDetails> _trouverMaladies = [];
#override
initState() {
// at the beginning, all maladies are shown
_trouverMaladies = [..._maladies];
super.initState();
}
// This function is called whenever the text field changes
void _runFilter(String enteredKeyword) {
List<MaladieDetails> results = [];
if (enteredKeyword.isEmpty) {
// if the search field is empty or only contains white-space, we'll display all maladies
results = [..._maladies];
} else {
results = _maladies
.where((maladie) => maladie.titreM
.toLowerCase()
.contains(enteredKeyword.toLowerCase()))
.toList();
// we use the toLowerCase() method to make it case-insensitive
}
// Refresh the UI
setState(() {
_trouverMaladies = results;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Kindacode.com'),
),
body: Padding(
padding: const EdgeInsets.all(10),
child: Column(
children: [
const SizedBox(
height: 20,
),
TextField(
onChanged: (value) => _runFilter(value),
decoration: const InputDecoration(
labelText: 'Cherchez ...', suffixIcon: Icon(Icons.search)),
),
const SizedBox(
height: 20,
),
Expanded(
child: _trouverMaladies.isNotEmpty
? ListView.builder(
itemCount: _trouverMaladies.length,
itemBuilder: (context, index) => Card(
color: Colors.amberAccent,
elevation: 4,
margin: const EdgeInsets.symmetric(vertical: 10),
child: ListTile(
leading: Text(
_trouverMaladies[index].codeM,
style: const TextStyle(fontSize: 24),
),
title: Text(_trouverMaladies[index].titreM),
subtitle: Text(_trouverMaladies[index].titreCat),
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => DetailScreen(
maladieDetails: _trouverMaladies[index]),
),
);
},
),
),
)
: const Text(
'No results found',
style: TextStyle(fontSize: 24),
),
),
],
),
),
);
}
}
class DetailScreen extends StatelessWidget {
// In the constructor, require a maladieDetails.
const DetailScreen({super.key, required this.maladieDetails});
// Declare a field that holds the maladieDetails.
final MaladieDetails maladieDetails;
#override
Widget build(BuildContext context) {
// Use the maladieDetails to create the UI.
return Scaffold(
appBar: AppBar(
title: Text(maladieDetails.titreM),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Text(maladieDetails.codeM),
),
);
}
}