Flutter故事视图展示插件easydev_story_view的使用

Flutter故事视图展示插件easydev_story_view的使用

easydev_story_view

这是一个用于在应用程序中展示故事的Flutter小部件，采用easydev ui套件。它提供了暂停、切换和关闭故事的手势动画，并且可以自定义故事。

屏幕截图

这个Flutter小部件用于在应用中展示故事，并采用easydev ui套件。它支持手势来暂停、前进、回到上一页，并且能够自定义故事。

特性

• 支持通过手势暂停、切换故事并带有拖动动画来关闭。
• 内置对图片和视频的支持，还可以创建自定义的故事。
• 带有动画进度指示器。
• 内置底部信息栏，也可以创建自定义底部信息栏。
• 控制器用于管理故事。

安装

要使用这个包，在pubspec.yaml文件中添加easydev_story_view和easydev_theme作为依赖项。

dependencies:
  easydev_story_view: ^x.x.x
  easydev_theme: ^x.x.x

使用

导入包：

import "package:easydev_story_view/easydev_story_view.dart";

EasyDevStory必须被EasyDevTheme包裹。你可以手动提供主题，例如使用EasyDevTheme（来自easydev_theme包）、Theme或CupertinoTheme，或者使用自动提供主题的小部件，例如EasyDevApp（来自easydev_basics包）、MaterialApp或CupertinoApp。

基础用法

EasyDevStory

使用EasyDevStory向屏幕或视图层次结构中添加故事。EasyDevStory需要storyCount来确定将显示多少个故事，storyBuilder来构建故事，sliderBuilder来构建每个故事的列表项。

EasyDevStory(
  storyCount: 10,
  storyBuilder: (storyIndex) => Story(...),
  sliderBuilder: (storyIndex) => ...
),

Story

Story需要contentCount来确定故事中将显示多少个页面，contentBuilder来构建故事内容。在contentBuilder中必须返回EasyDevStoryContent小部件。

Story(
  contentCount: 5,
  contentBuilder: (contentIndex) => EasyDevStoryContent(...),
),

EasyDevStoryContent

有三种内置的EasyDevStoryContent：

• ImageContent 用于显示图片。
• VideoContent 用于显示视频。
• SimpleCustomContent 用于显示同步内容。

要创建自定义内容，需要创建一个继承自StoryContent的小部件。

滑块项目

有两种内置的滑块项目用于sliderBuilder：

• SimpleCustomSlideItem 用于显示同步内容。
• ImageNetworkSlideItem 用于显示网络图片。

你可以创建自己的自定义滑块项目并传递给sliderBuilder。

基本示例

以下是一个基本的使用故事的例子：

...
@override
Widget build(BuildContext context) {
  const firstStoryContent = [
    ImageContent(
      url: 'https://loremflickr.com/600/900',
      timeout: Duration(seconds: 10),
      duration: Duration(seconds: 15),
    ),
    VideoContent(
      url: 'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
      timeout: Duration(seconds: 10),
    ),
  ];

  final secondStoryContent = [
    SimpleCustomContent(
      duration: const Duration(seconds: 5),
      builder: (context) {
        return const Text('Simple custom story 1');
      },
    ),
    SimpleCustomContent(
      duration: const Duration(seconds: 5),
      builder: (context) {
        return const Text('Simple custom story 2');
      },
    )
  ];

  final stories = [firstStoryContent, secondStoryContent];
  final storiesSliders = [
    const SimpleCustomSlideItem(
      width: 120,
      height: 120,
      text: 'Large large text',
    ),
    const ImageNetworkSlideItem(
      url: 'https://docs.flutter.dev/assets/images/dash/dash-fainting.gif',
      width: 120,
      height: 120,
    )
  ];

  return SafeArea(
    child: Column(
      children: [
        SizedBox(
          height: 120,
          child: EasyDevStory(
            storyCount: stories.length,
            storyBuilder: (storyIndex) => Story(
              contentCount: stories[storyIndex].length,
              contentBuilder: (contentIndex) => stories[storyIndex][contentIndex],
            ),
            sliderBuilder: (storyIndex) {
              return storiesSliders[storyIndex];
            },
          ),
        ),
      ],
    ),
  );
}

额外定制

EasyDevStoryStyle

使用EasyDevStoryStyle来定制故事小部件的外观。

EasyDevStory(
  ...
  style: const EasyDevStoryStyle(
    sliderStyle: SliderStyle(
      spacing: 10,
      padding: EdgeInsets.zero,
    ),
    indicatorStyle: IndicatorStyle(),
  ),
),

StoryFooter

你可以在故事内容中添加底部信息栏。有两个内置的底部信息栏：StoryFooter.large 和 StoryFooter.small。你也可以创建自定义的小部件并传递给EasyDevStory。

EasyDevStory(
  ...
  footer: StoryFooter.large(
    mainButtonLabel: "Learn More",
    onMainButton: () => ...,
    onButtonLikeTap: (bool state) => ...,
    onButtonShareTap: () => ...,
    onButtonBookmarkTap: (bool state) => ...,
    likeInitState: ...,
    bookmarkInitState: ...,
  ),
),

EasyDevStoryController

你可以为故事添加控制器来管理它们。

...
final EasyDevStoryController controller = EasyDevStoryController();
...
EasyDevStory(
  ...
  controller: controller,
),