How to create an inner loop in a widget in flutter?

Question

I have a json file:

[
    {  "1": [
      {"week": "Saturday"},

      { 
        "name": "A",
        "time": "15:30"
      },
      {
        "name": "B", 
        "time": "18:45"
      },
      {
        "name": "C",
        "time": "21:00"
      }
    ]
   },

    {  "2": [
      {"week": "Sunday"},

        {
          "name": "D",
          "time": "14:30"     
        },
        {
          "name": "E",
          "time": "15:00"
        }

      ]
    }

]

And this is my code. Assuming that counter list generated from json file.

import 'dart:convert';

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
  List data;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Load local JSON file"),
        ),
        body: new Container(
          child: new Center(
            // Use future builder and DefaultAssetBundle to load the local JSON file
            child: new FutureBuilder(
                future: DefaultAssetBundle
                    .of(context)
                    .loadString('data_repo/data.json'),
                builder: (context, snapshot) {
                  // Decode the JSON
                  var new_data = json.decode(snapshot.data.toString());
                  List counter = [3, 2];


                  return new ListView.builder(

                    // Build the ListView
                    itemBuilder: (BuildContext context, int index) {

                      return new Card(
                        child: new Column(
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: <Widget>[
                            ListTile(
                       title: Text(
                         new_data[index]["${index+1}"][0]["week"],
                         style: Theme.of(context).textTheme.headline,
                       ),
                      ),

                            new Text(new_data[index]["${index+1}"][1]["name"]),
                            new Text(new_data[index]["${index+1}"][1]['time']),

                          ],
                        ),
                      );
                    },
                    itemCount: new_data == null ? 0 : new_data.length,
                  );
                }),
          ),
        ));
  }
}

And my output:

I want to show all objects of json file in the same order, i.e. after "Saturday", A and it's time, B and it's time and etc. I tried for loop for two texts but couldn't achieve my goal. How can I create an inner loop in widget to display the thing that I want, or any other way that do this?

Answer 1

You need to nest -ListView.builder inside another - ListView.builder.

import 'dart:convert';

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
  List data;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Load local JSON file"),
        ),
        body: new Container(
          child: new Center(
            // Use future builder and DefaultAssetBundle to load the local JSON file
            child: new FutureBuilder(
                future:
                    DefaultAssetBundle.of(context).loadString('img/data.json'),
                builder: (context, snapshot) {
                  // Decode the JSON
                  List new_data = json.decode(snapshot.data.toString());
                  List counter = [3, 2];

                  return new ListView.builder(
                    // Build the ListView
                    itemBuilder: (BuildContext context, int index) {
                      String weekDay =
                          new_data[index]["${index + 1}"][0]["week"];
                      return new Card(
                        child: new Column(
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: <Widget>[
                            ListTile(
                              title: Text(
                                weekDay,
                                style: Theme.of(context).textTheme.headline,
                              ),
                            ),
                            ListView.builder(
                              itemBuilder: (context, int) {
                                if (int == 0) {
                                  return Container();
                                }
                                return Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    new Text(new_data[index]["${index + 1}"]
                                        [int]["name"]),
                                    new Text(new_data[index]["${index + 1}"]
                                        [int]['time']),
                                  ],
                                );
                              },
                              shrinkWrap: true,
                              itemCount: new_data[index]["${index + 1}"].length,
                            ),
                          ],
                        ),
                      );
                    },
                    itemCount: new_data == null ? 0 : new_data.length,
                  );
                }),
          ),
        ));
  }
}

output: