Flutter插件预览功能插件idea_widget_preview的使用

关于

该插件（pub包和IDE插件）旨在帮助Flutter开发者创建与业务逻辑无关的可重用UI组件。

通用信息

此存储库包含以下内容：

• 公开可用的idea_widget_preview pub包的开源代码
• 使用闭源Widget Preview for Flutter插件所需的文档和法律信息

示例演示

以下是插件在实际应用中的效果：

（演示中使用的部件来自这里。）

目录

• 关于
  • 通用
  • 演示
• 文档
  • 开始使用
    • 前置条件
    • 第一个预览
    • 转换文件
  • 插件界面

文档

开始使用

前置条件

1. 在您的机器上安装Flutter：
   • 安装Flutter
   • 推荐：将flutter工具添加到您的路径中。
2. 将idea_widget_preview pub包添加到您的项目中。
3. 在Jetbrains IDE中安装Widget Preview for Flutter插件。
4. 推荐：将lib/widget.preview.dart添加到您的.gitignore文件中。

第一个预览

以下是一个典型的部件设置示例：

import 'package:flutter/material.dart';
import 'package:idea_widget_preview/preview.dart';

// 1) 您的部件
class Example extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      color: Colors.amber,
    );
  }
}

// 2) 对应的预览
class ExamplePreview extends PreviewProvider {
  [@override](/user/override)
  List<Preview> get previews => [
        // 3) 单独的声明
        Preview(
          title: "简单",
          builder: (BuildContext context) {
            return Example();
          },
        )
      ];
}

从上面的代码可以看出，在声明预览时需要注意以下三点：

1. 部件。
2. 衍生自PreviewProvider且具有无参构造函数的公共类声明。
3. 您希望在预览中看到的单独声明。

转换文件

（高级主题。了解这一特性很有价值。）

如果您希望最小化对idea_widget_preview的依赖，或者已经在项目中配置了storybook，可以使用替代方案来扩展或实现PreviewProvider类。

您可以提供自定义实现，将现有的类转换为PreviewProvider。在以下示例中，StoryProvider是您的自定义类。

abstract class StoryProvider {
  List<Story> get stories;
}

class ConvertToPreviews implements ToPreviewProvider<StoryProvider> {
  [@override](/user/override)
  PreviewProvider toPreviewProvider(StoryProvider value) {
    return PreviewProvider.createAnonymous(
      previews: value.stories
          .map(
            (story) => Preview(
                title: story.name,
                builder: story.builder,
            ),
          )
          .toList(),
    );
  }
}

这样配置后，您可以像这样创建预览：

class MealsViewStory implements StoryProvider {
  [@override](/user/override)
  final List<Story> stories = [
    Story(
      name: 'Widget/Breakfast',
      description: '一个关于早餐的预览。',
      builder: (context) =>
              MealsView(
                mealsListData: MealsListData.tabIconsList[0],
              ),
    ),
    // ...
  ];
}