Flutter 中运用 Widgetbook 办理你的组件

Flutter 中使用 Widgetbook 管理你的组件

前语

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

  • 与规划师协作复用一套规划标准（figma）
  • 可视化的办理你的组件代码（根底组件、事务组件）
  • 不同设备尺度测验你的组件
  • 实时修改你的测验组件参数

原文 ducafecat.com/blog/flutte…

视频

www.bilibili.com/video/BV1qM…

参阅

  • docs.widgetbook.io
  • ant.design/docs/spec/i…

Widgetbook

www.widgetbook.io/

Flutter 中使用 Widgetbook 管理你的组件

Flutter Widgetbook 是一个用于构建和交互 Flutter 组件库的东西。它答应您在单独的应用程序中构建和演示您的 Flutter 组件，以便您能够在不运转完好应用程序的情况下进行快速迭代和测验。

运用 Flutter Widgetbook，您能够：

  • 构建和演示单个组件，而无需在完好应用程序中运转它们。
  • 以交互方法测验组件的不同状况和特点，以及不同渠道和设备的外观和行为。
  • 同享您的组件库，并让其他人轻松地检查和测验您的组件。

您能够在 Flutter 应用程序中运用 Widgetbook，也能够将其作为独立应用程序运用。在 Widgetbook 中，您能够编写 Dart 代码来界说组件和演示它们的用法。您能够运用 Flutter 供给的任何组件和库，并运用 Widgetbook 供给的一些东西来安排和显现您的组件。

规划标准

前端规划标准是一组界说前端规划和开发过程中所需恪守的准则和规矩的标准。它们旨在保证前端代码的共同性、可保护性、可扩展性和可重用性，并促进团队间的协作。

前端规划标准主要包含以下内容：

  1. 布局标准：界说页面布局和排版的规矩，包含网格体系、排版间距、基准线等。
  2. 款式标准：界说色彩、字体、图标、按钮等根本款式的运用和标准，包含规划风格、调色板、字体类型、字号、行高级。
  3. 组件标准：界说前端组件的规划和开发规矩，包含组件的命名、结构、款式、交互、状况办理等。
  4. 图片和媒体标准：界说图片和媒体资源的格局、尺度、优化和加载等规矩，以进步页面功能和用户体会。
  5. 响应式规划标准：界说响应式规划的原则和规矩，包含页面布局、元素巨细和方位、字体巨细、图片和媒体资源的显现等。
  6. 可拜访性标准：界说网站或应用程序的可拜访性规矩，包含键盘导航、语义标记、焦点指示、色彩对比度等。
  7. 功能标准：界说优化前端功能的规矩，包含代码紧缩、缓存操控、资源加载、代码分割等。

前端规划标准能够经过文档、东西、模板和代码库等方法来完成和保护。它们能够帮助团队进步开发功率、降低保护本钱、坚持代码质量和可保护性，并促进规划和开发间的协作。

Ant Design 规划标准参阅

ant.design/docs/spec/i…

Flutter 中使用 Widgetbook 管理你的组件

代码

github.com/ducafecat/f…

过程

安装 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: [
      ],
    );
  }
}

运转

Flutter 中使用 Widgetbook 管理你的组件

参加组件

准备两个组件代码

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 的方法设置调试参数

其它参数类型

Flutter 中使用 Widgetbook 管理你的组件

build 函数

  @override
  Widget build(BuildContext context) {
    return Widgetbook.material(
      addons: [
      ],
      directories: [
        // 根底组件
        buildWidgetbookCategory(),
        // 事务组件
        buildWidgetbookCategory2(),
      ],
    );
  }

输出

Flutter 中使用 Widgetbook 管理你的组件

设置选项

主题

  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(),
      ],
    );
  }

输出

Flutter 中使用 Widgetbook 管理你的组件

其它 addon

Flutter 中使用 Widgetbook 管理你的组件

小结

Flutter Widgetbook 对前端开发作业有以下优点：

  1. 进步开发功率：Flutter Widgetbook 能够让前端开发人员在不需要发动完好应用程序的情况下构建和演示 Flutter 组件，快速迭代和测验组件的不同状况和特点，然后进步开发功率。
  2. 促进组件复用：Flutter Widgetbook 能够让前端开发人员在单独的应用程序中构建和演示组件，然后促进组件的复用和同享，减少代码重复和保护本钱。
  3. 坚持代码共同性：Flutter Widgetbook 能够作为一个组件库来运用，界说前端组件的规划和开发规矩，然后坚持代码的共同性、可保护性、可扩展性和可重用性。
  4. 进步跨团队协作：Flutter Widgetbook 能够让前端开发人员同享他们的组件库，并让其他人轻松地检查和测验他们的组件，然后促进跨团队协作和常识同享。
  5. 进步用户体会：Flutter Widgetbook 能够让前端开发人员在不同渠道和设备上测验组件的外观和行为，以保证它们能够供给共同的用户体会，然后进步用户体会和用户满意度。

总之，Flutter Widgetbook 是一个有用的东西，能够帮助前端开发人员更轻松地构建和测验 Flutter 组件，然后进步开发功率、坚持代码质量和可保护性，并促进跨团队协作和常识同享，最终进步用户体会和用户满意度。

猫哥

ducafecat.com

end

本文由mdnice多渠道发布