Flutter UI构建插件flutter_builder_ui_kit的使用

flutter_builder_ui_kit 是一个灵活且可定制的 Flutter 应用程序 UI 构建包。它是 Flutter Pre-setup 和 Flutter Builder 低代码生成及项目快速搭建应用程序的一部分。

完整的示例和文档可以在 UI kit 网站 上找到。

您也可以加入 Discord Server 获取更多关于 UI Kit 和 Flutter Builder 的信息。

特性

• 使用简便的构建模式创建常见的 UI 组件
• 高度可定制的小部件
• 支持响应式设计
• 支持 Material Design 和 Cupertino 风格组件
• 最小依赖项

安装

在您的项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
    flutter_builder_ui_kit: ^1.0.5

使用

首先，在您的 Dart 文件中导入 flutter_builder_ui_kit 包：

import 'package:flutter_builder_ui_kit/flutter_builder_ui_kit.dart';

按钮示例

BouncingIconButton(
    icon: Icons.favorite, // 设置按钮图标
    onPressed: () {}, // 设置点击事件
    color: Colors.red, // 设置按钮颜色
    size: 56, // 设置按钮大小
),

输入框示例

PinInput(
    length: 4, // 设置输入框长度
    obscureText: true, // 设置是否隐藏输入内容
    onCompleted: (pin) { // 输入完成后触发
    // 处理PIN码完成逻辑
    },
)

卡片示例

StatusCard(
    customColor: Colors.green.shade400, // 设置卡片自定义颜色
    type: StatusType.success, // 设置卡片类型
    title: 'Payment Successful', // 设置卡片标题
    message: 'Your transaction has been completed.', // 设置卡片消息
    onClose: () {}, // 设置关闭事件
),

列表项示例

AnimatedListTile(
    leading: Icons.inbox, // 设置列表项前导图标
    title: 'Inbox', // 设置列表项标题
    subtitle: '3 new messages', // 设置列表项副标题
    onTap: () {}, // 设置点击事件
),

覆盖层示例

ElevatedButton(
    child: const Text('Show Form Sheet'), // 设置按钮文本
    onPressed: () {
    final formKey = GlobalKey<FormState>(); // 创建表单键
    final addressController = TextEditingController(); // 创建地址控制器
    final cityController = TextEditingController(); // 创建城市控制器
    final zipController = TextEditingController(); // 创建邮政编码控制器

    StyledBottomSheet.show(
        context: context,
        title: 'Delivery Address', // 设置弹出框标题
        content: Form(
        key: formKey,
        child: Column(
            children: [
            TextFormField(
                controller: addressController,
                decoration: const InputDecoration(
                labelText: 'Street Address', // 设置输入框标签
                prefixIcon: Icon(FontAwesomeIcons.locationDot), // 设置输入框前缀图标
                ),
                validator: (value) => value?.isEmpty ?? true ? 'Required' : null, // 设置验证器
            ),
            const SizedBox(height: 16),
            Row(
                children: [
                Expanded(
                    flex: 2,
                    child: TextFormField(
                    controller: cityController,
                    decoration: const InputDecoration(
                        labelText: 'City', // 设置输入框标签
                        prefixIcon: Icon(FontAwesomeIcons.city), // 设置输入框前缀图标
                    ),
                    validator: (value) => value?.isEmpty ?? true ? 'Required' : null, // 设置验证器
                    ),
                ),
                const SizedBox(width: 16),
                Expanded(
                    child: TextFormField(
                    controller: zipController,
                    decoration: const InputDecoration(
                        labelText: 'ZIP', // 设置输入框标签
                        prefixIcon: Icon(FontAwesomeIcons.envelopeCircleCheck), // 设置输入框前缀图标
                    ),
                    keyboardType: TextInputType.number, // 设置键盘类型
                    validator: (value) => value?.isEmpty ?? true ? 'Required' : null, // 设置验证器
                    ),
                ),
                ],
            ),
            ],
        ),
        ),
        actions: [
        SizedBox(
            width: double.infinity,
            child: FilledButton(
            onPressed: () {
                if (formKey.currentState?.validate() ?? false) { // 验证表单
                Navigator.pop(context); // 关闭弹出框
                // 处理地址提交逻辑
                }
            },
            child: const Text('Save Address'), // 设置按钮文本
            ),
        ),
        ],
    );
    },
),

底部栏示例

FloatingBottomBar(
    currentIndex: 0, // 设置当前选中索引
    onTap: (_) {}, // 设置点击事件
    leftItems: const [
    NavItemData(
        icon: FontAwesomeIcons.house, // 设置左侧图标
        label: 'Home', // 设置左侧标签
    ),
    NavItemData(
        icon: FontAwesomeIcons.trophy, // 设置左侧图标
        label: 'Rewards', // 设置左侧标签
    ),
    ],
    rightItems: const [
    NavItemData(
        icon: FontAwesomeIcons.compass, // 设置右侧图标
        label: 'Explore', // 设置右侧标签
    ),
    NavItemData(
        icon: FontAwesomeIcons.user, // 设置右侧图标
        label: 'Profile', // 设置右侧标签
    ),
    ],
    floatingAction: FloatingActionData(
    icon: FontAwesomeIcons.plus, // 设置浮动操作图标
    ),
),