Flutter预览功能插件preview的使用

创建你的小部件样本并在实时预览中查看它们

开始使用

安装

1. 在 VS Code 中安装 Flutter Preview 扩展。
   安装指南

2. 将 preview package 添加到你的 Flutter 项目中。
   安装指南

运行预览

1. 在 VS Code 中打开一个 Dart 文件时，会显示预览按钮。
2. 点击该按钮以启动 Flutter Preview。

添加预览

VS Code 提供了一个代码片段来创建预览，只需输入 preview 即可看到。

示例代码：

class MyPreview extends PreviewProvider {

  List<Preview> get previews {
    return [
      
    ];
  }
}

1. 添加多个 Preview 小部件以显示你想要展示的不同样本。

List<Preview> get previews {
    return [
      Preview(
        frame: Frames.ipadPro12,
        child: MyApp(),
      ),
      Preview(
        frame: Frames.iphoneX,
        child: MyApp(),
      ),
    ];
  }

保存文件后，这些示例会立即出现在预览窗口中，并且每次返回该文件时都会显示。

最大化利用 Flutter Preview

预览小部件

Preview 小部件允许你为小部件设置默认值，影响其内部显示效果。当前可用的值包括：

• theme: 添加应用主题，以便在你的样式下查看小部件。
• height, width: 设置未指定大小的小部件的尺寸。
• frame: 查看不同设备场景下的小部件（如安卓手机或苹果手表），支持超过 20 种型号，还可自定义。 （此功能得益于由 Aloïs Deniel 开发的出色包 device_frame）
• 需要更多功能？我们正在计划未来添加更多选项，如 Locale, Brightness, constraints 等。

此外，你可以为每个预览设置更新模式，从热重载到热重启。

PreviewProvider

你可以使用多个扩展了 PreviewProvider 的类，并且它们将在不同的标签页中显示。

默认情况下，标签页的名称将是类名，但你可以通过覆盖 title 参数来自定义它。

自定义提供程序

PreviewProvider 允许你在单个文件中分组不同的 Previews。虽然这对大多数情况已经足够，但如果你希望创建自己的预览，可以扩展任何继承自 StatelessWidget 的类，并使其实现 Previewer 混入。

示例代码：

class MyCustomPreview extends StatelessWidget with Previewer {
 [@override](/user/override)
 Widget build(BuildContext context) {
    return Container();
  }
}

重要的是始终在扩展任何类时添加 with Previewer，否则 Flutter Preview 将无法识别它。

内置的一个自定义提供程序是 ResizablePreviewProvider，它为你提供了自由调整小部件大小以查看其在不同场景下的表现。

示例代码：

class Resizable extends ResizablePreviewProvider with Previewer {
  [@override](/user/override)
  Preview get preview {
    return Preview(
      mode: UpdateMode.hotReload,
      child: MusicCard(
        title: 'Blond',
        singer: 'Frank Ocean',
        image: PreviewImage.asset('preview_assets/cover1.jpg'),
        onTap: () => {},
      ),
    );
  }
}

你可以构建其他预览或使用任何包，只要遵守以下两个重要规则：

1. 所有预览提供程序（除了默认的）都需要包含 with Previewer。
2. 它们需要有一个无参数的空构造函数。

让我们来看一个使用 device_preview 包的酷炫示例：

代码	预览
dart class DevicePreviewProvider extends StatelessWidget with Previewer { [@override](/user/override) String get title => 'Device Preview'; [@override](/user/override) Widget build(BuildContext context) { return DevicePreview( builder: (context) => MyApp(), ); } }

如果某些功能无法正常工作？

请创建一个新的问题并提交至 GitHub Issues，我会尽快解决。

示例代码

以下是完整的示例代码：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:preview/preview.dart';
import 'package:random_color/random_color.dart';
import 'package:preview_example/widgets/chip.dart' as c;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(title: 'Flutter Demo Home Page 5'),
      builder: previewAppBuilder,
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  List<Color> colors = List.generate(40,
      (index) => RandomColor().randomMaterialColor(colorHue: ColorHue.blue));

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Preview ${Frame().runtimeType}'),
      ),
      body: Center(
        child: Scrollbar(
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.all(20),
                  child: Wrap(
                      crossAxisAlignment: WrapCrossAlignment.center,
                      runAlignment: WrapAlignment.spaceBetween,
                      alignment: WrapAlignment.spaceBetween,
                      spacing: 10,
                      runSpacing: 10,
                      children: colors
                          .asMap()
                          .entries
                          .map((e) =>
                              c.Chip(title: 'Tag ${e.key}', color: e.value))
                          .toList()),
                ),
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.headline4,
                ),
              ],
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'aIncrement',
        child: Icon(Icons.add),
      ),
    );
  }
}

class IPhoneX extends PreviewProvider {
  [@override](/user/override)
  String get title => 'iPhone X';
  [@override](/user/override)
  List<Preview> get previews => [
        Preview(
          key: Key('preview'),
          frame: Frames.iphoneX,
          child: MyApp(),
        ),
      ];
}

class IPad extends PreviewProvider {
  [@override](/user/override)
  String get title => 'iPad Pro';
  [@override](/user/override)
  List<Preview> get previews => [
        Preview(
          frame: Frames.ipadPro12,
          child: MyApp(),
        ),
      ];
}

class AllPreview extends PreviewProvider {
  [@override](/user/override)
  String get title => 'All';

  [@override](/user/override)
  List<Preview> get previews => Frames.values
      .map(
        (e) => Preview(
          key: Key('preview'),
          frame: e,
          child: MyApp(),
        ),
      )
      .toList();
}