how map "convert" Json in flutter? - json

Question

i'm new to flutter i have 2 questions :
how to access the Data in this Json for example get the name of the phone in the 2 list
how to use this Json to build a ListView using the Builder method, i looked and found out that i have to use kind of some library .. can't i do it manually ?
var mblist = [{
'name': 'Note 10',
'camera': '48 MPX',
'ram': '8GB',
'price': '20 000,00 DZD',
'image':
'https://images.frandroid.com/wp-content/uploads/2019/06/samsung-galaxy-note-10-2019-frandroid.png'
}
,
{
'name': 'Note 20',
'camera': '48 MPX',
'ram': '8GB',
'price': '20 000,00 DZD',
'image':
'https://images.frandroid.com/wp-content/uploads/2019/06/samsung-galaxy-note-10-2019-frandroid.png'
}
];

Answer 1

Question1: how to get the name of the phone?
name of the first phone: mblist[0]['name']
list of names of all phones: mblist.map((phone) => phone['name']).toList()
Question2: how to use json list to build a ListView?
The best way to work with data in widgets is usually to use class based model objects. You can create a class model an instantiate an object of it from the json data and pass that object around in your flutter widgets to create any kind of UI you need.
For example the model for that json list you mentioned can be like this:
class Model {
String? name;
String? camera;
String? ram;
String? price;
String? image;
Model({this.name, this.camera, this.ram, this.price, this.image});
Model.fromJson(Map<String, dynamic> json) {
name = json['name'];
camera = json['camera'];
ram = json['ram'];
price = json['price'];
image = json['image'];
}
}
You can convert your list to a list of Model objects like this:
List<Model> modelMbList = mblist.map((mb) => Model.fromJson(mb)).toList();
After that you can create your ListView like this:
ListView.builder(
itemCount: modelMbList.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(modelMbList[index].name??''),
);
},
)

Answer 2

In flutter there to packages json_serializable and build_runner which help you to create dart model for a Api call and other json objects.
This will reduce ton of boilerplate code for your project.
https://pub.dev/packages/json_serializable
https://pub.dev/packages/build_runner

Answer 3

#Mahdi's answer is correct but here's a complete example with all parameters in the UI.
class Phone {
final String name;
final String camera;
final String ram;
final String price;
final String imageUrl;
Phone({
required this.name,
required this.camera,
required this.ram,
required this.price,
required this.imageUrl,
});
factory Phone.fromMap(Map<String, dynamic> map) {
return Phone(
name: map['name'] as String? ?? '',
camera: map['camera'] as String? ?? '',
ram: map['ram'] as String? ?? '',
price: map['price'] as String? ?? '',
imageUrl: map['image'] as String? ?? '',
);
}
}
Complete page.
class TestPage extends StatelessWidget {
const TestPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: ListView.builder(
itemCount: mblist.length,
itemBuilder: (context, index) {
final phone = Phone.fromMap(mblist[index]);
return ListTile(
title: Text(phone.name),
subtitle: Row(
children: [
Text(phone.price),
const SizedBox(width: 10),
Text(phone.ram),
],
),
trailing:
Image.network(phone.imageUrl, width: 50, height: 50),
);
},
),
),
],
),
),
);
}
}

Answer 4

I believe dart:convert library straight forward and enough for your operation.It is coming as a standard library.