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



功能
? 支持静态图像、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
?
.inlineImage和pageImage都支持动态GIF。
StoryItem.pageVideo创建一个带有视频媒体的页面故事项。只需提供您的视频URL即可开始使用。
故事控制器、加载器和GIF支持
在图像加载时,暂停故事直到加载完成将提供更好的体验。为了实现这种效果,请创建一个全局的StoryController实例,并在传递相同的控制器实例时使用StoryItem.pageImage或StoryItem.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.
)
}