如何在flutter中实现故事进度视图答案

【问题标题】：How to implement stories progress view in flutter如何在flutter中实现故事进度视图
【发布时间】：2018-12-10 11:07:03
【问题描述】：

我想知道开发widget/view 的最佳方法，它可以用作instagram、snapchat 故事，如下图所示。 android有很多依赖项，但找不到flutter的依赖项。我正在考虑使用carousal/viewpager 在不同用户的故事之间移动，但我无法了解如何在单个用户的故事（图像或视频）之间前后移动，上面有进度条进度条完成后将自动移至下一个。

【问题讨论】：

你能实现它或者你能找到任何库吗？

标签： flutter flutter-layout

【解决方案1】：

尝试使用Stack + Transform 创建自定义ViewPager，并使用GestureDetector 在页面/故事之间切换。

【讨论】：

请您怎么解释？
嘿，@RahulKushwaha 你试过这个吗：pub.dev/packages/story_view ？
Gargs... . 我试过了。但是使用它，我能够将图像实现为故事项目。但我的要求是像故事项目一样改变不同的观点......我怎样才能实现它？
嘿，尝试发布一个问题，以便我或其他开发人员可以正确回答:)
谢谢。我在这里问过。stackoverflow.com/questions/66422001/…

【解决方案2】：

我知道这个问题已经问了很久了，但是对于那些仍然问同样问题的人，你可以使用这个库：https://pub.dev/packages/story_view 或者查看它的源代码来实现同样的事情。

【讨论】：

【解决方案3】：

不确定您是否还想让用户有机会手动切换到下一张图片。

以下是您希望用于动画“故事”的一些基本成分：

AnimationController 持续时间取决于故事中的图像数量。启动动画以浏览图像并为进度条设置动画。动画控制器的范围通常为 0.0 到 1.0。假设您有 5 张图片。您将显示从 0.0 到 0.2 的第一张图像，从 0.2 到 0.4 的第二张图像...
AnimatedBuilder 监听动画控制器。动画生成器中的内容将在动画运行时每帧重建。在builder 内部，计算必须显示哪个图像。
CustomPaint 手动绘制带有单个图像部分的进度条。将当前动画值和图像数量传递给您的CustomPainter。
Image 小部件来绘制图像。

【讨论】：