miniui_component 0.1.1

A lightweight Flutter UI component library built on widgets without material.dart.

MiniUi 组件库

一个基于 Flutter 的 UI 组件库，不依赖 material.dart。

本仓库既包含组件实现，也包含一个完整的示例 App（在 example/ 目录），推荐直接跑 example 来体验所有组件和模版页。

---

特性

• 无 Material 依赖
  • 基于 WidgetsApp + Directionality 构建应用入口
  • 组件层不依赖 material.dart，便于在自定义设计体系中复用
• 主题与设计令牌（Theme + Tokens）
  • 提供统一的 MiniTheme（颜色 / 间距 / 圆角 / 字体 / 组件尺寸）
  • 内置多套主题：light / dark / blue / red / festival
  • MiniThemeController 支持运行时切换与动态更新
    

---

Home & Theme	Profile 模版	Grid & BottomNav

---

安装

pubspec.yaml 中添加依赖

dependencies:
  flutter:
    sdk: flutter

  miniui_component: ^0.0.3

---

快速开始

import 'package:flutter/widgets.dart';
import 'package:miniui_component/miniui.dart';

void main() {
  final controller = MiniThemeController(initialTheme: MiniThemes.light);

  runApp(
    Directionality(
      textDirection: TextDirection.ltr,
      child: AnimatedMiniTheme(
        theme: controller.theme,
        duration: const Duration(milliseconds: 220),
        child: WidgetsApp(
          color: controller.theme.colors.background,
          builder: (context, _) => Center(
            child: MiniButton(
              label: 'Hello MiniUi',
              onPressed: () {},
            ),
          ),
        ),
      ),
    ),
  );
}

更多用法（多主题、表单、列表、模版页），请参考 example/ 中的示例代码。

---

组件概览

所有组件统一从 lib/miniui.dart 导出：

import 'package:miniui_component/miniui.dart';

在 IDE 中跳转到 miniui.dart 可以快速浏览所有公开组件；更详细的使用方式请参考上面对应的 example 源码。

---

组件说明

• 按钮：MiniButton
• 输入框：MiniInput
• 复选框：MiniCheckbox
• 返回按钮：MiniBackButton
• 对话框：MiniDialog
• 日期选择：MiniDatePicker

---

多语言（i18n）

MiniUi 内置了一个简单的本地化层 MiniLocalizations：

• 支持的语言：zh / en
• 主要用于示例 App 的文案（首页标题、按钮文案等）

在示例 App 中的集成方式（见 example/lib/main.dart）：

WidgetsApp(
  color: theme.colors.background,
  localizationsDelegates: const <LocalizationsDelegate<dynamic>>[
    MiniLocalizations.delegate,
  ],
  supportedLocales: MiniLocalizations.supportedLocales,
  localeListResolutionCallback:
      (List<Locale>? locales, Iterable<Locale> supported) {
    final Locale? device = locales != null && locales.isNotEmpty
        ? locales.first
        : null;
    if (device == null) {
      return const Locale('en');
    }
    final String code = device.languageCode.toLowerCase();
    if (code == 'zh') {
      return const Locale('zh');
    }
    return const Locale('en');
  },
  ...
);

组件自身不会强绑定任何语言，只在需要文案的示例页中通过：

final MiniLocalizations i18n = MiniLocalizations.of(context);

来获取多语言字符串。如果你在业务里使用 MiniUi，可以继续沿用自己的 i18n 方案；MiniLocalizations 主要是为了让 example 根据系统语言自动在中英文之间切换。

---

开发与调试

运行示例 App：

flutter run -t example/lib/main.dart

运行测试：

flutter test

核心 Theme / Tokens 定义在 lib/core/utils/tokens.dart，Theme 注入和组件基类在 lib/core/base/base_component.dart。如果需要自定义皮肤或尺寸，可以从这里开始阅读代码。