Flutter故事视图展示插件flutter_story_view的使用

简介

flutter_story_view 是一个用于在Flutter应用程序中显示类似WhatsApp和Instagram的故事视图的包。它支持图片和视频（包括本地资源和网络链接），并且提供了手势控制、动画进度指示器以及每页故事的标题。

功能特性

• 图片与视频支持 (assets 和 url)。
• 手势操作以暂停、前进或后退到上一个故事页面。
• 每个故事项都有动画进度条。
• 可以为故事添加说明文字。

安装

要使用此插件，请在pubspec.yaml文件中添加flutter_story_view作为依赖项：

dependencies:
  flutter_story_view: ^latest_version # 请确保使用最新版本

然后运行 flutter pub get 来安装该库。

使用方法

基础用法

首先需要导入库：

import 'package:flutter_story_view/flutter_story_view.dart';

接下来可以创建包含多个StoryItem的对象列表，并将其传递给FlutterStoryView构造函数。每个StoryItem代表一个单独的故事，它可以是图片或者视频，并且可以通过设置type属性来指定类型。

下面是一个完整的例子：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Story View Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: StoryViewPage(),
    );
  }
}

class StoryViewPage extends StatefulWidget {
  @override
  _StoryViewPageState createState() => _StoryViewPageState();
}

class _StoryViewPageState extends State<StoryViewPage> {
  final List<StoryItem> storyItems = [
    // 图片故事项
    StoryItem(
      url: "https://example.com/path/to/image.jpg",
      type: StoryItemType.image,
      duration: 5, // 显示时间，默认为3秒
    ),
    // 视频故事项
    StoryItem(
      url: "https://example.com/path/to/video.mp4",
      type: StoryItemType.video,
      duration: 10, // 对于视频，如果超过30秒则限制为30秒
    ),
    // 本地资源图片
    StoryItem(
      url: "assets/images/local_image.png",
      type: StoryItemType.image,
      duration: 7,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Story View Example')),
      body: Center(
        child: FlutterStoryView(
          storyItems: storyItems,
          onComplete: () {
            print("All stories have been viewed.");
          },
          onPageChanged: (index) {
            print("Now viewing story at index $index");
          },
          caption: "这是一个很棒的故事！",
          userInfo: UserInfo(
            username: "Your Name",
            profileUrl: "https://example.com/path/to/profile_picture.jpg",
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们定义了三个不同类型的故事：一个是网络上的图片，另一个是网络视频，最后一个是本地图片。同时设置了完成所有故事后的回调函数onComplete，以及切换页面时触发的事件处理器onPageChanged。此外，还可以通过caption参数给整个故事集添加一个标题，并通过userInfo提供用户信息如用户名和头像。

其他配置选项

除了上述基本功能外，FlutterStoryView还允许你自定义更多细节，例如进度条的颜色、高度等。你可以根据需要调整这些参数以适应你的应用风格。

对于更详细的文档和其他高级特性，请参考官方GitHub仓库中的README文件或直接查看源代码中的注释。

希望这篇指南对你有所帮助！如果你有任何问题或建议，欢迎随时提出。