Flutter产品图片轮播插件flexi_productimage_slider的使用

Flutter产品图片轮播插件flexi_productimage_slider的使用

flexi_productimage_slider

  • 一个用于展示您产品的图片轮播插件。

特性

  1. 滑动显示您的产品，并带有缩略图。
  2. 可以根据需求设置缩略图的形状、颜色、圆角半径、大小和对齐方式等。
  3. 在点击图片时执行操作。

示例代码

import 'package:flutter/material.dart';
import 'package:flexi_productimage_slider/flexi_productimage_slider.dart';
import 'package:gallery_zoom_slides/gallery_zoom_slides.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'flexi_productimage_slider',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'flexi_productimage_slider'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({required this.title});

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

class _MyHomePageState extends State<MyHomePage> {

  List<String> arrayImages = [
    "https://i.ibb.co/ZLFHX3F/1.png",
    "https://i.ibb.co/JKJvs5S/2.png",
    "https://i.ibb.co/LCzV7b3/3.png",
    "https://i.ibb.co/L8JHn1L/4.png",
    "https://i.ibb.co/7RWNCXH/5.png",
    "https://i.ibb.co/bBsh5Pm/6.png",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(height: 11,),

            flexiProductimageSlider(
              arrayImages: arrayImages,

              sliderStyle: SliderStyle.nextToSlider, // .overSlider, .nextToSlider

              aspectRatio: 0.8,

              boxFit: BoxFit.cover,

              selectedImagePosition: 0,

              thumbnailAlignment: ThumbnailAlignment.bottom, // .right , .bottom
              thumbnailBorderType: ThumbnailBorderType.all, // .bottom, .all
              thumbnailBorderWidth: 11.5, // double value

              thumbnailBorderRadius: 11,

              thumbnailWidth: 55,
              thumbnailHeight: 55,

              thumbnailBorderColor: Colors.blue,

              onTap: (index) {
                print("selected index : $index");

                Navigator.push(context, MaterialPageRoute(builder: (context) {
                  return galleryZoomSlides(
                    arrayImages: arrayImages,
                    zoomTheme: ZoomTheme.theme3, // .theme1, .theme2, .theme3
                    selectedImagePosition: index,
                    selectedThumbnailColor: Colors.blue,
                  );
                }));
              },
            ),
          ],
        ),
      ),
      // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

安装

在您的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  flexi_productimage_slider: 1.1.0

更多关于Flutter产品图片轮播插件flexi_productimage_slider的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter产品图片轮播插件flexi_productimage_slider的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中集成和使用flexi_productimage_slider插件的详细代码案例。假设你已经有一个Flutter项目，并且希望在产品详情页面中使用图片轮播功能。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加flexi_productimage_slider依赖：

dependencies:
  flutter:
    sdk: flutter
  flexi_productimage_slider: ^最新版本号  # 请替换为实际可用的最新版本号

然后运行flutter pub get来安装依赖。

2. 导入插件

在你希望使用图片轮播功能的Dart文件中（例如product_detail_page.dart），导入插件：

import 'package:flexi_productimage_slider/flexi_productimage_slider.dart';

3. 使用插件

下面是一个完整的示例，展示如何在Flutter应用中实现产品图片轮播：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ProductDetailPage(),
    );
  }
}

class ProductDetailPage extends StatefulWidget {
  @override
  _ProductDetailPageState createState() => _ProductDetailPageState();
}

class _ProductDetailPageState extends State<ProductDetailPage> {
  // 示例图片URL列表
  final List<String> imageUrls = [
    'https://example.com/product1.jpg',
    'https://example.com/product2.jpg',
    'https://example.com/product3.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('产品详情'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 产品图片轮播
            FlexiProductImageSlider(
              images: imageUrls.map((url) => FlexiProductImageModel(
                imageUrl: url,
              )).toList(),
              // 配置选项
              height: 300,
              width: double.infinity,
              borderRadius: 16,
              autoplay: true,
              autoplayDuration: 3000,
              indicatorColor: Colors.white,
              indicatorActiveColor: Colors.blue,
              dotPosition: DotPosition.bottom,
            ),
            SizedBox(height: 24),
            // 其他产品信息（如标题、描述等）
            Text(
              '产品名称',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 12),
            Text(
              '这是产品的详细描述。',
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

4. 运行应用

确保你的网络连接正常，因为示例中的图片URL需要访问外部资源。然后运行你的Flutter应用：

flutter run

这个示例展示了如何使用flexi_productimage_slider插件在Flutter应用中实现产品图片轮播功能。你可以根据实际需求调整配置选项，如图片URL、轮播高度、宽度、自动播放时间间隔等。

回到顶部