Flutter故事展示插件story_dart的使用

story_dart 是一个用于 Flutter 的插件，它可以帮助你轻松地在应用中展示故事（类似于 Instagram 或 Snapchat 的故事功能）。这个插件允许你展示一系列带有图片或视频的故事卡片，用户可以滑动浏览。

以下是如何使用 story_dart 插件的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 story_dart 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  story_dart: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 story_dart 包：

import 'package:story_dart/story_dart.dart';

3. 创建故事数据

你需要准备一些故事数据，通常是一个包含图片或视频 URL 的列表。例如：

final List<StoryModel> stories = [
  StoryModel(
    imageUrl: 'https://example.com/image1.jpg',
    duration: Duration(seconds: 5),
  ),
  StoryModel(
    imageUrl: 'https://example.com/image2.jpg',
    duration: Duration(seconds: 5),
  ),
  StoryModel(
    videoUrl: 'https://example.com/video1.mp4',
    duration: Duration(seconds: 10),
  ),
];

4. 使用 StoryDart 组件

在你的 UI 中使用 StoryDart 组件来展示故事：

class StoryScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: StoryDart(
        stories: stories,
        onComplete: () {
          // 当所有故事播放完毕时的回调
          Navigator.pop(context);
        },
      ),
    );
  }
}

5. 导航到故事页面

你可以通过导航将用户带到故事页面：

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => StoryScreen(),
  ),
);

6. 自定义选项

StoryDart 组件提供了一些自定义选项，例如：

• onComplete: 当所有故事播放完毕时的回调。
• onStoryChanged: 当用户切换到下一个或上一个故事时的回调。
• progressBarColor: 进度条的颜色。
• progressBarHeight: 进度条的高度。
• showProgressBar: 是否显示进度条。

例如：

StoryDart(
  stories: stories,
  onComplete: () {
    Navigator.pop(context);
  },
  onStoryChanged: (index) {
    print('当前故事索引: $index');
  },
  progressBarColor: Colors.blue,
  progressBarHeight: 4.0,
  showProgressBar: true,
);

7. 处理视频故事

如果你的故事包含视频，story_dart 会自动处理视频的播放。你只需要提供视频的 URL 和持续时间。

8. 处理用户交互

用户可以通过以下方式与故事交互：

• 点击屏幕右侧：切换到下一个故事。
• 点击屏幕左侧：切换到上一个故事。
• 长按屏幕：暂停当前故事的播放。

9. 处理错误

如果图片或视频加载失败，story_dart 会显示一个默认的错误占位符。你可以通过自定义 errorBuilder 来处理错误：

StoryDart(
  stories: stories,
  errorBuilder: (context, error) {
    return Center(
      child: Text('加载失败'),
    );
  },
);

10. 完整示例

以下是一个完整的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final List<StoryModel> stories = [
    StoryModel(
      imageUrl: 'https://example.com/image1.jpg',
      duration: Duration(seconds: 5),
    ),
    StoryModel(
      imageUrl: 'https://example.com/image2.jpg',
      duration: Duration(seconds: 5),
    ),
    StoryModel(
      videoUrl: 'https://example.com/video1.mp4',
      duration: Duration(seconds: 10),
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Story Dart Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => StoryScreen(stories: stories),
              ),
            );
          },
          child: Text('查看故事'),
        ),
      ),
    );
  }
}

class StoryScreen extends StatelessWidget {
  final List<StoryModel> stories;

  StoryScreen({required this.stories});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: StoryDart(
        stories: stories,
        onComplete: () {
          Navigator.pop(context);
        },
        onStoryChanged: (index) {
          print('当前故事索引: $index');
        },
        progressBarColor: Colors.blue,
        progressBarHeight: 4.0,
        showProgressBar: true,
        errorBuilder: (context, error) {
          return Center(
            child: Text('加载失败'),
          );
        },
      ),
    );
  }
}