title: Fetching image from Firebase FireStore into carousel Flutter
body: <p>Hi everyone I am referring on YouTube video on displaying images in carousel from firestore in flutter mobile app. However there are some problems that i couldnt solve. Hope anyone can kindly help me for my school project. Thanks!</p>
  <pre><code>import 'package:carousel_slider/carousel_slider.dart';
  import 'package:cloud_firestore/cloud_firestore.dart';
  import 'package:flutter/material.dart';
  
  class BannerSlider extends StatefulWidget {
    @override
    _BannerSliderState createState() =&gt; _BannerSliderState();
  }
  
  class _BannerSliderState extends State&lt;BannerSlider&gt; {
    int _index = 0;
    int _dataLength = 1;
  
    @override
    void initState() {
      getSliderImageFromDb();
      super.initState();
    }
  
    Future getSliderImageFromDb() async {
      var _fireStore = FirebaseFirestore.instance;
      QuerySnapshot snapshot = await _fireStore.collection('Banner').get();
      if (mounted) {
        setState(() {
          _dataLength = snapshot.docs.length;
        });
      }
      return snapshot.docs;
    }
  
    @override
    Widget build(BuildContext context) {
      return Container(
        color: Colors.white,
        child: Column(
          children: [
            if (_dataLength != 0)
              FutureBuilder(
                future: getSliderImageFromDb(),
                builder: (_, snapShot) {
                  return snapShot.data == null
                      ? Center(
                          child: CircularProgressIndicator(),
                        )
                      : Padding(
                          padding: const EdgeInsets.only(top: 4),
                          child: CarouselSlider.builder(
                              itemCount: snapShot.data!.length,
                              itemBuilder: (BuildContext context, index, int) {
                                DocumentSnapshot sliderImage =
                                    snapShot.data![index];
                                Map getImage = sliderImage.data();
                                return SizedBox(
                                    width: MediaQuery.of(context).size.width,
                                    child: Image.network(
                                      getImage['image'],
                                      fit: BoxFit.fill,
                                    ));
                              },
                              options: CarouselOptions(
                                  viewportFraction: 1,
                                  initialPage: 0,
                                  autoPlay: true,
                                  height: 150,
                                  onPageChanged:
                                      (int i, carouselPageChangedReason) {
                                    setState(() {
                                      _index = i;
                                    });
                                  })),
                        );
                },
              ),
          ],
        ),
      );
    }
  }
  </code></pre>
  <p>The errors are:</p>
  <ol>
  <li>snapShot.data![index];</li>
  </ol>
  <pre><code>Error: The operator '[]' isn't defined for the class 'Object'.
   - 'Object' is from 'dart:core'.
  Try correcting the operator to an existing operator, or defining a '[]' operator.
                                    snapShot.data![index];
                                                  ^
  </code></pre>
  <p>2.snapShot.data.length,</p>
  <pre><code>Error: The getter 'length' isn't defined for the class 'Object'.
   - 'Object' is from 'dart:core'.
  Try correcting the name to the name of an existing getter, or defining a getter or field named 'length'.
                              itemCount: snapShot.data!.length,
                                                        ^^^^^^
  </code></pre>
  <p>I have try any suggestion by adding null check but it doesn't work.</p>