Using a Carousel slider with text below image in Flutter

Question

I don't know how to use or where to use Carousel slider with text below image.

return Scaffold(
      body: ListView(
        children: [
          CarouselSlider(
            items: [
              Container(
                margin: EdgeInsets.all(10),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    image: DecorationImage(
                        image: NetworkImage('assets/images/phone.jpg'))),
              ),
            ],
            options: CarouselOptions(
              height: 300,
              enlargeCenterPage: true,
              autoPlay: true,
              aspectRatio: 16 / 9,
              autoPlayCurve: Curves.fastOutSlowIn,
              enableInfiniteScroll: true,
              autoPlayAnimationDuration: Duration(seconds: 1),
              viewportFraction: 0.8,
            ),
            
          )
        ],
      ),
    );

I have tried the above code but it's now showing me any image and I'm confused from where I need to start adding text.

Answer 1

You need to replace you Container with a Column to achieve the same result.

from this:

CarouselSlider(
            items: [
              Container(
                margin: EdgeInsets.all(10),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    image: DecorationImage(
                        image: NetworkImage('assets/images/phone.jpg'))),
              ),
              ...
            )

to this:

CarouselSlider(
            items: [
              Column(
                children: [
                  Container(
                    margin: EdgeInsets.all(10),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        image: DecorationImage(
                            image: NetworkImage('assets/images/phone.jpg'))),
                  ),
                  Text('Carousel text')
                ],
              ),