story_view

适用于带有故事的应用的故事视图。

这是一个Flutter小部件,用于像WhatsApp和Instagram一样显示故事。它也可以像Google News应用一样内联/在ListView或Column中使用。它带有用于暂停、前进和转到上一页的手势。

68747470733a2f2f692e6962622e636f2f513857747736322f53637265656e73686f742d313538343236333030332e706e67

68747470733a2f2f692e6962622e636f2f627a30523962642f53637265656e73686f742d313538343236333030382e706e67

6e67

功能

? 支持静态图像、GIF和视频(已启用缓存)

? 支持暂停、倒带和快进的手势

⚜️ 每个故事项的标题

? 每个故事项的动画进度指示器

以及用于执行元功能的有用回调,包括垂直滑动。

安装

要使用此插件,请在您的pubspec.yaml文件中将story_view添加为依赖项

用法

将包导入到您的代码中

import "package:story_view/story_view.dart";

查看examples/example.dart中有关如何使用此库的示例。您可以复制
并将代码粘贴到您的main.dart文件中并运行,以便快速查看。

基础

使用StoryView将故事添加到屏幕或视图层次结构。StoryView需要一个StoryItem列表,其中每个StoryItem描述了将在每个故事页面上显示的内容、持续时间等。这为您提供了自定义每个故事页面的自由。

提供了用于创建通用页面的简写方法。

StoryItem.text是创建仅显示文本的故事页面的简写方法。

StoryItem.pageImage创建一个带有标题的图像故事项。

StoryItem.inlineImage创建旨在显示在线性视图层次结构(如List)中的故事项
Column

? .inlineImagepageImage都支持动态GIF。

StoryItem.pageVideo创建一个带有视频媒体的页面故事项。只需提供您的视频URL即可开始使用。

故事控制器、加载器和GIF支持

在图像加载时,暂停故事直到加载完成将提供更好的体验。为了实现这种效果,请创建一个全局的StoryController实例,并在传递相同的控制器实例时使用StoryItem.pageImageStoryItem.inlineImage的简写方法。

...
final controller = StoryController();

@override
Widget build(context) {
  List<StoryItem> storyItems = [
    StoryItem.text(...),
    StoryItem.pageImage(...),
    StoryItem.pageImage(...),
    StoryItem.pageVideo(
      ...,
      controller: controller,
    )
  ]; // your list of stories

  return StoryView(
    storyItems,
    controller: controller, // pass controller here too
    repeat: true, // should the stories be slid forever
    onStoryShow: (s) {notifyServer(s)},
    onComplete: () {},
    onVerticalSwipeComplete: (direction) {
      if (direction == Direction.down) {
        Navigator.pop(context);
      }
    } // To disable vertical swipe gestures, ignore this parameter.
      // Preferrably for inline story view.
  )
}

GitHub

https://github.com/blackmann/story_view