Flutter轮播视图插件flutter_reels_viewer的使用

Flutter Reels Viewer

Flutter Reels Viewer 是一个高度可定制化的组件，用于在垂直滚动列表中展示多个视频。它为观看短视频提供了流畅的滚动体验，类似于Facebook、Instagram和YouTube等平台。

预览

Demo APK

你可以通过这里下载演示应用程序。

安装

在你的 pubspec.yaml 文件中的依赖项部分添加最新版本的包：

dependencies:
  flutter:
    sdk: flutter

  flutter_reels_viewer: ^1.0.0

然后在终端运行：

$ flutter pub get

使用方法

视频列表可以仅包含视频

List<dynamic> videos = [
  'https://assets.mixkit.co/videos/39767/39767-720.mp4',
  'https://assets.mixkit.co/videos/34487/34487-720.mp4',
  'https://assets.mixkit.co/videos/34404/34404-720.mp4'
];

或者包含带有封面图片的视频

List<dynamic> videosWithImage = [
  {
    'video': 'https://assets.mixkit.co/videos/39767/39767-720.mp4',
    'image': 'https://assets.mixkit.co/videos/39767/39767-thumb-360-0.jpg'
  },
  {
    'video': 'https://assets.mixkit.co/videos/34487/34487-720.mp4',
    'image': 'https://assets.mixkit.co/videos/34487/34487-thumb-360-0.jpg'
  },
  {
    'video': 'https://assets.mixkit.co/videos/34404/34404-720.mp4',
    'image': 'https://assets.mixkit.co/videos/34404/34404-thumb-360-0.jpg'
  },
];

简单示例

FlutterReelsViewer.network(
    height: MediaQuery.of(context).size.height,
    width: MediaQuery.of(context).size.width,
    videoSourceList: videos, // OR videosWithImage
    scrollDirection: Axis.vertical,
    preloadPagesCount: 2,
    videoBoxFit: BoxFit.cover,
    playInLoop: true,
    showControlsOverlay: true,
    showVideoProgressIndicator: true,
    onPageChanged: (videoPlayerController, index) {},
    getCurrentVideoController: (videoPlayerController) {},
    overlayBuilder: (context, index) => MyCustomVideoOverlay(index)
);

变体

属性

FlutterReelsViewer(...)

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用flutter_reels_viewer插件来创建一个简单的视频轮播视图。

import 'package:flutter/material.dart';
import 'package:flutter_reels_viewer/flutter_reels_viewer.dart';
// 假设有一个名为video_repository.dart的文件，其中包含了视频数据
import 'package:flutter_reels_viewer_example/video_repository.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: FlutterReelsViewer.network(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        videoSourceList: VideoRepository.videosWithPoster,
        scrollDirection: Axis.vertical,
        preloadPagesCount: 2,
        videoBoxFit: BoxFit.cover,
        playInLoop: true,
        showControlsOverlay: true,
        showVideoProgressIndicator: true,
        onPageChanged: (videoPlayerController, index) {},
        getCurrentVideoController: (videoPlayerController) {},
        overlayBuilder: (context, index) => MyCustomVideoOverlay(index),
      ),
    );
  }
}

class MyCustomVideoOverlay extends StatelessWidget {
  final int index;

  const MyCustomVideoOverlay(this.index, {super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Expanded(
            child: Column(
              children: [
                const Spacer(),
                Row(
                  children: [
                    CircleAvatar(
                      radius: 24,
                      backgroundImage: NetworkImage(
                          "https://generated.photos/vue-static/home/hero/${(index % 8) + 1}.png"),
                    ),
                    const SizedBox(width: 8.0),
                    Text(
                      "@User Name $index",
                      style: const TextStyle(
                        color: Colors.white,
                        fontSize: 16.0,
                        fontWeight: FontWeight.bold,
                      ),
                    )
                  ],
                ),
                const SizedBox(height: 8),
                const Text(
                  "A Flutter widget that displays multiple videos in a vertically scrollable list, providing a smooth scrolling experience while watching short videos...",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16.0,
                  ),
                )
              ],
            ),
          ),
          Wrap(
            alignment: WrapAlignment.end,
            crossAxisAlignment: WrapCrossAlignment.center,
            spacing: 20,
            direction: Axis.vertical,
            children: [
              IconText(
                const Icon(Icons.thumb_up, color: Colors.white, size: 38.0),
                "234",
                () {},
              ),
              IconText(
                const Icon(Icons.comment, color: Colors.white, size: 38.0),
                "57",
                () {},
              ),
              IconText(
                const Icon(Icons.share, color: Colors.white, size: 38.0),
                "342",
                () {},
              ),
              const Icon(Icons.more_vert, color: Colors.white, size: 38.0),
            ],
          )
        ],
      ),
    );
  }
}

class IconText extends StatelessWidget {
  final Icon icon;
  final String text;
  final Function onPressed;

  const IconText(this.icon, this.text, this.onPressed, {super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(icon: icon, onPressed: () => onPressed()),
        Text(text, style: const TextStyle(color: Colors.white)),
      ],
    );
  }
}

这个例子创建了一个全屏的黑色背景Scaffold，并在其上放置了FlutterReelsViewer.network小部件，该小部件接收了一系列带有封面图像的视频，并以垂直滚动的方式展示它们。同时，我们还定义了一个自定义的覆盖层MyCustomVideoOverlay，它会在每个视频上方显示一些信息，例如用户名、简介以及点赞、评论和分享按钮等交互元素。