Android Studio下Flutter有没有类似Jetpack Compose @preview的组件预览方案？

• 方案1：新增独立预览入口，不修改原有main函数
  在需要预览的页面文件中新增带入口注解的独立运行函数，Android Studio会自动识别并在函数左侧显示运行按钮，点击即可直接启动该页面，无需修改原有主入口代码，示例代码如下：

  // 加该注解避免打包时被丢弃，仅调试用可忽略
  @pragma('vm:entry-point')
  void previewParticularScreen() => runApp(
    MaterialApp(
      // 可填入和主应用一致的主题、本地化、全局配置等，保证预览效果和线上一致
      home: ParticularScreen(),
    )
  );
  

• 方案2：引入device_preview依赖包
  除了基础的页面预览能力外，还支持实时切换设备尺寸、分辨率、系统主题、文字缩放比例等，可快速验证页面在不同场景下的适配效果，示例用法：

  void main() => runApp(
    DevicePreview(
      enabled: !kReleaseMode, // 发布时自动禁用
      builder: (context) => MaterialApp(
        useInheritedMediaQuery: true,
        locale: DevicePreview.locale(context),
        builder: DevicePreview.appBuilder,
        home: ParticularScreen(),
      ),
    )
  );
  

• 方案3：使用Widgetbook预览框架
  类似前端生态的Storybook，可统一管理全应用所有组件、页面的预览用例，支持多状态、多参数的批量预览，完全和业务代码解耦，无需修改原有业务逻辑。

• 首先可以直接安装Android Studio平台的Flutter Preview插件，功能和VS Code的对应插件完全一致，支持无需启动全应用，直接在IDE侧边栏实时渲染Widget预览，代码修改后预览会自动同步更新。
• 如果你使用的是Android Studio Hedgehog及更高版本，官方Flutter插件已经内置了组件预览能力，只需给要预览的Widget添加@Preview注解，即可在IDE预览面板直接查看渲染效果，使用体验和Jetpack Compose的预览基本一致。

内容的提问来源于stack exchange，提问作者joghm