CODEWITHSUNDEEP
flutter
Umaiz Khan
Umaiz Khan

Reputation: 1227

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

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.

enter image description here

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 -_-

Upvotes: 0

Views: 138

Answers (2)

Vincent J. Michuki
Vincent J. Michuki

Reputation: 549

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);

Upvotes: 1

hasan karaman
hasan karaman

Reputation: 1430

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(),

    );
   }
 }

Upvotes: 1

Related Questions