Flutter UI设计辅助插件wildness_ui_golden_toolkit的使用

发布于 1周前 作者 nodeper 来自 Flutter

Flutter UI设计辅助插件wildness_ui_golden_toolkit的使用

wildness_ui_golden_toolkit 是一组用于测试 Wildness_ui 组件的工具。通过这些工具,你可以更方便地进行UI测试,并确保你的组件在不同设备和屏幕尺寸上都能正确显示。

安装

首先,在你的 pubspec.yaml 文件中添加依赖:

dependencies:
  wildness_ui_golden_toolkit: ^1.0.0

然后运行 flutter pub get 来安装该包。

基本用法

下面是一个简单的示例,展示如何使用 wildness_ui_golden_toolkit 进行UI测试。

示例代码
import 'package:flutter/material.dart';
import 'package:wildness_ui_golden_toolkit/wildness_ui_golden_toolkit.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Wildness UI Golden Toolkit 示例'),
        ),
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    );
  }
}
测试代码

为了测试 MyWidget 组件,我们需要编写一个测试文件。创建一个名为 my_widget_test.dart 的文件,并添加以下内容:

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:wildness_ui_golden_toolkit/wildness_ui_golden_toolkit.dart';
import 'my_widget.dart'; // 引入你的组件

void main() {
  testWidgets('MyWidget matches the golden image', (WidgetTester tester) async {
    await tester.pumpWidgetBuilder(
      MyWidget(),
      surfaceSize: Size(200, 200), // 设置测试界面的大小
    );

    // 验证当前渲染结果与黄金文件是否匹配
    await expectLater(
      find.byType(Container),
      matchesGoldenFile('goldens/my_widget.png'), // 指定黄金文件路径
    );
  });
}

在这个测试中,我们使用了 expectLater 方法来验证当前渲染结果是否与指定的黄金文件相匹配。如果文件不存在或不匹配,则测试将失败。

运行测试

要运行测试,打开终端并执行以下命令:

flutter test

更多关于Flutter UI设计辅助插件wildness_ui_golden_toolkit的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter UI设计辅助插件wildness_ui_golden_toolkit的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter项目中使用wildness_ui_golden_toolkit插件进行UI设计辅助的示例代码。这个插件通常用于创建和管理Golden Tests,以验证UI在不同条件下的稳定性和一致性。

首先,确保你已经在pubspec.yaml文件中添加了wildness_ui_golden_toolkit依赖:

dependencies:
  flutter:
    sdk: flutter
  wildness_ui_golden_toolkit: ^最新版本号  # 请替换为实际的最新版本号

然后,运行flutter pub get来安装依赖。

接下来,我们创建一个Golden Test。在这个示例中,我们将创建一个简单的Widget,并使用wildness_ui_golden_toolkit来生成和验证其Golden图片。

1. 创建Widget

创建一个简单的Widget,例如my_widget.dart

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Hello, Wildness UI Golden Toolkit!',
        style: TextStyle(fontSize: 24, color: Colors.blue),
      ),
    );
  }
}

2. 创建Golden Test

test目录下创建一个新的测试文件,例如my_widget_test.dart

import 'package:flutter_test/flutter_test.dart';
import 'package:wildness_ui_golden_toolkit/wildness_ui_golden_toolkit.dart';
import 'my_widget.dart';

void main() {
  testWidgets('MyWidget matches golden', (WidgetTester tester) async {
    // 创建一个MaterialApp上下文
    await tester.pumpWidget(MaterialApp(
      home: Scaffold(
        body: MyWidget(),
      ),
    ));

    // 使用Golden Toolkit的captureGolden函数捕获UI并生成Golden图片
    await captureGolden(
      tester,
      'my_widget_golden',  // Golden文件的名称
      targetFinder: find.byType(Center),  // 指定要捕获的Widget类型
    );
  });
}

3. 运行Golden Test

运行测试时,Golden Toolkit会生成一个新的Golden图片文件,并将其存储在test_driver/goldens/目录下(默认路径,可以根据配置更改)。

使用以下命令运行测试:

flutter test --update-goldens

这将运行所有Golden Tests并更新Golden图片。

4. 验证Golden Test

当你修改了Widget并希望验证UI是否仍然匹配Golden图片时,只需运行普通的测试命令:

flutter test

如果UI已经改变,测试将失败,并提示Golden图片不匹配。你可以使用--update-goldens选项再次更新Golden图片,或者手动调整Widget以确保其与Golden图片一致。

注意事项

  • 确保在每次UI更改后重新生成和验证Golden图片,以保持UI的一致性。
  • 你可以根据需要配置Golden Toolkit的路径和命名约定。

通过以上步骤,你可以利用wildness_ui_golden_toolkit插件来辅助Flutter UI设计,确保UI在不同条件下的稳定性和一致性。

回到顶部