我需要为轮播创建数字指示器 slider flutter

Question

我创建了一个三图像 slider，但我不知道如何为该 slider 制作页面指示器。我想要第二张图像中的 slider。我附上 slider 所在的普通页面。 我需要以 slider 下方的指标为中心。

我需要在这个 slider 下方制作 slider 指示器。我附上了我需要的 slider 图片，我搜索了堆栈，但找不到相同的图片，所以我需要帮助。

完整代码：

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

void main(){
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Home(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        key: scaffoldKey,
        appBar: AppBar(
          elevation: 0,
          toolbarHeight: 100,
          backgroundColor: Colors.white38,
          centerTitle: true,
          title: const Text("Treva Shopping",
          style: TextStyle(
            color: Colors.black45
          ),),
          leading: IconButton(
            icon: const Icon(Icons.menu,
            color: Colors.black45,
            size: 32),
            onPressed: (){
              if(scaffoldKey.currentState!.isDrawerOpen){
                scaffoldKey.currentState!.closeDrawer();
                //close drawer, if drawer is open
              }else{
                scaffoldKey.currentState!.openDrawer();
                //open drawer, if drawer is closed
              }
            },
          ),
        ),
        drawer:buildDrawer(),
        body: CarouselSlider(
          items: [Image.asset("assets/AC Banner.png",
            height: 600,
          width: 380),
          Image.asset("assets/Kitchen Banner.png",
              height: 600,
              width: 380),
          Image.asset("assets/samsung banner.png",
              height: 600,
              width: 380)],
          options: CarouselOptions(
            autoPlay: true,
            enableInfiniteScroll: false,
          ),)
    );
  }

  Drawer buildDrawer() {
    return Drawer(
        child: ListView(
          children: <Widget>[
            const SizedBox(height: 20),
            ListTile(
              title: const Text("Treva",
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.black45,
              fontSize: 25),
              ),
              trailing: IconButton(
                  onPressed: (){
                    Navigator.pop(context);
                  },
                  icon: const Icon(Icons.close)),
            ),
            const SizedBox(height: 10),
            const ExpansionTile(
              leading: Icon(Icons.category_outlined),
              title: Text("All Category"),
              children:[SizedBox(height: 05,),
                Text("Sample 1")],
            ),
            const ExpansionTile(
              leading: Icon(Icons.microwave_outlined),
              title: Text("Kitchen Appliances"),
              children:[SizedBox(height: 05,),
                Text("Sample 1")],
            ),
            const ExpansionTile(
              leading: Icon(Icons.tv_rounded),
              title: Text("Television"),
              children:[SizedBox(height: 05,),
                Text("Sample 1")],
            ),
            const ExpansionTile(
              leading: Icon(Icons.air_outlined),
              title: Text("Air Conditioners"),
              children:[SizedBox(height: 05,),
                Text("Sample 1")],
            ),
            const ExpansionTile(
              leading: Icon(Icons.kitchen_outlined),
              title: Text("Refrigerators"),
              children:[SizedBox(height: 05,),
                Text("Sample 1")],
            ),const ExpansionTile(
              leading: Icon(Icons.local_laundry_service_outlined),
              title: Text("Washing Machines"),
              children:[SizedBox(height: 05,),
                Text("Sample 1")],
            ),
          ],
        ),
      );
  }
}

Answer 1

你可以这样做

    List list = [
    Colors.red,
    Colors.black,
    Colors.green,
    Colors.redAccent,
    Colors.orange,
  ];
  final CarouselController _carouselController = CarouselController();
  var _currentCarouselPage = 0;
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            CarouselSlider.builder(
              itemCount: list.length,
              carouselController: _carouselController,
              itemBuilder: (context, index, realIndex) {
                return Container(
                  height: 300,
                  color: list[index],
                );
              },
              options: CarouselOptions(
                autoPlay: true,
                // viewportFraction: 1,
                enlargeCenterPage: true,
                onPageChanged: (index, reason) {
                  setState(() {
                    _currentCarouselPage = index;
                  });
                },
                autoPlayInterval: const Duration(seconds: 3),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: list.asMap().entries.map((entry) {
                return GestureDetector(
                  onTap: () => _carouselController.animateToPage(entry.key),
                  child: Container(
                    width: 30,
                    height: 30,
                    alignment: Alignment.center,
                    margin: const EdgeInsets.symmetric(
                        vertical: 8.0, horizontal: 4.0),
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: (Colors.black).withOpacity(0.4),
                    ),
                    child: _currentCarouselPage == entry.key
                        ? Text("$_currentCarouselPage/${list.length}")
                        : null,
                  ),
                );
              }).toList(),
            ),
          ],
        ),
      ),
    );
  }

在这里查看演示

在像这样对代码进行少量更改之后

Container(
                width: _currentCarouselPage == entry.key ? 40 : 20,
                height: 20,
                alignment: Alignment.center,
                margin: const EdgeInsets.symmetric(
                    vertical: 8.0, horizontal: 4.0),
                decoration: BoxDecoration(
                  color: (Colors.black).withOpacity(0.4),
                  borderRadius: BorderRadius.circular(10),
                ),
                child: _currentCarouselPage == entry.key
                    ? Text(
                        "${_currentCarouselPage + 1}/${list.length}",
                        style: const TextStyle(fontSize: 10),
                      )
                    : null,
              ),

你可以实现这种类型的设计。