How to put the json response in widget flutter

Question

I want to use my response data show in the widget. I post the data to my API then I get the return result.

My response.body is like this:

{
    "responses": [
        {
            "Contents": {
                "Images": [
                    {"url":"https:URL"}, 
                    {"url":"https:URL"}, 
                ],
                "Ages": [
                    {"age":"33"},
                    {"age":"34"}, 
                ],
                "Labels":[
                    {"label":"game"}
                ]
            }
        }
    ]
}

My question is how to get the "Images", "Ages", and "Labels" details? I want to use these detail and put in my widget. Can I know how to do it?

Answer 1

It's not mandatory to make full models in Dart for decoding JSON. You can simply do:

// Requires import
import 'dart:convert';

// Do like this
var data = jsonDecode(jsonString);

Now data will automatically act as a map.

For example, if you want to access the label in the JSON example you provided, you can simply do:

data['responses'][0]['Contents']['Labels'][0]['label'].toString();

Coming to the actual part, You need to shape your widgets according to your needs.

Create a Stateless or StatefulWidget whatever suits your needs and start laying out the design.

According to the JSON example that you posted, you need to show a list of images. So, you would probably generate a list of the Widgets based on the URLs and provide the list to perhaps a GridView in your build method.

Check this example I made: DartPad - JSON Widget example

Edit:

I used the exact JSON response you posted. It doesn't give me any errors.

class _MyWidgetState extends State<MyWidget> {
  final String mJson = '''
    {
    "responses": [
        {
            "Contents": {
                "Images": [
                    {"url":"https:URL"}, 
                    {"url":"https:URL"}
                ],
                "Ages": [
                    {"age":"33"},
                    {"age":"34"}
                ],
                "Labels":[
                    {"label":"game"}
                ]
            }
        }
    ]
}
  ''';

  bool _loading = false;
  List<String> _infos = [];

  Widget _loadingBar() {
    return SizedBox.fromSize(
        size: Size.fromRadius(30),
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: CircularProgressIndicator(
            valueColor: AlwaysStoppedAnimation<Color>(
              Colors.white,
            ),
          ),
        ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('MY APPS'), actions: <Widget>[
          _loading
              ? _loadingBar()
              : IconButton(
                  icon: Icon(Icons.send),
                  onPressed: () => {
                        submit(context)
                            .then((res) => setState(() => _loading = false))
                      }),
        ]),
        body: SingleChildScrollView(
          padding: const EdgeInsets.all(16.0),
          child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: List.generate(_infos.length, (i) => Text(_infos[i]))),
        ));
  }

  Future<void> submit(BuildContext context) async {
    setState(() => _loading = true);
    await Future.delayed(const Duration(seconds: 3));
    var data = jsonDecode(mJson);
    print(data);
    _infos.add(data['responses'][0].toString());
    _infos.add(data['responses'][0]['Contents'].toString());
    _infos.add(data['responses'][0]['Contents']['Images'][0]['url'].toString());
    _infos.add(data['responses'][0]['Contents']['Ages'][0]['age'].toString());
  }
}

Note: The code you posted later shouldn't work as you have declared non-final variables in a StatelessWidget class and also using setState. Also, in your Future submit(BuildContext context) you were supposed to jsonDecode(res) not demoJson. demoJson was not assigned. See the example I posted. I changed it to a stateful widget. I am having no trouble accessing any of the fields in the JSON example you gave. Your JSON example is a bit faulty though, it has extra ',' that might give error while decoding.

Answer 2

Just check the below example that i have made : Follwing is the json file that you provided i have parsed locally.

{
    "responses": [{
        "Contents": {
            "Images": [{
                    "url": "https:URL"
                },
                {
                    "url": "https:URL"
                }
            ],
            "Ages": [{
                    "age": "33"
                },
                {
                    "age": "34"
                }
            ],
            "Labels": [{
                    "age": "33"
                }

            ]
        }
    }]
}

Model class created for the json file:

// To parse this JSON data, do
//
//     final response = responseFromJson(jsonString);

import 'dart:convert';

Response responseFromJson(String str) => Response.fromJson(json.decode(str));

String responseToJson(Response data) => json.encode(data.toJson());

class Response {
    List<ResponseElement> responses;

    Response({
        this.responses,
    });

    factory Response.fromJson(Map<String, dynamic> json) => Response(
        responses: List<ResponseElement>.from(json["responses"].map((x) => ResponseElement.fromJson(x))),
    );

    Map<String, dynamic> toJson() => {
        "responses": List<dynamic>.from(responses.map((x) => x.toJson())),
    };
}

class ResponseElement {
    Contents contents;

    ResponseElement({
        this.contents,
    });

    factory ResponseElement.fromJson(Map<String, dynamic> json) => ResponseElement(
        contents: Contents.fromJson(json["Contents"]),
    );

    Map<String, dynamic> toJson() => {
        "Contents": contents.toJson(),
    };
}

class Contents {
    List<Image1> images;
    List<Age> ages;
    List<Age> labels;

    Contents({
        this.images,
        this.ages,
        this.labels,
    });

    factory Contents.fromJson(Map<String, dynamic> json) => Contents(
        images: List<Image1>.from(json["Images"].map((x) => Image1.fromJson(x))),
        ages: List<Age>.from(json["Ages"].map((x) => Age.fromJson(x))),
        labels: List<Age>.from(json["Labels"].map((x) => Age.fromJson(x))),
    );

    Map<String, dynamic> toJson() => {
        "Images": List<dynamic>.from(images.map((x) => x.toJson())),
        "Ages": List<dynamic>.from(ages.map((x) => x.toJson())),
        "Labels": List<dynamic>.from(labels.map((x) => x.toJson())),
    };
}

class Age {
    String age;

    Age({
        this.age,
    });

    factory Age.fromJson(Map<String, dynamic> json) => Age(
        age: json["age"],
    );

    Map<String, dynamic> toJson() => {
        "age": age,
    };
}

class Image1 {
    String url;

    Image1({
        this.url,
    });

    factory Image1.fromJson(Map<String, dynamic> json) => Image1(
        url: json["url"],
    );

    Map<String, dynamic> toJson() => {
        "url": url,
    };
}

This is the main UI file where you fetch and show the data, I have show your data in the list view.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:sample_project_for_api/model.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool isLoading = false;
  List<Age> ages = List();
  List<Age> labels = List();
  List<Image1> image = List();

  // here i have taken the  json locally which you posted on stack
  Future<String> loadFromAssets() async {
    return await rootBundle.loadString('json/parse.json');
  }

  @override
  void initState() {
    super.initState();
    givenFunction();
  }

  Future givenFunction() async {
    setState(() {
      isLoading = true;
    });

    //http.Response response = await http.post(url, body: json.encode(data));
    // you can make the http call above just uncomment is and comment the below line
    String jsonString = await loadFromAssets();
    // Here you can just replace down your response.body with jsonString
    final response = responseFromJson(jsonString);
    print(response.responses[0].contents.ages[0].age);
    //ages =response.responses[0].contents.
    for (int i = 0; i < response.responses[0].contents.ages.length; i++) {
      ages.add(response.responses[0].contents.ages[i]);
    }

    for (int i = 0; i < response.responses[0].contents.images.length; i++) {
      image.add(response.responses[0].contents.images[i]);
    }
    for (int i = 0; i < response.responses[0].contents.labels.length; i++) {
      labels.add(response.responses[0].contents.labels[i]);
    }
    setState(() {
      isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: isLoading
              ? CircularProgressIndicator()
              : SafeArea(
                  child: Container(
                    child: Column(
                      children: <Widget>[
                        Container(
                          width: 400,
                          height: 100,
                          child: ListView.builder(
                            scrollDirection: Axis.horizontal,
                            itemCount: ages.length,
                            itemBuilder: (BuildContext context, int index) {
                              return Container(
                                width: 100,
                                height: 100,
                                child: Card(
                                  elevation: 10,
                                  child: Center(child: Text(ages[index].age)),
                                ),
                              );
                            },
                          ),
                        ),
                        Container(
                          width: 500,
                          height: 200,
                          child: ListView.builder(
                            scrollDirection: Axis.horizontal,
                            itemCount: image.length,
                            itemBuilder: (BuildContext context, int index) {
                              return Container(
                                width: 100,
                                height: 100,
                                child: Card(
                                  elevation: 10,
                                  child: Center(child: Text(image[index].url)),
                                ),
                              );
                            },
                          ),
                        ),
                        Container(
                          width: 500,
                          height: 200,
                          child: ListView.builder(
                            scrollDirection: Axis.horizontal,
                            itemCount: labels.length,
                            itemBuilder: (BuildContext context, int index) {
                              return Container(
                                width: 100,
                                height: 100,
                                child: Card(
                                  elevation: 10,
                                  child: Center(child: Text(labels[index].age)),
                                ),
                              );
                            },
                          ),
                        )
                      ],
                    ),
                  ),
                )),
    );
  }
}

void main() {
  runApp(HomePage());
}

just taken a screen shot:

Just check it and let me know.