Flutter showing The method '[]' was called on null. on Listbuilder

Question

I am fetching data from an api and showing in ListView builder But its showing error

 class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);


  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  bool show = false;
  var map = {};
  @override
  void initState() {
    dosomestuff();

  }
  Future<List> dosomestuff() async {
    http.Response res = await http.get(
      'http://retailapi.airtechsolutions.pk/api/menu/2112',
    );

    Map<String, dynamic> map = json.decode(res.body);

    if (map['description'] == "Success") {
      print('show kr ');
      print(map["Categories"].length);
      print(map["Categories"]);
      setState(() {
        show = true;
      });
    }
  }



  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body: show
          ? ListView.builder(
        itemCount: map["Categories"].length,
        scrollDirection: Axis.horizontal,
        shrinkWrap: true,
        physics: BouncingScrollPhysics(),
        itemBuilder: (context, index) {
          return Container(
            width: 80.0,
            child: Text(map["Categories"][index]['Name'])
          );
        },
      ) : Container(),

    );
  }
}

Its showing error The method '[]' was called on null. But when i print the values in state function the its priting values and all things are working but when ill show in ListBuilder then its showing that error.

You can see i print the values in function

  print(map["Categories"].length);
  print(map["Categories"]);

And its printing values all things fine.

You can see in image its printing the length and arrays fine so its not null when i use in widget its saying length is called on null -_-

See https://stackoverflow.com/questions/63017280/what-is-a-future-and-how-do-i-use-it & https://stackoverflow.com/questions/64049102/what-is-a-nosuchmethod-error-and-how-do-i-fix-it. — Christopher Moore, Jan 21 '21 at 15:19
Does this answer your question? [What is a NoSuchMethod error and how do I fix it?](https://stackoverflow.com/questions/64049102/what-is-a-nosuchmethod-error-and-how-do-i-fix-it) — Christopher Moore, Jan 21 '21 at 15:19

score 1 · Answer 1 · answered Jan 21 '21 at 15:26

can you try this I might have mistyped the parentheses.

class _MyHomePageState extends State<MyHomePage> {
      int _counter = 0;
      bool show = false;
      var map = {};
      List<dynamic>  getCategory;

   @override
    void initState() {
     dosomestuff();

      }
 Future<List> dosomestuff() async {
       await http.get(
       'http://retailapi.airtechsolutions.pk/api/menu/2112',
        ).then((result){
       http.Response res=result;
       Map<String, dynamic> map = json.decode(res.body);

       if (map['description'] == "Success") {       
      if(map["Categories"].length>0){
         setState(() {
           show = true;
      getCategory=map["Categories"];
        });
        }
     }
   }

   });






 @override
 Widget build(BuildContext context) {

  return Scaffold(
    appBar: AppBar(

     title: Text(widget.title),
    ),
   body: show
      ? ListView.builder(
    itemCount: getCategory.length,
    scrollDirection: Axis.horizontal,
    shrinkWrap: true,
    physics: BouncingScrollPhysics(),
    itemBuilder: (context, index) {
      return Container(
        width: 80.0,
        child: Text(getCategory[index]['Name'])
      );
    },
    ) : Container(),

    );
   }
 }

What do you think this does differently? – Christopher Moore Jan 21 '21 at 15:30 — Christopher Moore, Jan 21 '21 at 15:30

score 1 · Answer 2 · answered Jan 21 '21 at 15:34

You have two declarations of map. One in class scope the other one in dosomestuff method. Remove the declaration of map in dosomestuff method and just assign the value of json.decode(res.body) to the map in class scope. Instead of:

Map<String, dynamic> map = json.decode(res.body);

use:

map = json.decode(res.body);

Flutter showing The method '[]' was called on null. on Listbuilder

2 Answers2