Flutter设计系统插件den_design_system的使用

Flutter设计系统插件den_design_system的使用

Den Design System

介绍：

DDS Flutter 是一个多功能库，旨在增强 Flutter 应用开发。它提供了一组丰富的预构建可定制的UI组件，从而减少开发复杂性并实现更快的项目交付。

为什么选择DDS Flutter？

DDS Flutter 通过提供现成的UI元素来简化应用创建过程，减少了所需的代码行数并缩短了开发时间。凭借其专注于性能的设计，它确保了各种规模的应用程序的顺畅功能和可扩展性。

使用DDS Flutter的好处：

1. 效率：通过预先构建的优化组件加速开发。
2. 代码减少：为开发者减少了重复编码任务。
3. 可定制化：灵活的配置适应独特的应用程序需求。
4. 可扩展性：支持从小型项目到企业级解决方案的应用程序。
5. 发挥DDS Flutter的潜力，快速构建，编写更少的代码，并毫不费力地提供出色的移动体验。

现在就开始吧！

开始使用

1. 添加依赖

在pubspec.yaml文件中添加包：

dependencies:
  den_design_system: ^<最新版本>

或者

运行以下命令：

flutter pub add den_design_system

2. 设置主题

3. 导入并开始使用DDS组件

在你的Dart代码中导入：

import 'package:den_design_system/widgets/component/component.dart';

示例代码

import 'package:den_design_system/utils/button/button.utils.dart';
import 'package:den_design_system/utils/checkbox/checkbox.utils.dart';
import 'package:den_design_system/utils/textfield/textField.utils.dart';
import 'package:den_design_system/widgets/avatar/avatar.dart';
import 'package:den_design_system/widgets/badges/badges.dart';
import 'package:den_design_system/widgets/button/button.dart';
import 'package:den_design_system/widgets/card/card.dart';
import 'package:den_design_system/widgets/checkbox/checkbox.dart';
import 'package:den_design_system/widgets/divider/divider.dart';
import 'package:den_design_system/widgets/loader/loader.dart';
import 'package:den_design_system/widgets/modalDialogue/modal_dialogue.dart';
import 'package:den_design_system/widgets/progressIndicators/progress.dart';
import 'package:den_design_system/widgets/sliders/sliders.dart';
import 'package:den_design_system/widgets/textField/textField.dart';
import 'package:flutter/material.dart';

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

class MyExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'DDS Component Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('DDS Component Example'),
        ),
        body: SafeArea(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // 文本输入框
                Padding(padding: const EdgeInsets.only(left: 40.0)),
                Container(
                  width: 150,
                  child: DDSTextField(
                    label: "Enter Name",  // 标签
                    shape: TextFieldShape.roundedRectangle,  // 形状
                    countryCodes: const [],  // 国家代码
                    placeholder: "name",  // 占位符
                    style: TextStyle(height: 1),  // 文本样式
                  ),
                ),
                const SizedBox(width: 10),  // 空白区域
                // 头像
                DDSAvatar(
                  size: AvatarSize.small,  // 小尺寸
                  state: AvatarState.active,  // 激活状态
                  type: AvatarType.initial,  // 初始类型
                  initials: 'JD',  // 首字母
                ),
                const SizedBox(width: 10),
                // 徽章
                DDSBadges(variant: BadgesVariant.icon, child: Icon(Icons.add)),
                const SizedBox(width: 10),
                // 按钮
                DDSButton(
                  label: 'Button',  // 按钮标签
                  onPressed: () => print('Button Pressed'),  // 按钮点击事件
                  size: ButtonSize.small,  // 小尺寸
                  type: ButtonType.primary,  // 主按钮类型
                  shape: ButtonShape.rectangle,  // 矩形形状
                  width: 266.0,  // 宽度
                  height: 32.0,  // 高度
                  minWidth: 266.0,  // 最小宽度
                  borderWidth: 1.0,  // 边框宽度
                ),
                const SizedBox(width: 10),
                // 卡片
                DDSCard(
                  title: 'Card Title',  // 卡片标题
                  content: 'This is card contents'  // 卡片内容
                ),
                const SizedBox(width: 10),
                // 复选框
                DDSCheckbox(
                  variant: CheckboxVariant.defaultVariant,  // 默认变体
                  onChanged: (value) {  // 改变事件
                    print(value);
                  },
                ),
                const SizedBox(width: 10),
                // 加载器
                DDSLoader(loaderType: LoaderType.dotLoader),
                const SizedBox(width: 10),
                // 分割线
                DDSDivider(type: DividerType.horizontal),
                const SizedBox(width: 10),
                // 模态对话框
                DDSModalDialog(
                  totalSteps: 2,  // 总步骤
                  showCurrentStepsDot: true,  // 显示当前步骤点
                  showIcon: true,  // 显示图标
                  stepContents: [  // 步骤内容
                    'Step 1',
                    'Step 2',
                  ],
                  title: Text('Modal Dialog'),  // 对话框标题
                  content: Text('This is modal dialog contents'),  // 对话框内容
                ),
                const SizedBox(width: 10),
                // 进度指示器
                DDSProgressIndicator(variant: ProgressIndicatorVariant.linear),
                const SizedBox(width: 10),
                // 滑块
                DDSSliders(
                  variant: SlidersVariant.basic,  // 基本变体
                  min: 0,  // 最小值
                  max: 10,  // 最大值
                  value: 5,  // 当前值
                ),
                const SizedBox(width: 10),
                // 文本输入框（右侧）
                Padding(padding: const EdgeInsets.only(right: 40.0)),
              ],
            ),
          ),
        ),
      ),
    );
  }
}