how to access snapshot.data inside Listview.builder inside futurebuilder

Question

I am getting error The method '[]' can't be unconditionally invoked because the receiver can be 'null'.

Mydata inside _categoriesList future

[
        {
            "business_category_id": 1,
            "business_category": "Manufacturer",
            "business_category_image": "164423936662011a06c450d.png"
        },
        {
            "business_category_id": 2,
            "business_category": "Distributor",
            "business_category_image": "164423937762011a11033aa.png"
        },
        {
            "business_category_id": 3,
            "business_category": "Wholesaler",
            "business_category_image": "164423938762011a1bb2e3c.png"
        },
        {
            "business_category_id": 4,
            "business_category": "Retailer",
            "business_category_image": "164423940062011a28189e5.png"
        },
        {
            "business_category_id": 5,
            "business_category": "Reseller",
            "business_category_image": "164423941362011a3554148.png"
        },
        {
            "business_category_id": 6,
            "business_category": "Service Provider",
            "business_category_image": "164423942462011a4096996.png"
        }
    ]

my code inside futurebuilder. I am having problem accessing snapshot.data[index]

FutureBuilder(
      future: _categoriesList,
      builder: (_, snapshot) {
        if (snapshot.hasData) {
          
          return ListView.builder(
              itemCount: 6,
              itemBuilder: (_, index) {
                return Text(snapshot.data[index]); // error The method '[]' can't be unconditionally invoked because the receiver can be 'null'
              });
        }
      },
)  

Answer 1

Assuming you have a Category class, with variables for the CategoryId,CategoryName,CategoryImage with all the needed methods as shown in https://stackoverflow.com/a/71029334/12371668

//create an instance of the category class before the build() method
final category = Category();

 @override
  Widget build(BuildContext context) {

     // other code

       FutureBuilder(
              future: category.fetchData(),
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                 List<Category> categories = snapshot.data();
                  return ListView.builder(
                      itemCount: categories.length,
                      itemBuilder: (context, index) {
                         var category = categories[index];
                        return Text(category.CategoryName);
                      });
                }
              },
        )  
}

Answer 2

Specify your data-type for list in FutureBuilder first.

FutureBuilder<List<String>>()

// Check if you are getting data. print the data using snapshot.data.

FutureBuilder<List<String>>(
      future: _categoriesList,
      builder: (_, snapshot) {
        if (snapshot.hasData) {
          print("snapshot:: data >>>> ${snapshot.data}");
          return ListView.builder(
              itemCount: 6,
              itemBuilder: (_, index) {
                return Text(snapshot.data[index]); // error The method '[]' can't be unconditionally invoked because the receiver can be 'null'
              });
        }
      },
)  

Answer 3

Here is the example for ListView.builder:

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

Future <List<Data>> fetchData() async {
  final response =
      await http.get('https://jsonplaceholder.typicode.com/albums');
  if (response.statusCode == 200) {
    List jsonResponse = json.decode(response.body);
      return jsonResponse.map((data) => new Data.fromJson(data)).toList();
  } else {
    throw Exception('Unexpected error occured!');
  }
}

class Data {
  final int userId;
  final int id;
  final String title;

  Data({this.userId, this.id, this.title});

  factory Data.fromJson(Map<String, dynamic> json) {
    return Data(
      userId: json['userId'],
      id: json['id'],
      title: json['title'],
    );
  }
}

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  Future <List<Data>> futureData;

  @override
  void initState() {
    super.initState();
    futureData = fetchData();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter API and ListView Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter ListView'),
        ),
        body: Center(
          child: FutureBuilder <List<Data>>(
            future: futureData,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                List<Data> data = snapshot.data;
                return 
                ListView.builder(
                itemCount: data.length,
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    height: 75,
                    color: Colors.white,
                    child: Center(child: Text(data[index].title),
                  ),);
                }
              );
              } else if (snapshot.hasError) {
                return Text("${snapshot.error}");
              }
              // By default show a loading spinner.
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}