How to fix "LateInitializationError: Field 'data' has not been initialized error"

Question

I am working with a flutter app. I am trying to display data from a json.

I am stuck on the following error:

LateInitializationError: Field 'data' has not been initialized error

My main.dart file is as follows:

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:core';
import 'dart:convert';
import 'package:http/http.dart' as http;

void main() => runApp(MaterialApp(
  home: HomePage(),
));

class HomePage extends StatefulWidget{
  @override
  HomePageState createState()=> new HomePageState();

}

class HomePageState extends State<HomePage>{
  final String url = "http://127.0.0.1:5000/restaurant";
  late List data;

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

  Future<String> getJsonData() async{
    var response = await http.get(Uri.parse(url));
    print(response.body);

    setState((){
      var convertDataToJson = json.decode(response.body);
      data = convertDataToJson['restaurant'];

    });

    return "success";
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar (
        title: new Text("Where to Eat")
      ),
      body: new ListView.builder(
        itemCount: data == null ? 0 : data.length,
        itemBuilder: (BuildContext context, int index) {
          return new Container(
            child: new Center(
              child: new Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                new Card(
                  child: new Container(
                    child: new Text(data[index]['city']['details']),
                    padding: const EdgeInsets.all(20.0),
                  ),
                ),
              ],
            ),
           ),
          );
        },

      )
    );
  }
}

The line of code that is causing me issues is:

late List data;

I have tried to use the solution in this stackoverflow post here. However this did not work for me. It led to other errors that also caused the code not to compile.

How can I fix this error with my code correctly in order to display and parse the json data?

Here is the json I am using:

 {"city": "Al-Khobar",
  "details": [
   {
    "id": 1,
    "Area": "Near Corniche",
    "Restaurant": "Naranj Damascus Restaurant",
    "Street": "Firas Bin Al Nadr Street",
    "location link": "https:\\/\\/www.tripadvisor.com\\/Restaurant_Review-g298545-d22895043-Reviews-Naranj_Damascus_Restaurant-Al_Khobar_Eastern_Province.html#MAPVIEW",
    "City": "Al Khobar",
    "Zip": 34447,
    "Country": "Saudi Arabia",
    "phone": 966508446622,
    "meals": "Breakfast, Lunch, Dinner, Late Night",
    "cuisine": "International, Barbecue, Grill, Diner, Middle Eastern",
    "price range": "'$25 to $50"
   },

   {
    "id": 2,
    "Area": "Near Corniche",
    "Restaurant": "The Butcher Shop and Grill",
    "Street": "Prince Turkey Street",
    "location link": "https:\/\/www.tripadvisor.com\/Restaurant_Review-g298545-d10691837-Reviews-The_Butcher_Shop_and_Grill-Al_Khobar_Eastern_Province.html#MAPVIEW",
    "City": "Al Khobar",
    "Zip": " ",
    "Country": "Saudi Arabia",
    "phone": 966138085182,
    "meals": "Lunch, Dinner",
    "cuisine": "Steakhouse",
    "price range": "'$25 to $50"
   },
   {
    "id": 3,
    "Area": "Near Corniche",
    "Restaurant": "Kosebasi, Al Khobar",
    "Street": "Prince Turkey Street",
    "location link": "https:\/\/www.tripadvisor.com\/Restaurant_Review-g298545-d9874670-Reviews-Kosebasi_Al_Khobar-Al_Khobar_Eastern_Province.html#MAPVIEW",
    "City": "Al Khobar",
    "Zip": " ",
    "Country": "Saudi Arabia",
    "phone": 966138030089,
    "meals": "Lunch, Dinner",
    "cuisine": "Turkish, Middle Eastern, Barbecue",
    "price range": "'$25 to $50"
   },
   {
    "id": 4,
    "Area": "Near Corniche",
    "Restaurant": "Bun & Patty",
    "Street": "Prince Turkey Street Al Yarmouk",
    "location link": "https:\/\/www.tripadvisor.com\/Restaurant_Review-g298545-d8054714-Reviews-Bun_Patty-Al_Khobar_Eastern_Province.html#MAPVIEW",
    "City": "Al Khobar",
    "Zip": 344233213,
    "Country": "Saudi Arabia",
    "phone": " ",
    "meals": "Lunch, Dinner",
    "cuisine": "American, Fast Food",
    "price range": " "
   }
  ]
  },

 {"city": "Dammam",
  "details": [
   {
    "id": 5,
    "Area": "Near Corniche",
    "Restaurant": "Abu Nawas",
    "Street": "Al Adama – Prince Mansour Street",
    "location link": "https://www.tripadvisor.com/Restaurant_Review-g298547-d805085-Reviews-Abu_Nawas-Dammam_Eastern_Province.html#MAPVIEW",
    "City": "Dammam",
    "Zip": "31461",
    "Country": "Saudi Arabia",
    "phone": 966138266363,
    "meals": " ",
    "cuisine": "Lebanese, Mediterranean, Middle Eastern",
    "price range": "'$5 to $40"
   },
   {
    "id": 6,
    "Area": "Near Corniche",
    "Restaurant": "Heritage Village",
    "Street": "Prince Turkey Street",
    "location link": "https://www.tripadvisor.com/Restaurant_Review-g298547-d805123-Reviews-Heritage_Village-Dammam_Eastern_Province.html#MAPVIEW",
    "City": "Dammam",
    "Zip": " ",
    "Country": "Saudi Arabia",
    "phone": 96638090000,
    "meals": "Lunch, Dinner",
    "cuisine": "Middle Eastern, Vegetarian Friendly, Halal",
    "price range": "'$10 to $30"
   },
   {
    "id": 7,
    "Area": "Near Corniche",
    "Restaurant": "Manoosha Alreef",
    "Street": "Prince Faisal Bin Fahad Road Khobar North",
    "location link": "https://www.tripadvisor.com/Restaurant_Review-g298547-d10221865-Reviews-Manoosha_Alreef-Dammam_Eastern_Province.html#MAPVIEW",
    "City": "Dammam",
    "Zip": "34426",
    "Country": "Saudi Arabia",
    "phone": 966539222673,
    "meals": "Breakfast, Lunch, Dinner",
    "cuisine": "Bakeries, Lebanese, Fast Food",
    "price range": "'$25 to $50"
   },
   {
    "id": 8,
    "Area": "Near Corniche",
    "Restaurant": "American, Steakhouse",
    "Street": "Prince Mohammad Bin Fahad St.",
    "location link": "https://www.tripadvisor.com/Restaurant_Review-g298547-d2659493-Reviews-Steak_House-Dammam_Eastern_Province.html#MAPVIEW",
    "City": "Dammam",
    "Zip": 11372,
    "Country": "Saudi Arabia",
    "phone": "96638335468",
    "meals": "Lunch, Dinner",
    "cuisine": "American, Fast Food",
    "price range": "$10 to $35"
   }
  ]
  },

 {"city": "Jeddah",
  "details": [
   {
    "id": 9,
    "Area": "Blvd Mall",
    "Restaurant": "Nando's Mall Of Arabia",
    "Street": "Blvd Mall of Arabia Mall of Arabia, Gate No-5",
    "location link": "https://www.tripadvisor.com/Restaurant_Review-g295419-d20090707-Reviews-Nando_s_Mall_Of_Arabia-Jeddah_Makkah_Province.html#MAPVIEW",
    "City": "Jeddah",
    "Zip": "23532",
    "Country": "Saudi Arabia",
    "phone": 966503446623,
    "meals": "Breakfast, Lunch, Dinner",
    "cuisine": "Fast Food",
    "price range": "'$5 to $40"
   },
   {
    "id": 10,
    "Area": "Near Corniche",
    "Restaurant": "Heritage Village",
    "Street": "Prince Turkey Street",
    "location link": "https://www.tripadvisor.com/Restaurant_Review-g298547-d805123-Reviews-Heritage_Village-Dammam_Eastern_Province.html#MAPVIEW",
    "City": "Jeddah",
    "Zip": " ",
    "Country": "Saudi Arabia",
    "phone": 96638090000,
    "meals": "Lunch, Dinner",
    "cuisine": "Middle Eastern, Vegetarian Friendly, Halal",
    "price range": "'$10 to $30"
   },
   {
    "id": 11,
    "Area": "Near Corniche",
    "Restaurant": "Manoosha Alreef",
    "Street": "Prince Faisal Bin Fahad Road Khobar North",
    "location link": "https://www.tripadvisor.com/Restaurant_Review-g298547-d10221865-Reviews-Manoosha_Alreef-Dammam_Eastern_Province.html#MAPVIEW",
    "City": "Jeddah",
    "Zip": "34426",
    "Country": "Saudi Arabia",
    "phone": 966539222673,
    "meals": "Breakfast, Lunch, Dinner",
    "cuisine": "Bakeries, Lebanese, Fast Food",
    "price range": "'$25 to $50"
   },
   {
    "id": 12,
    "Area": "Near Corniche",
    "Restaurant": "American, Steakhouse",
    "Street": "Prince Mohammad Bin Fahad St.",
    "location link": "https://www.tripadvisor.com/Restaurant_Review-g298547-d2659493-Reviews-Steak_House-Dammam_Eastern_Province.html#MAPVIEW",
    "City": "Jeddah",
    "Zip": 11372,
    "Country": "Saudi Arabia",
    "phone": "96638335468",
    "meals": "Lunch, Dinner",
    "cuisine": "American, Fast Food",
    "price range": "$10 to $35"
   }
  ]
  }
]

Thanks

The `build` method will run earlier than `getJsonData` future is completed (`initState` can't be `async`). That's why the error, because the code will try to read `data` at a time when it is still `null`. The solution for this is to use a [`FutureBuilder`](https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html). — Peter Koltai, Apr 10 '22 at 16:34
@PeterKoltai thanks for the link. I am new to flutter. Can you help me with how to adjust my code for this? — ironmantis7x, Apr 10 '22 at 16:40

score 2 · Accepted Answer · answered Apr 10 '22 at 18:45

This is a basic example of how you can do it with FutureBuilder. It does not call http and works with a limited data, only simulates delay, but you can adjust it to your needs. You can run this on dartpad.dev.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: HomePage(),
    ));

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

class HomePageState extends State<HomePage> {
  late final Future<List<Map<String, dynamic>>> _getJsonDataFuture;
  @override
  void initState() {
    super.initState();
    _getJsonDataFuture = getJsonData();
  }

  Future<List<Map<String, dynamic>>> getJsonData() async {
    // simulate delay
    await Future.delayed(const Duration(seconds: 2));

    var response = [
      {"id": 1, "name": "first"},
      {"id": 2, "name": "second"},
      {"id": 3, "name": "third"}
    ];

    return Future.value(response);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text("Where to Eat")),
        body: FutureBuilder<List<Map<String, dynamic>>>(
            future: _getJsonDataFuture,
            builder: (context, snapshot) {
              // while loading
              if (snapshot.connectionState == ConnectionState.waiting) {
                return const Center(child: CircularProgressIndicator());
              }
              // on error
              if (snapshot.hasError) {
                return Center(child: Text('Snapshot error: ${snapshot.error}'));
              }

              // on data received from future
              if (snapshot.hasData && snapshot.data != null) {
                return ListView.builder(
                    itemCount: snapshot.data!.length,
                    itemBuilder: (BuildContext context, int index) => Card(
                          child: Container(
                            child: Text(snapshot.data![index]['name']),
                            padding: const EdgeInsets.all(20.0),
                          ),
                        ));
              }

              // on missing data
              return const Center(child: Text('Missing data'));
            }));
  }
}

Thanks Peter Koltai. This is the closest answer for what I am looking for. — ironmantis7x, Apr 11 '22 at 17:50

score 0 · Answer 2 · answered Apr 10 '22 at 16:37

0

late List data; should change to List? data;. If something is non-nullable but late, it relies on the developer to make sure this variable is initialized before it is used. Since it's used in the build method, in data == null ? 0 : data.length;, it will throw an error.

Changing it to a nullable List? fixes this.

answered Apr 10 '22 at 16:37

dumazy

13,857
12
66
113

I tried that and it broke just as you said along with two other errors. How to use List? and fix my data == null ? 0 : data.length; statement so it doesn't break? – ironmantis7x Apr 10 '22 at 16:41
You'll probably need to enforce non-null where 'data' is used in the itemBuilder function by using the bang operator: 'data![index]' – dumazy Apr 10 '22 at 17:49

How to fix "LateInitializationError: Field 'data' has not been initialized error"

2 Answers2