Flutter轻量级UI组件插件mini_ui的使用

Mini UI 是一个用于 Flutter 的包。它是一个 Flutter UI 设计系统的示例。

步骤 1:

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  mini_ui: ^1.0.0

步骤 2:

导入 mini_ui 包：

import 'package:mini_ui/mini_ui.dart';

步骤 3:

现在，你可以开始使用 Mini UI 组件了。

按钮 (Buttons)

文本组件 (Text Widgets)

输入字段 (Input Fields)

示例代码

以下是一个完整的示例代码，展示了如何使用 Mini UI 中的各种组件。

import 'package:flutter/material.dart';
import 'package:mini_ui/mini_ui.dart';

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

/// Mini UI的演示和展示。
///
/// 包含各种类型的按钮：
///  * 普通按钮
///  * 加载按钮
///  * 禁用按钮
///  * 轮廓按钮
///  * 加载轮廓按钮
///  * 禁用轮廓按钮
///  * 带有后缀图标的按钮
///  * 带有前缀图标的按钮
///
/// 各种类型的文本组件：
///  * 标题1
///  * 标题2
///  * 小标题
///  * 正文1
///  * 正文2
///  * 标签
///
/// 文本输入框：
///  * 普通示例
///  * 隐藏示例
///
class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);
  
  // 控制密码是否可见
  bool isPasswordVisible = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: ListView(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
          children: [
            // 显示标题
            const MiniText.heading1(
              "Mini UI",
              align: TextAlign.center,
              underline: true,
            ),
            
            // 文本组件列表
            ...textWidgets,
            vlSpaceXL,
            
            // 按钮列表
            ...buttons,
            vlSpaceL,
            
            // 输入字段列表
            ...inputFields,
          ],
        ),
      ),
    );
  }

  /// 获取按钮列表
  List<Widget> get buttons => [
        MiniButton(
          title: "Hello",
          onTap: () {},
        ),
        vlSpaceL,
        MiniButton(
          title: "Loading",
          onTap: () {},
          busy: true,
        ),
        vlSpaceL,
        MiniButton(
          title: "Disabled",
          onTap: () {},
          disabled: true,
        ),
        vlSpaceL,
        MiniButton.outline(
          title: "Outline",
          onTap: () {},
        ),
        vlSpaceL,
        MiniButton.outline(
          title: "Outline",
          busy: true,
          onTap: () {},
        ),
        vlSpaceL,
        MiniButton.outline(
          title: "Disabled",
          disabled: true,
          onTap: () {},
        ),
        vlSpaceL,
        MiniButton(
          title: "Send",
          onTap: () {},
          suffix: const Icon(
            Icons.send,
            color: miniBackgroundColor,
            size: 20,
          ),
        ),
        vlSpaceL,
        MiniButton(
          title: "Download",
          onTap: () {},
          prefix: const Icon(
            Icons.download,
            color: miniBackgroundColor,
            size: 20,
          ),
        ),
        vlSpaceL,
      ];

  /// 获取文本组件列表
  List<Widget> get textWidgets => [
        const MiniText.heading1("Heading 1"),
        vlSpaceXS,
        const MiniText.heading2("Heading 2"),
        vlSpaceXS,
        const MiniText.subHeading("Subheading"),
        vlSpaceXS,
        const MiniText.body1("Body 1"),
        vlSpaceXS,
        const MiniText.body2("Body 2"),
        vlSpaceXS,
        const MiniText.label("Label"),
      ];

  /// 获取输入字段列表
  List<Widget> get inputFields => [
        MiniInputField(
          controller: TextEditingController(),
          placeholder: "Email",
          prefix: const Icon(
            Icons.email,
            color: miniPrimaryDark,
          ),
          suffix: IconButton(
            splashRadius: 18,
            iconSize: 20,
            onPressed: () {},
            icon: const Icon(
              Icons.clear,
              color: miniPrimaryDark,
            ),
          ),
        ),
        vlSpaceS,
        MiniInputField(
          controller: TextEditingController(),
          placeholder: "Password",
          prefix: const Icon(
            Icons.lock,
            color: miniPrimaryDark,
          ),
          suffix: IconButton(
            splashRadius: 18,
            iconSize: 20,
            onPressed: () {
              isPasswordVisible = !isPasswordVisible;
            },
            icon: Icon(
              isPasswordVisible ? Icons.remove_red_eye : Icons.visibility_off,
              color: miniPrimaryDark,
            ),
          ),
          password: isPasswordVisible,
        )
      ];
}