flutter:用carousel_slider显示幻灯图

一，下载第三方库

地址:

https://pub.dev/packages/carousel_slider

编辑pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^5.0.0

然后点击pub get下载

二，代码:

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


// 定义一个包含图片 URL 的列表
final List<String> imgList = [
  'https://jmy-pic.baidu.com/0/pic/1644895299_-1599608410_660496424.jpg',
  'https://jmy-pic.baidu.com/0/pic/897469665_-476709136_-1493967704.jpg',
  'https://jmy-pic.baidu.com/0/pic/-109031177_-1750344820_-1123988168.jpg',
  'https://jmy-pic.baidu.com/0/pic/306852221_-594276015_-475273235.jpg',
];
//用来显示图片的容器列表
final List<Widget> imageSliders = imgList.map((item) => Container(
  decoration:BoxDecoration(
    color:Colors.black12,//设置背景色为灰色
  ),
  child: Center(
    child: Image.network(item, fit: BoxFit.cover),
  ),
)).toList();

class SlidePage extends StatefulWidget {
  const SlidePage({super.key});

  @override
  State<SlidePage> createState() => _SlidePageState();
}

class _SlidePageState extends State<SlidePage> with AutomaticKeepAliveClientMixin{


  int _current = 0;
  final CarouselSliderController _controller = CarouselSliderController();

  @override
  Widget build(BuildContext context) {
    print("Profile build");
    super.build(context);
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "Profile标题",
          style: TextStyle(color: Colors.white),
        ),
        centerTitle: true,
        backgroundColor: Colors.blue,
      ),
      body: Column(children: [
          Stack(
          alignment: Alignment.center,
          children: <Widget>[

            CarouselSlider(
              items: imageSliders,
              carouselController: _controller,
              options: CarouselOptions(
                  height:300,
                  autoPlayInterval: Duration(seconds: 3), // 自动播放间隔时间
                  viewportFraction: 1.0, // 每个页面的显示比例,小于1时显示左右侧的图片的相邻部分
                  autoPlayAnimationDuration: Duration(milliseconds: 800), // 自动播放动画时长
                  aspectRatio: 2.0,
                  onPageChanged: (index, reason) {
                    setState(() {
                      _current = index;
                    });
                  }),
            ),

            Positioned(
                bottom: 10,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: imgList.asMap().entries.map((entry) {
                return GestureDetector(
                  onTap: () => _controller.animateToPage(entry.key),
                  child: Container(
                    width: 12.0,
                    height: 12.0,
                    margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 4.0),
                    decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: (Theme.of(context).brightness == Brightness.dark
                            ? Colors.white
                            : Colors.black)
                            .withOpacity(_current == entry.key ? 0.9 : 0.4)),
                  ),
                );
              }).toList(),
            ),
            ),
            ]
          ),
      ]),

    );
  }

  @override
  bool get wantKeepAlive => true;
}

三，测试效果: