AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Flutter 中使用 Widgetbook 管理你的组件 | 猫哥

2023-07-04 4260
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Flutter 界面开发中我们有几个痛点 ：- 与设计师协作复用一套设计规范（figma）- 可视化的管理你的组件代码（基础组件、业务组件）- 不同设备尺寸测试你的组件- 实时修改你的测试组件参数

Flutter 中使用 Widgetbook 管理你的组件

前言

Flutter 界面开发中我们有几个痛点 ：

  • 与设计师协作复用一套设计规范（figma）
  • 可视化的管理你的组件代码（基础组件、业务组件）
  • 不同设备尺寸测试你的组件
  • 实时修改你的测试组件参数

原文 https://ducafecat.com/blog/flutter-uses-a-widgetbook-to-manage-your-components

视频

https://www.bilibili.com/video/BV1qM4y1b7WL/

参考

Widgetbook

https://www.widgetbook.io/

Flutter Widgetbook 是一个用于构建和交互 Flutter 组件库的工具。它允许您在单独的应用程序中构建和演示您的 Flutter 组件，以便您可以在不运行完整应用程序的情况下进行快速迭代和测试。

使用 Flutter Widgetbook，您可以：

  • 构建和演示单个组件，而无需在完整应用程序中运行它们。
  • 以交互方式测试组件的不同状态和属性，以及不同平台和设备的外观和行为。
  • 共享您的组件库，并让其他人轻松地查看和测试您的组件。

您可以在 Flutter 应用程序中使用 Widgetbook，也可以将其作为独立应用程序使用。在 Widgetbook 中，您可以编写 Dart 代码来定义组件和演示它们的用法。您可以使用 Flutter 提供的任何组件和库，并使用 Widgetbook 提供的一些工具来组织和显示您的组件。

设计规范

前端设计规范是一组定义前端设计和开发过程中所需遵守的准则和规则的规范。它们旨在确保前端代码的一致性、可维护性、可扩展性和可重用性，并促进团队间的协作。

前端设计规范主要包括以下内容：

  1. 布局规范：定义页面布局和排版的规则，包括网格系统、排版间距、基准线等。
  2. 样式规范：定义颜色、字体、图标、按钮等基本样式的使用和规范，包括设计风格、调色板、字体类型、字号、行高等。
  3. 组件规范：定义前端组件的设计和开发规则，包括组件的命名、结构、样式、交互、状态管理等。
  4. 图片和媒体规范：定义图片和媒体资源的格式、尺寸、优化和加载等规则，以提高页面性能和用户体验。
  5. 响应式设计规范：定义响应式设计的原则和规则，包括页面布局、元素大小和位置、字体大小、图片和媒体资源的显示等。
  6. 可访问性规范：定义网站或应用程序的可访问性规则，包括键盘导航、语义标记、焦点指示、颜色对比度等。
  7. 性能规范：定义优化前端性能的规则，包括代码压缩、缓存控制、资源加载、代码分割等。

前端设计规范可以通过文档、工具、模板和代码库等方式来实现和维护。它们可以帮助团队提高开发效率、降低维护成本、保持代码质量和可维护性，并促进设计和开发间的协作。

Ant Design 设计规范参考

https://ant.design/docs/spec/introduce-cn

代码

https://github.com/ducafecat/flutter_develop_tips/tree/main/flutter-widgetbook

步骤

安装 widgetbook 组件

pubspec.yaml

dev_dependencies:
  flutter_test:
    sdk: flutter

  ...

  widgetbook: ^3.0.0-beta.14

注意是放在 dev_dependencies 节点下面

编写调试界面

lib/app.widgetbook.dart

// ignore_for_file: depend_on_referenced_packages

import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:widgetbook_in_flutter_course/widgets/button.dart';

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

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

  @override
  Widget build(BuildContext context) {
   
   
    return Widgetbook.material(
      addons: [
      ],
      directories: [
      ],
    );
  }
}

运行

加入组件

准备两个组件代码

lib/widgets/button.dart

import 'package:flutter/material.dart';

class MyElevatedButton extends StatelessWidget {
   
   
  final VoidCallback? onPressed;
  final String? text;
  final IconData? icon;
  final Color? textColor;
  final Color? buttonColor;
  final double? borderRadius;
  final double? height;
  final double? width;

  const MyElevatedButton({
   
   
    Key? key,
    this.onPressed,
    this.text,
    this.icon,
    this.textColor,
    this.buttonColor,
    this.borderRadius,
    this.height,
    this.width,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
   
   
    return SizedBox(
      height: height ?? 48.0,
      width: width,
      child: ElevatedButton(
        onPressed: onPressed,
        style: ElevatedButton.styleFrom(
          primary: buttonColor ?? Theme.of(context).primaryColor,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(borderRadius ?? 8.0),
          ),
        ),
        child: icon == null
            ? Text(
                text!,
                style: TextStyle(color: textColor ?? Colors.white),
              )
            : Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(icon, color: textColor ?? Colors.white),
                  SizedBox(width: 8.0),
                  Text(
                    text!,
                    style: TextStyle(color: textColor ?? Colors.white),
                  ),
                ],
              ),
      ),
    );
  }
}

lib/components/login.dart

import 'package:flutter/material.dart';

class LoginForm extends StatefulWidget {
   
   
  const LoginForm({
   
   Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<LoginForm> createState() => _LoginFormState();
}

class _LoginFormState extends State<LoginForm> {
   
   
  final _formKey = GlobalKey<FormState>();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  bool _isObscured = true;
  bool _isLoading = false;

  void _toggleObscure() {
   
   
    setState(() {
   
   
      _isObscured = !_isObscured;
    });
  }

  void _submit() async {
   
   
    if (_formKey.currentState!.validate()) {
   
   
      setState(() {
   
   
        _isLoading = true;
      });

      // Simulate a login request
      await Future.delayed(const Duration(seconds: 2));

      setState(() {
   
   
        _isLoading = false;
      });

      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('Logged in successfully!'),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
   
   
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Form(
        key: _formKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextFormField(
              controller: _emailController,
              keyboardType: TextInputType.emailAddress,
              decoration: const InputDecoration(
                labelText: 'Email',
              ),
              validator: (value) {
   
   
                if (value == null || value.isEmpty) {
   
   
                  return 'Please enter your email';
                }
                if (!value.contains('@')) {
   
   
                  return 'Please enter a valid email address';
                }
                return null;
              },
            ),
            const SizedBox(height: 16),
            TextFormField(
              controller: _passwordController,
              obscureText: _isObscured,
              decoration: InputDecoration(
                labelText: 'Password',
                suffixIcon: IconButton(
                  icon: Icon(
                    _isObscured ? Icons.visibility : Icons.visibility_off,
                  ),
                  onPressed: _toggleObscure,
                ),
              ),
              validator: (value) {
   
   
                if (value == null || value.isEmpty) {
   
   
                  return 'Please enter your password';
                }
                if (value.length < 6) {
   
   
                  return 'Password must be at least 6 characters long';
                }
                return null;
              },
            ),
            const SizedBox(height: 32),
            SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: _isLoading ? null : _submit,
                child: _isLoading
                    ? const CircularProgressIndicator()
                    : const Text('Log in'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

分类1 - 公共组件

  WidgetbookCategory buildWidgetbookCategory() {
   
   
    return WidgetbookCategory(
      name: '公共组件',
      children: [
        WidgetbookComponent(
          name: '按钮',
          useCases: [
            WidgetbookUseCase.center(
              name: "红色背景",
              child: MyElevatedButton(
                onPressed: () => print("Button pressed"),
                text: "Click me",
                icon: Icons.arrow_forward,
                buttonColor: Colors.red,
                borderRadius: 16.0,
                height: 60.0,
                width: double.infinity,
              ),
            ),
            WidgetbookUseCase.center(
              name: "蓝色色背景",
              child: MyElevatedButton(
                onPressed: () => print("Button pressed"),
                text: "Click me",
                icon: Icons.arrow_forward,
                buttonColor: Colors.blue,
                borderRadius: 16.0,
                height: 60.0,
                width: double.infinity,
              ),
            )
          ],
        ),
      ],
    );
  }

分类2 - 业务组件

  WidgetbookCategory buildWidgetbookCategory2() {
   
   
    return WidgetbookCategory(
      name: '业务组件',
      children: [
        WidgetbookComponent(
          name: '系统常用',
          useCases: [
            WidgetbookUseCase(
              name: "登录界面",
              builder: (BuildContext context) {
   
   
                return LoginForm(
                  title: context.knobs.text(
                    label: '标题 [title]',
                    initialValue: '用户登录',
                  ),
                );
              },
            ),
            WidgetbookUseCase(
              name: "注册界面",
              builder: (BuildContext context) {
   
   
                return LoginForm(
                  title: context.knobs.text(
                    label: '标题 [title]',
                    initialValue: '用户注册',
                  ),
                );
              },
            ),
          ],
        ),
      ],
    );
  }

通过 knobs 的方式设置调试参数

其它参数类型

build 函数

  @override
  Widget build(BuildContext context) {
   
   
    return Widgetbook.material(
      addons: [
      ],
      directories: [
        // 基础组件
        buildWidgetbookCategory(),

        // 业务组件
        buildWidgetbookCategory2(),
      ],
    );
  }

输出

设置选项

主题

  MaterialThemeAddon buildMaterialThemeAddon() {
   
   
    return MaterialThemeAddon(
        setting: MaterialThemeSetting.firstAsSelected(themes: [
      WidgetbookTheme(name: "dark", data: ThemeData.dark()),
      WidgetbookTheme(name: "light", data: ThemeData.light()),
    ]));
  }

字体尺寸

  TextScaleAddon buildTextScaleAddon() {
   
   
    return TextScaleAddon(
        setting: TextScaleSetting.firstAsSelected(
            textScales: [1.0, 1.25, 1.5, 1.75, 2]));
  }

build 函数

  @override
  Widget build(BuildContext context) {
   
   
    return Widgetbook.material(
      addons: [
        // 主题
        buildMaterialThemeAddon(),

        // 字体大小
        buildTextScaleAddon(),
      ],
      directories: [
        // 基础组件
        buildWidgetbookCategory(),

        // 业务组件
        buildWidgetbookCategory2(),
      ],
    );
  }

输出

其它 addon

小结

Flutter Widgetbook 对前端开发工作有以下好处：

  1. 提高开发效率：Flutter Widgetbook 可以让前端开发人员在不需要启动完整应用程序的情况下构建和演示 Flutter 组件，快速迭代和测试组件的不同状态和属性，从而提高开发效率。
  2. 促进组件复用：Flutter Widgetbook 可以让前端开发人员在单独的应用程序中构建和演示组件，从而促进组件的复用和共享，减少代码重复和维护成本。
  3. 保持代码一致性：Flutter Widgetbook 可以作为一个组件库来使用，定义前端组件的设计和开发规则，从而保持代码的一致性、可维护性、可扩展性和可重用性。
  4. 提高跨团队协作：Flutter Widgetbook 可以让前端开发人员共享他们的组件库，并让其他人轻松地查看和测试他们的组件，从而促进跨团队协作和知识共享。
  5. 提高用户体验：Flutter Widgetbook 可以让前端开发人员在不同平台和设备上测试组件的外观和行为，以确保它们能够提供一致的用户体验，从而提高用户体验和用户满意度。

总之，Flutter Widgetbook 是一个有用的工具，可以帮助前端开发人员更轻松地构建和测试 Flutter 组件，从而提高开发效率、保持代码质量和可维护性，并促进跨团队协作和知识共享，最终提高用户体验和用户满意度。

© 猫哥

ducafecat.com

end

文章标签：
前端开发
UED
数据可视化
缓存
Dart
关键词：
Flutter组件
Flutter管理
猫哥ducafecat
目录
相关文章
光明顶阳顶天
|
3月前
|
传感器 缓存 监控
Stream 组件在 Flutter 中的应用场景有哪些？
Stream 组件在 Flutter 中的应用场景有哪些？
光明顶阳顶天
182 58
那年春天
|
3月前
|
UED 开发者
Flutter|常用数据通信组件
Flutter|常用数据通信组件
那年春天
104 49
lqj_本人
|
29天前
Flutter 自定义组件继承与调用的高级使用方式
本文深入探讨了 Flutter 中自定义组件的高级使用方式，包括创建基本自定义组件、继承现有组件、使用 Mixins 和组合模式等。通过这些方法，您可以构建灵活、可重用且易于维护的 UI 组件，从而提升开发效率和代码质量。
lqj_本人
124 1
lqj_本人
|
29天前
|
开发工具 UED
Flutter&鸿蒙next中封装一个输入框组件
本文介绍了如何创建一个简单的Flutter播客应用。首先，通过`flutter create`命令创建项目；接着，在`lib`目录下封装一个自定义输入框组件`CustomInput`；然后，在主应用文件`main.dart`中使用该输入框组件，实现简单的UI布局和功能；最后，通过`flutter run`启动应用。本文还提供了后续扩展建议，如状态管理、网络请求和UI优化。
lqj_本人
100 1
dufadayang
|
3月前
|
开发工具
Flutter-AnimatedWidget组件源码解析
Flutter-AnimatedWidget组件源码解析
dufadayang
179 60
你都不懂
|
1月前
|
Dart UED
Flutter用户交互组件
Flutter用户交互组件
你都不懂
24 2
明弟有理想
|
2月前
|
存储 开发框架 开发者
flutter:代码存储&基本组件 (五)
本文档介绍了Flutter中的一些基本组件和代码示例，包括代码存储、基本组件如AppBar的简单使用、可滑动切换的标签栏、TextField的多种用法（如简单使用、登录页面、文本控制器的监听与使用、修饰等），以及如何实现点击空白区域隐藏键盘等功能。通过这些示例，开发者可以快速掌握在Flutter应用中实现常见UI元素的方法。
明弟有理想
42 2
你都不懂
|
27天前
|
开发工具
Flutter&鸿蒙next中封装一个列表组件
Flutter&鸿蒙next中封装一个列表组件
你都不懂
41 0
天下无敌呀
|
3月前
|
开发者
Flutter|常用数据通信组件
Flutter|常用数据通信组件
天下无敌呀
44 7
光明顶阳顶天
|
3月前
Stream 组件在 Flutter 中的具体使用方法是什么？
Stream 组件在 Flutter 中的具体使用方法是什么？
光明顶阳顶天
39 1

热门文章

最新文章

  • 1
    Flutter 61: 图解基本 Button 按钮小结 (一)
  • 2
    打通前后端逻辑，客户端Flutter代码一天上线
  • 3
    Flutter新锐专家之路：混合开发篇
  • 4
    Flutter笔记： 在Flutter应用中使用SQLite数据库
  • 5
    从零开始，一起学习开发个 Flutter App 吧
  • 6
    Flutter的AnimatedDefaultTextStyle实现文本样式的动画过渡切换效果
  • 7
    如何在 Flutter 中使用 MemoryImage【Flutter 专题 23】
  • 8
    Flutter报错Building with plugins requires symlink support的解决方法
  • 9
    【Flutter】Dart 面向对象 ( get 方法 | set 方法 | 静态方法
  • 10
    《Flutter 动画系列一》25种动画组件超全总结
  • 1
    flutter 引用图片资源遇到的问题
    88
  • 2
    移动应用开发的未来：Flutter与Android的深度融合
    79
  • 3
    Flutter 弃用 WillPopScope 使用 PopScope 替代方法
    282
  • 4
    【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
    82
  • 5
    【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
    280
  • 6
    【Flutter前端技术开发专栏】Flutter中的列表滚动性能优化
    216
  • 7
    【Flutter前端技术开发专栏】Flutter中的图片加载与缓存优化
    624
  • 8
    【Flutter前端技术开发专栏】Flutter中的线程与并发编程实践
    223
  • 9
    【Flutter前端技术开发专栏】Flutter中的性能分析工具Profiler
    341
  • 10
    【Flutter 前端技术开发专栏】Flutter 中的调试技巧与工具使用
    97

    • 相关课程

    更多
  • 开源Android容器化框架Atlas开发者指南
  • React 入门教程开发文档

    • 相关电子书

    更多
  • 基于flutter的产品应用实践
  • 《Flutter in action》
  • 闲鱼《Flutter 技术解析与实战》
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月