Flutter产品轮播插件flutter_product_carousel的使用

Flutter产品轮播插件flutter_product_carousel的使用

简介

flutter_product_carousel 是一个Flutter插件，旨在通过提供交互性强且视觉效果吸引人的轮播组件来增强移动应用中的产品展示。它特别适合用于需要以互动和引人入胜的方式展示产品的应用程序，如电子商务应用。

功能特性

• 可定制的轮播选项：您可以使用默认的轮播选项，也可以根据需求自定义轮播行为。
• 可定制的导航图标：允许自定义导航图标，以便与应用程序的设计主题无缝集成。默认情况下，Android上显示 arrow_back 和 arrow_forward 图标，iOS上显示 arrow_back_ios 和 arrow_forward_ios 图标。
• 自动播放：支持自动循环播放产品图片，提供免手动浏览体验。您可以根据需要启用或禁用此功能。
• 无限循环：支持产品图片的无限循环滚动，用户可以不间断地浏览产品。
• 预览产品图片：以轮播格式预览所有产品图片，用户可以点击查看任何图片的详细信息。
• 360度视图：支持产品的360度视图，让用户从各个角度全面了解产品，从而提高决策过程的质量。
• 收藏和分享图标：允许用户将产品添加到收藏夹并分享给他人，增强用户参与度和互动性。

示例屏幕

以下是产品轮播组件的一些示例屏幕：

带有产品图片	带有360°图片	带有360°视图	带有所有操作

安装

在 pubspec.yaml 文件中添加依赖项，并运行 flutter pub get：

dependencies:
  flutter_product_carousel: <latest_version>

使用方法

要使用此插件，您需要在Dart代码中导入它，并使用 ProductCarousel 组件来创建轮播。以下是一个简单的示例，展示了如何创建一个基本的产品轮播：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Product Carousel Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const ProductCarouselTest(),
    );
  }
}

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

  [@override](/user/override)
  State<ProductCarouselTest> createState() => _ProductCarouselTestState();
}

class _ProductCarouselTestState extends State<ProductCarouselTest> {
  final ProductCarouselController _productCarouselController = ProductCarouselController();
  bool preView = false;
  int currentPage = 0;
  bool isFavorite = false;

  List<ImageProvider> imageList = [];

  [@override](/user/override)
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((_) => updateImageList(context));
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Product Carousel'),
        elevation: 2,
      ),
      body: ProductCarousel(
        imagesList: const [
          'https://images.stockx.com/images/Air-Jordan-3-Retro-Muslin-Product.jpg?fit=fill&bg=FFFFFF&w=140&h=75&fm=avif&auto=compress&dpr=2&trim=color&updated_at=1648503692&q=60',
          'https://images.stockx.com/images/Air-Jordan-3-Retro-Infrared-23-V2-Product.jpg?fit=fill&bg=FFFFFF&w=140&h=75&fm=avif&auto=compress&dpr=2&trim=color&updated_at=1659538591&q=60',
          'https://images.stockx.com/images/Air-Jordan-3-Retro-Racer-Blue-Product.jpg?fit=fill&bg=FFFFFF&w=140&h=75&fm=avif&auto=compress&dpr=2&trim=color&updated_at=1626802534&q=60',
          'https://images.stockx.com/images/Air-Jordan-3-Retro-Chlorophyll-Product.jpg?fit=fill&bg=FFFFFF&w=140&h=75&fm=avif&auto=compress&dpr=2&trim=color&updated_at=1607663359&q=60',
          'https://images.stockx.com/images/Air-Jordan-3-Retro-Stealth-Product.jpg?fit=fill&bg=FFFFFF&w=140&h=75&fm=avif&auto=compress&dpr=2&trim=color&updated_at=1607662925&q=60'
        ],
        multiImagesList: imageList,
        carouselOptions: ProductCarouselOptions(
          autoPlay: true, // 启用自动播放
          aspectRatio: 10 / 9, // 设置宽高比
          productCarouselController: _productCarouselController, // 控制器
          showNavigationIcons: true, // 显示导航图标
          enabledInfiniteScroll: true, // 启用无限滚动
          isFavorite: isFavorite, // 是否收藏
          previewImages: preView, // 是否预览图片
          onTap: () { // 点击事件
            setState(() {
              preView = !preView;
            });
          },
          onFavoriteTap: () { // 收藏按钮点击事件
            setState(() {
              isFavorite = !isFavorite;
            });
          },
          onShareTap: () { // 分享按钮点击事件
            print('Share button pressed');
          },
          onPageChanged: (index) { // 页面切换事件
            setState(() {
              currentPage = index;
            });
          },
        ),
      ),
    );
  }

  void updateImageList(BuildContext context) async {
    String img = '';
    for (int i = 1; i <= 35; i++) {
      if (i < 10) {
        img = 'img0$i.jpg';
      } else {
        img = 'img$i.jpg';
      }

      imageList.add(NetworkImage(
          'https://images.stockx.com/360/Air-Jordan-3-Retro-Craft-Ivory/Images/Air-Jordan-3-Retro-Craft-Ivory/Lv2/$img?'));
    }
    await Future.delayed(const Duration(milliseconds: 1100));
    setState(() {});
  }
}