Carousel Builder from Future Builder and Firebase Flutter

You can edit other like slide padding and others as per design

  var _dataLength = 1;

  var _index;

  var slides;

  @override

  void initState() {

    getSliderImageFirebase();

    super.initState();

  }

  Future getSliderImageFromDB() async {

    var _fireStore = FirebaseFirestore.instance;

    QuerySnapshot snapshot = await _fireStore.collection('slider').get();

    if (mounted) {

      setState(() {

        _dataLength = snapshot.docs.length;

      });

    }

    return snapshot.docs;

  }

  @override

  Widget build(BuildContext context) {

    return Column(

      children: [

        FutureBuilder(

          future: getSliderImageFirebase(),

          builder: (context, AsyncSnapshot snap) {

            List slideList = snap.data.toList();

            return CarouselSlider.builder(

              itemCount: slideList.length,

              itemBuilder: (context, index, page) {

                return Image.network(

                  slideList[index]['image'],

                  fit: BoxFit.fill,

                  width: MediaQuery.of(context).size.width * 0.9,

                );

              },

              carouselController: buttonCarouselController,

              options: CarouselOptions(

                initialPage: 0,

                autoPlay: true,

                height: 150,

                onPageChanged: (index, reason) {

                  setState(() {

                    _index = index;

                  });

                },

              ),

            );

          },

        ),

        DotsIndicator(

          dotsCount: _dataLength,

          position: _index.toDouble(),

          decorator: DotsDecorator(

            size: const Size.square(9.0),

            activeColor: Theme.of(context).primaryColor,

            activeSize: const Size(18.0, 9.0),

            activeShape: RoundedRectangleBorder(

                borderRadius: BorderRadius.circular(5.0)),

          ),

        ),

      ],

    );

  }