instagram_stories_flutter 是一个用于在 Flutter 应用中实现类似 Instagram 故事展示功能的插件。它允许你以轮播的方式展示多个故事，并且每个故事可以包含多个图片或视频片段。

以下是如何使用 instagram_stories_flutter 插件的基本步骤：

1. 添加依赖

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

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

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

2. 导入插件

在你的 Dart 文件中导入插件：

import 'package:instagram_stories_flutter/instagram_stories_flutter.dart';

3. 创建故事数据

你需要为每个故事创建一个 Story 对象，并将它们放入一个列表中。每个 Story 对象可以包含多个 StoryItem，每个 StoryItem 代表故事中的一个图片或视频片段。

List<Story> stories = [
  Story(
    user: User(
      name: 'User 1',
      profileImageUrl: 'https://example.com/profile1.jpg',
    ),
    items: [
      StoryItem.image(url: 'https://example.com/story1_1.jpg'),
      StoryItem.image(url: 'https://example.com/story1_2.jpg'),
      StoryItem.video(url: 'https://example.com/story1_3.mp4'),
    ],
  ),
  Story(
    user: User(
      name: 'User 2',
      profileImageUrl: 'https://example.com/profile2.jpg',
    ),
    items: [
      StoryItem.image(url: 'https://example.com/story2_1.jpg'),
      StoryItem.video(url: 'https://example.com/story2_2.mp4'),
    ],
  ),
];

4. 展示故事

使用 InstagramStories 组件来展示故事列表。你可以将它放在你的页面布局中，例如 Scaffold 的 body 部分。

class MyHomePage extends StatelessWidget {
  final List<Story> stories = [
    // 你的故事数据
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Instagram Stories'),
      ),
      body: InstagramStories(
        stories: stories,
        onComplete: () {
          // 当所有故事播放完毕时调用
          print('All stories completed');
        },
      ),
    );
  }
}

5. 自定义选项

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

• onComplete: 当所有故事播放完毕时调用的回调函数。
• onStoryShow: 当某个故事开始播放时调用的回调函数。
• onStoryPause: 当某个故事暂停时调用的回调函数。
• onStoryResume: 当某个故事恢复播放时调用的回调函数。

6. 运行应用

现在你可以运行你的 Flutter 应用，并看到类似 Instagram 的故事展示功能。

完整示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Instagram Stories Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final List<Story> stories = [
    Story(
      user: User(
        name: 'User 1',
        profileImageUrl: 'https://example.com/profile1.jpg',
      ),
      items: [
        StoryItem.image(url: 'https://example.com/story1_1.jpg'),
        StoryItem.image(url: 'https://example.com/story1_2.jpg'),
        StoryItem.video(url: 'https://example.com/story1_3.mp4'),
      ],
    ),
    Story(
      user: User(
        name: 'User 2',
        profileImageUrl: 'https://example.com/profile2.jpg',
      ),
      items: [
        StoryItem.image(url: 'https://example.com/story2_1.jpg'),
        StoryItem.video(url: 'https://example.com/story2_2.mp4'),
      ],
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Instagram Stories'),
      ),
      body: InstagramStories(
        stories: stories,
        onComplete: () {
          print('All stories completed');
        },
      ),
    );
  }
}