Flutter未知功能插件look的使用

概述

Look 是一个用于Flutter Widget预览的插件。它允许开发者在不启动整个应用的情况下，单独运行和预览某个特定的Widget。

目的

假设你在开发一个复杂的Flutter应用，该应用包含多个页面、许多Widgets和其他功能如认证、状态管理、路由、API等。如果你想单独编辑和调试某个深层页面，通常需要启动整个应用，可能还需要生成一些数据或连接到API或服务器。然而，你真正需要的是只关注那个特定的Widget。这时，Look 插件就派上用场了。

开始使用

首先，在你的项目中添加 look、look_generator 和 build_runner 依赖：

flutter pub add look
flutter pub add --dev look_generator build_runner

预览一个Widget

只需在你想要预览的Widget类上添加 @look 注解即可：

// my_widget.dart

import 'package:look/look.dart';

@look
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text('Hello, Look!'),
      ),
    );
  }
}

然后，使用 build_runner 生成代码：

flutter pub run build_runner build --delete-conflicting-outputs

一个新的文件将会生成在原文件旁边，以 *.look.dart 结尾。运行这个文件，你就可以单独预览你的Widget了。

传递参数

你可以通过builder方法来传递参数给你的Widget：

@Look(
    builder: myBuilderMethod,
    theme: myThemeBuilderMethod, // optional
)
class MyWidget extends StatelessWidget {
  final String text;
  final MyData data;
  final MyController controller;
  final AnyOtherWidget child;

  MyWidget({
    required this.text,
    required this.data,
    required this.controller,
    required this.child,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Text(text),
          data.widget,
          controller.widget,
          child,
        ],
      ),
    );
  }
}

MyWidget myBuilderMethod() => MyWidget(
  text: 'Hello World',
  data: MyData(),
  controller: MyController(),
  child: AnyOtherWidget(),
);

Golden测试

Look 还可以用于Golden测试。首先，在 test 文件夹下创建一个新的Dart文件：

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:example/pages/home.dart';
import 'package:look/look.dart';

part 'home_page_test.lookgolden.dart';

@LookGolden(type: MyHomePage)
main() => lookGoldens();

然后，再次使用 build_runner 生成测试代码：

flutter pub run build_runner build --delete-conflicting-outputs

Look 将为你生成Golden测试代码：

// home_page_test.lookgolden.dart
// GENERATED CODE - DO NOT MODIFY BY HAND

// **************************************************************************
// GoldenGenerator
// **************************************************************************

part of 'home_page_test.dart';

lookGoldens() => group('MyHomePage golden tests', () {
      testWidgets('1080x2340 MyHomePage light theme',
          (WidgetTester tester) async {
        tester.binding.window.physicalSizeTestValue =
            const Size(1080.0, 2340.0);
        await tester.pumpWidget(
            MaterialApp(theme: ThemeData(), home: const MyHomePage()));
        await expectLater(find.byType(MyHomePage),
            matchesGoldenFile('goldens/MyHomePage_golden_1080x2340_.png'));
      });
    });

复杂示例结果

以下是一个更复杂的示例，包括多种尺寸和主题：

// golden_shape_test.dart
import 'package:example/pages/widgets/shape.dart';
import 'package:example/theme.dart';
import 'package:look/look.dart';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

part 'golden_shape_test.lookgolden.dart';

@LookGolden(
  type: DynamicShape,
  builder: dynamicShapeBuilder,
  lightTheme: lightTheme,
  darkTheme: darkTheme,
  name: 'goldens/DynamicShape_golden.png',
  dimensions: ['400x600', '800x600', '800x1200', '1600x1200'],
)
main() => lookGoldens();

生成的Golden测试代码将自动为每个指定的尺寸和主题生成测试用例。

示例Demo

以下是一个完整的示例Demo，展示如何使用 Look 插件来预览和测试一个简单的Widget：

// main.dart
import 'package:flutter/material.dart';
import 'my_widget.dart'; // 假设这是上面定义的MyWidget文件

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Look Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyWidget(),
    );
  }
}

通过以上步骤，你可以轻松地使用 Look 插件来提高开发效率，专注于特定的Widget而不必启动整个应用。