i'm new to flutter i have 2 questions :

1. how to access the Data in this Json for example get the name of the phone in the 2 list
2. 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'
    }
  ];

CodePudding user response：

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??''),
    );
  },
)

CodePudding user response：

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

CodePudding user response：

@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 GetView<AuthController> {
  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),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}