Слайдер карусели Flutter с текстом под ним

Я хочу создать карусель меню с текстовым описанием под ней, но не знаю, как это сделать. Поскольку я не понимаю, как создать карусель с текстом, который может изменяться в соответствии с меню, показанным ниже, я конвертирую текст и изображения в формат PNG и ввожу их в карусель.

Но на самом деле, как мне сделать карусель изображений с текстом внизу, потому что я планирую анимировать изображение меню, вращая его при смахивании.

Вот код для списка используемых изображений

      List imgList = [
'assets/images/miso.png',
'assets/images/rapokki.png',
'assets/images/seafood.png',
'assets/images/spicy.png',];

Вот код CarouselSlider.

                 Column(
              children: [
                CarouselSlider(
                  carouselController: controller,
                  options: CarouselOptions(
                    viewportFraction: 1,
                    initialPage: 0,
                    aspectRatio: 1,
                    enlargeCenterPage: true,
                    enableInfiniteScroll: true,
                    onPageChanged: (index, reason) =>
                        setState(() => activeIndex = index),
                  ),
                  items: imgList.map((item) {
                    return Padding(
                      padding: const EdgeInsets.only(left: 10.0),
                      child: Stack(
                        children: [
                          Container(
                            height: 400,
                            child: Image.asset(
                              '$item',
                              fit: BoxFit.cover,
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(top: 210),
                            child: buildButtons(),
                          ),
                        ],
                      ),
                    );
                  }).toList(),
                ),

Вот пакет, который я использую в своем pubspec.yamlpubspec.yaml

Цель, которой я хочу достичь Gif примера моей цели

Текущий результат моего кода Gif моего текущего результата

0 ответов

Другие вопросы по тегам