Flutter故事展示插件story_widget的使用

故事展示插件 (Story Widget)

实现类似于Facebook和Instagram的故事展示功能。

示例图片

示例视频

点击观看视频

特性

创建一个故事展示组件，用于展示用户可以浏览的一系列图片和视频，类似于Instagram和Facebook的故事功能。

🖼️ 图片播放（在特定时间长度内）
🎥 视频
🎧 音频与图片类型结合

使用方法

在这个库中，我们使用了两种模型来实现视图中的故事展示。

第一个模型：StoryListModel

该模型提供了可以在视图中展示的一系列故事，作为个人故事列表。

在这个模型中，我们可以设置自定义数据以适应个人使用场景。

class StoryListModel<A, B> {
  final String id;
  final A? data;
  final List<StoryModel<B>> stories;

  StoryListModel({
    required this.id,
    required this.stories,
    this.data,
  });
}

第二个模型：StoryModel

该模型代表单个故事的数据。如果视频类型有缩略图URL，则可以设置它。

storyType 将分为两种类型：图片和视频。因此，请注意检查您的资源。

class StoryModel<A> {
  final A? data;
  final String imageUrl;
  String thumbnailUrl;
  final StoryImageType storyType;

  bool isThumbnailUrl = true;
  final isInitialize = ValueNotifier(false);
  final isInitThumbnail = ValueNotifier(false);
  late VideoPlayerController? videoPlayer = null;

  StoryModel(
      {this.data,
      this.imageUrl = '',
      this.thumbnailUrl = '',
      this.storyType = StoryImageType.Image});
}

通过在项目中使用此库，只需使用 StoryWidget 组件即可。

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter项目中使用 story_widget 插件。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: StoryWidget(
          heightSlider: 2,
          listStories: [
            StoryListModel(
              id: '',
              stories: [
                StoryModel(
                    audioUrl:
                        'https://commondatastorage.googleapis.com/codesculptor-assets/Evillaugh.ogg',
                    imageUrl:
                        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTb5z6MCCSYYRWCiVDmoNaRZ1qEwl6MlQCOzkSBJbdMlg&s',
                    storyType: StoryImageType.Image),
                StoryModel(
                    imageUrl:
                        'https://firebasestorage.googleapis.com/v0/b/web-chat-709ef.appspot.com/o/robin_-_65801%20(540p).mp4?alt=media&token=225ea638-cda1-42a2-b8db-7fcd4d6e5ffd',
                    storyType: StoryImageType.Video),
                StoryModel(
                    audioUrl:
                        'https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/theme_01.mp3',
                    imageUrl:
                        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTb5z6MCCSYYRWCiVDmoNaRZ1qEwl6MlQCOzkSBJbdMlg&s',
                    storyType: StoryImageType.Image),
                StoryModel(
                    imageUrl:
                        'https://firebasestorage.googleapis.com/v0/b/web-chat-709ef.appspot.com/o/189018%20(540p).mp4?alt=media&token=e315974f-739a-4ad2-960e-a5ac8cdd7de7',
                    storyType: StoryImageType.Video),
              ],
            ),
            StoryListModel(id: '', stories: [
              StoryModel(
                  imageUrl:
                      'https://player.vimeo.com/progressive_redirect/playback/906926404/rendition/540p/file.mp4?loc=external&oauth2_token_id=1747418641&signature=cd6774e0dd93f076bbdfddc237e7eff87a8b75b4ea23987cd27445db6275c960',
                  storyType: StoryImageType.Video),
              StoryModel(
                  imageUrl:
                      'https://player.vimeo.com/progressive_redirect/playback/906924247/rendition/360p/file.mp4?loc=external&oauth2_token_id=1747418641&signature=6cbd7b8a638c2f5e476df26f81c6ff59c13bf86e569d4cd155410658fe34c2ef',
                  storyType: StoryImageType.Video),
              StoryModel(
                  imageUrl:
                      'https://player.vimeo.com/progressive_redirect/playback/906908763/rendition/360p/file.mp4?loc=external&oauth2_token_id=1747418641&signature=bace0f199705c841170d91388f6ce4b21ce41a5710b9e697495410aefad65d45',
                  storyType: StoryImageType.Video),
              StoryModel(
                  imageUrl:
                      'https://player.vimeo.com/progressive_redirect/playback/906901121/rendition/360p/file.mp4?loc=external&oauth2_token_id=1747418641&signature=7328c0ea9259aa4b8c958e3e8ad96c75cb2548b99b94e35309adef97d688ae59',
                  storyType: StoryImageType.Video),
            ]),
            StoryListModel(id: '', stories: [
              StoryModel(
                  imageUrl:
                      'https://player.vimeo.com/progressive_redirect/playback/906835820/rendition/360p/file.mp4?loc=external&oauth2_token_id=1747418641&signature=06d7192d857602f155cb3cee1dfce747dc807510f48bbe44d0dcba4b92f05bcd',
                  storyType: StoryImageType.Video),
              StoryModel(
                  imageUrl:
                      'https://player.vimeo.com/progressive_redirect/playback/906815729/rendition/360p/file.mp4?loc=external&oauth2_token_id=1747418641&signature=06c826eaa8b1404ac80f893aeaa8937d3b3e1541ecf5c777441c7411f4d2b7d5',
                  storyType: StoryImageType.Video),
              StoryModel(
                  imageUrl:
                      'https://player.vimeo.com/progressive_redirect/playback/906830335/rendition/360p/file.mp4?loc=external&oauth2_token_id=1747418641&signature=97c650364130a3bd867485ddccf4e421b07a506b6b9e2934938fefce7bf1d488',
                  storyType: StoryImageType.Video),
              StoryModel(
                  imageUrl:
                      'https://player.vimeo.com/progressive_redirect/playback/906752007/rendition/360p/file.mp4?loc=external&oauth2_token_id=1747418641&signature=ce27499781e59f8fa37e5c97622e0de4d84309b725bdd65ff956b56f9d717e45',
                  storyType: StoryImageType.Video),
            ]),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter故事展示插件story_widget的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

yibo5220 1楼

更多关于Flutter故事展示插件story_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何在Flutter应用中使用story_widget插件的示例代码。这个插件通常用于以故事格式展示内容，例如图片或者视频序列。假设你已经添加了story_widget到你的pubspec.yaml文件中。

首先，确保你的pubspec.yaml文件包含以下依赖：

dependencies:
  flutter:
    sdk: flutter
  story_widget: ^最新版本号  # 请替换为实际最新版本号

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

接下来，在你的Flutter应用中，你可以按照以下方式使用story_widget：

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

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

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

class StoryScreen extends StatelessWidget {
  final List<String> imageUrls = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
    // 添加更多图片URL
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Story Widget Demo'),
      ),
      body: Center(
        child: StoryWidget(
          storyItems: imageUrls.map((url) => StoryItem.network(url)).toList(),
          indicatorColor: Colors.white,
          indicatorBackgroundColor: Colors.black45,
          pageController: PageController(viewportFraction: 0.8), // 可选，用于控制页面切换
          onPageChanged: (index) {
            print('Page changed to: $index');
          },
          onCompleted: () {
            print('Story completed!');
          },
        ),
      ),
    );
  }
}

在这个示例中：

依赖导入：首先导入了flutter和story_widget包。
主应用：MyApp是一个无状态组件，它设置了应用的主题并导航到StoryScreen。
故事屏幕：StoryScreen是一个无状态组件，它包含一个Scaffold，其中包含一个AppBar和一个居中的StoryWidget。
图片URL列表：imageUrls列表包含了要展示的图片URL。
StoryWidget：StoryWidget被配置为使用网络图片（StoryItem.network(url)），并设置了一些可选参数，如指示器颜色、背景颜色、页面控制器以及页面更改和完成时的回调。

请确保替换imageUrls中的URL为实际可访问的图片链接。此外，你可以根据需求调整PageController的viewportFraction属性，以控制每页显示的内容比例。

这样，你就可以在Flutter应用中集成并使用story_widget插件来展示故事内容了。