Flutter自定义原子设计系统插件custom_atomic_design_co的使用

CUSTOM_ATOMIC_DESIGN_CO

此包代表在原子设计系统下创建的Sign_in页面。

概述

CUSTOM_ATOMIC_DESIGN_CO 是一个用于实现基于原子设计原则的Flutter设计系统的包。该包允许开发者在其Flutter应用中创建并维护一致的设计系统。此外，该包还包括一个展示示例，以演示每个组件的功能。

目录

• 概述
• 开始使用
  • 安装
  • 使用
• 示例
• 组件
  • 原子
  • 分子
  • 有机体
  • 模板
  • 页面
• 贡献
• 许可证

开始使用

安装

要安装该包，请将其添加到您的pubspec.yaml文件中：

dependencies:
  custom_atomic_design_co:
    git:
      url: https://github.com/tiancris01/CUSTOM_ATOMIC_DESIGN_CO.git
      ref: main

然后运行以下命令以获取依赖项：

flutter pub get

使用

要在Dart文件中导入该包并使用其中的组件，请执行以下操作：

import 'package:custom_atomic_design_co/custom_atomic_design_co.dart';

现在您可以将这些组件集成到您的Flutter应用程序中。

示例

一个完整的示例应用程序包含在example目录中。要运行该示例，请按照以下步骤操作：

1. 克隆存储库。
2. 转到example目录。
3. 运行flutter pub get以获取依赖项。
4. 运行flutter run以启动应用程序。

该示例展示了所有组件的实际效果，并演示了如何在自己的项目中使用它们。

组件

原子

原子是设计的最小构建块。例如按钮、文本字段和标签。

示例

class ButtonAtom extends StatelessWidget {
  const ButtonAtom({
    super.key,
    required Widget child,
    required VoidCallback onPressed,
  })  : _child = child,
        _hasBorder = false,
        _onPressed = onPressed;

  const ButtonAtom.border({
    super.key,
    required Widget child,
    required String label,
    required VoidCallback onPressed,
  })  : _child = child,
        _hasBorder = true,
        _onPressed = onPressed;

  final Widget _child;
  final bool _hasBorder;
  final VoidCallback _onPressed;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        backgroundColor: _hasBorder
            ? ColorFoundation.background.bgWhite
            : ColorFoundation.background.bgPrimary,
        foregroundColor: _hasBorder
            ? ColorFoundation.background.bgPrimary
            : ColorFoundation.background.bgWhite,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(SizeFoundations.radius.r_8),
          side: BorderSide(
            color: _hasBorder
                ? ColorFoundation.border.borderDark
                : Colors.transparent,
            width: _hasBorder ? 1 : 0,
          ),
        ),
      ),
      onPressed: _onPressed,
      child: _child,
    );
  }
}

分子

分子是由原子组合而成的相对简单的UI组件。例如，带输入字段的表单标签或一组按钮。

示例

class SignInInputMolecule extends StatelessWidget {
  final String emailText;
  final String passwordText;

  final String emailTextFieldHint;
  final String passwordTextFieldHint;

  const SignInInputMolecule({
    super.key,
    required this.emailText,
    required this.passwordText,
    required this.emailTextFieldHint,
    required this.passwordTextFieldHint,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(height: SizeFoundations.size.w_16),
        Align(
          alignment: Alignment.centerLeft,
          child: Text(emailText),
        ),
        SizedBox(height: SizeFoundations.size.w_12),
        TextFieldAtom(
          hintText: emailTextFieldHint,
          keyboardType: TextInputType.emailAddress,
        ),
        SizedBox(height: SizeFoundations.size.w_16),
        Align(
          alignment: Alignment.centerLeft,
          child: Text(passwordText),
        ),
        SizedBox(height: SizeFoundations.size.w_12),
        TextFieldAtom.password(
          hintText: passwordTextFieldHint,
          keyboardType: TextInputType.number,
        ),
      ],
    );
  }
}

有机体

有机体是相对复杂的UI组件，构成界面的不同部分。例如标题、页脚或带有筛选器的搜索栏。

示例

class SignInCardOrganism extends StatelessWidget {
  final SignInCardInputParams signInCardInputParams;
  final SignInCardButtonParams signInCardButtonParams;

  const SignInCardOrganism({
    super.key,
    required this.signInCardInputParams,
    required this.signInCardButtonParams,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: EdgeInsets.all(SizeFoundations.radius.r_16),
        child: Column(
          children: [
            SignInInputMolecule(
              emailText: signInCardInputParams.emailText,
              emailTextFieldHint: signInCardInputParams.emailTextFieldHint,
              passwordText: signInCardInputParams.passwordText,
              passwordTextFieldHint:
                  signInCardInputParams.passwordTextFieldHint,
            ),
            Align(
              alignment: Alignment.centerRight,
              child: TextButton(
                onPressed: signInCardButtonParams.onForgotPasswordTap,
                child: Text(signInCardButtonParams.forgotPasswordText),
              ),
            ),
            Row(
              children: [
                Expanded(
                  child: SizedBox(
                    height: SizeFoundations.size.w_48,
                    child: ButtonAtom(
                      onPressed: signInCardButtonParams.onButtonTap,
                      child: Text(signInCardButtonParams.buttonText),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

模板

模板是页面级别的对象，将组件放置在布局中，并表达设计的基础内容结构。

示例

class SignInTemplate extends StatelessWidget {
  final String title;

  final SignInCardInputParams signInCardInputParams;
  final SignInCardButtonParams signInCardButtonParams;

  const SignInTemplate({
    super.key,
    required this.title,
    required this.signInCardInputParams,
    required this.signInCardButtonParams,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBarAtom(title: title),
      body: SafeArea(
        child: Padding(
          padding: EdgeInsets.all(SizeFoundations.size.w_16),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SizedBox(height: SizeFoundations.size.w_16),
              SignInCardOrganism(
                signInCardInputParams: signInCardInputParams,
                signInCardButtonParams: signInCardButtonParams,
              ),
              SizedBox(height: SizeFoundations.size.w_16),
            ],
          ),
        ),
      ),
    );
  }
}

贡献

如果您希望为该包做出贡献，请按照以下步骤操作：

1. Fork 仓库。
2. 创建新分支（git checkout -b feature-branch）。
3. 提交更改（git commit -am 'Add new feature'）。
4. 推送到分支（git push origin feature-branch）。
5. 创建一个新的Pull Request。

许可证

该项目受MIT许可证保护 - 请参阅LICENSE文件了解详细信息。

Feel free to modify the examples and descriptions to better match your package's actual implementation.