flutter: how to parse super complex json file?

Question

i have a super long json file to be parsed but once i fetch it in a FutureBuilder it keeps erroring that i used a null check operator on a null value, to me seems like i don't know the logic..!

here's the simplified json:

{
  "city": {
    "Name": "oklahoma",
    "Month": [
      {
        "number": "01",
        "day": [
          {
            "number": "01",
            "employee": "jesse m."
          },
          {
            "number": "02",
            "employee": "john s."
          },
          {
            "number": "03",
            "name": "tyler r."
          }
        ]
      },
      {
        "number": "02",
        "day": [
          {
            "number": "01",
            "employee": "mat w."
          },
          {
            "number": "02",
            "employee": "may j."
          },
          {
            "number": "03",
            "name": "eric r."
          }
        ]
      }
    ]
  }
}

note that i have one city and the json has the data of every individual days throughout the whole year

and here's the model:

// To parse this JSON data, do
//
//     final company = companyFromJson(jsonString);

import 'dart:convert';

company companyFromJson(String str) => company.fromJson(json.decode(str));

String companyToJson(company data) => json.encode(data.toJson());

class company {
    company({
        required this.city,
    });

    City city;

    factory company.fromJson(Map<String, dynamic> json) => company(
        city: City.fromJson(json["city"]),
    );

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

class City {
    City({
        required this.name,
        required this.month,
    });

    String name;
    List<Month> month;

    factory City.fromJson(Map<String, dynamic> json) => City(
        name: json["Name"],
        month: List<Month>.from(json["Month"].map((x) => Month.fromJson(x))),
    );

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

class Month {
    Month({
        required this.number,
        required this.day,
    });

    String number;
    List<Day> day;

    factory Month.fromJson(Map<String, dynamic> json) => Month(
        number: json["number"],
        day: List<Day>.from(json["day"].map((x) => Day.fromJson(x))),
    );

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

class Day {
    Day({
        required this.number,
        required this.employee
    });

    String number;
    String employee;

    factory Day.fromJson(Map<String, dynamic> json) => Day(
        number: json["number"],
        employee: json["employee"]
    );

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

this is the parsing method:

Future<List<Day>> getCompanyEmployee () async {
    String jsonString = await DefaultAssetBundle.of(context).loadString('assets/json/OklahomaEmployee.json');
    List<dynamic> result = jsonDecode(jsonString);
    List<Day> Company = result.map((e) => Day.fromJson(e)).toList();
    return Company;
  }

this is the implementation:

FutureBuilder<List<Day>>(
  future: getCompanyEmployee(),
  builder: (context, snapshot) {
    var itemList = snapshot.data;
    return GridView.builder(
      physics: NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
      ),
      itemCount: itemList!.length,
      itemBuilder: (BuildContext context, index) {
        var itemData = itemList[index];
        return ClipRRect(
          borderRadius: BorderRadius.circular(25),
          child: Container(
            height: 10,
            color: Colors.white,
            width: 10,
            child: Center(
              child: Column(
                children: [
                  Text(
                    'employee',
                    style: TextStyle(fontSize: 15),
                  ),
                  Text(itemData.employee),
                  Image.asset(
                    'assets/Pictures/employees.png',
                    height: 70,
                  )
                ],
              ),
            ),
          ),
        );
      },
    );
  },
)

Answer 1

In your FutureBuilder, you just assume the future has already completed. The point of a FutureBuilder is that it has not and you need to deal with that.

You need to account for the fact that your Futurebuilder needs to build something even if the future has not yet completed. The simplest thing to make that happen is to show a CircularProgressIndicator as long as you don't have data.

See What is a Future and how do I use it? for an example of how to do that.