Flutter图片轮播插件flutter_image_carousel_slider的使用

Features

• 快速流畅的Flutter图片轮播滑块。

Getting started

在Flutter中，轮播滑块（carousel slider）是一种UI组件，用于以水平滚动的方式展示一系列项目，通常一次只显示一个项目。用户可以通过滑动或滚动浏览这些项目，提供了一种视觉吸引力强且交互性高的内容导航方式。 图片轮播（Image carousels），通常称为滑块，是网页上的交互元素，以旋转序列展示多张图片或内容片段。起源于简单的照片滑块，其发展受到网络技术进步的显著影响。

要使用这个包，请导入最新版本的包并直接传递图片路径，例如：

ImageCarouselSlider(items: imageList),

示例：显示图片库视图

如果您想以画廊视图显示图片，可以这样做：

InkWell(
  onTap: () {
    Navigator.of(context).push(MaterialPageRoute(
      builder: (context) {
        return ImageListView(
          imageList: imageList,
        );
      }
    ));
  },
  child: ImageCarouselSlider(
    items: imageList,
    imageHeight: 300,
    dotColor: Colors.black,
  ),
),

示例：左右显示模式

为了实现左右滑动查看图片的效果，您可以这样使用：

InkWell(
  onTap: () {
    Navigator.of(context).push(MaterialPageRoute(builder: (context) {
      return ImageListView(
        imageList: imageList,
      );
    }));
  },
  child: ImageCarouselSliderLeftRightShow(
    items: imageList,
    imageHeight: 300,
    dotColor: Colors.black,
  ),
),

对于资源图片（Asset Images），可以使用如下代码：

AssetImageCarouselSlider(
  items: imageList,
  imageHeight: 300,
  dotColor: Colors.black,
),

完整示例Demo

下面是一个完整的示例demo，展示了如何在一个Flutter应用程序中集成flutter_image_carousel_slider插件来创建一个图片轮播功能。

import 'package:flutter/material.dart';
import 'package:flutter_image_carousel_slider/asset_image_carousel_slider.dart';
import 'package:flutter_image_carousel_slider/image_carousel_slider.dart';
import 'package:flutter_image_carousel_slider/image_carousel_slider_left_right_show.dart';
import 'package:flutter_image_carousel_slider/list_image_view.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Image carousel slider',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Image carousel slider'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> imageList = [
    "https://thumbs.dreamstime.com/z/luxury-yacht-mediteranean-sea-sardinia-26104031.jpg?ct=jpeg",
    "https://thumbs.dreamstime.com/z/luxury-yacht-sea-26613003.jpg?ct=jpeg",
    "https://thumbs.dreamstime.com/z/speed-boat-5750774.jpg?ct=jpeg",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: [
            InkWell(
              onTap: () {
                Navigator.of(context).push(MaterialPageRoute(builder: (context) {
                  return ImageListView(
                    imageList: imageList,
                  );
                }));
              },
              child: ImageCarouselSlider(
                items: imageList,
                imageHeight: 300,
                dotColor: Colors.black,
              ),
            ),
            InkWell(
              onTap: () {
                Navigator.of(context).push(MaterialPageRoute(builder: (context) {
                  return ImageListView(
                    imageList: imageList,
                  );
                }));
              },
              child: ImageCarouselSliderLeftRightShow(
                items: imageList,
                imageHeight: 300,
                dotColor: Colors.black,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

希望上述信息对您有帮助！如果您有任何问题或建议，请联系我 naveensheoran1000@gmail.com 或 Telegram @NaveenSheoran777。