flutter-duskmoon

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Flutter DuskMoon UI Design System

Flutter DuskMoon UI设计系统

Complete component library for Flutter apps with codegen-driven theming, adaptive (Material/Cupertino) widgets, platform-aware settings UI, feedback helpers, and data visualization.

这是一套适用于Flutter应用的完整组件库，具备代码生成驱动的主题系统、自适应（Material/Cupertino）组件、平台感知的设置UI、反馈工具以及数据可视化功能。

Quick Start

快速开始

Umbrella package (recommended)

集成包（推荐使用）

Add

duskmoon_ui

to get theme + widgets + settings + feedback + forms in one import:

yaml

undefined

添加

duskmoon_ui

包，可一次性导入主题、组件、设置、反馈及表单功能：

yaml

undefined

pubspec.yaml

dependencies: duskmoon_ui: ^1.4.0


```dart
import 'package:duskmoon_ui/duskmoon_ui.dart';

dependencies: duskmoon_ui: ^1.4.0


```dart
import 'package:duskmoon_ui/duskmoon_ui.dart';

Individual packages

独立包

yaml

dependencies:
  duskmoon_theme: ^1.4.0           # Theme only
  duskmoon_widgets: ^1.4.0         # Adaptive widgets
  duskmoon_settings: ^1.4.0        # Settings UI
  duskmoon_feedback: ^1.4.0        # Dialogs, toasts, snackbars
  duskmoon_form: ^1.4.0            # BLoC-based form management
  duskmoon_visualization: ^1.4.0   # Data visualization charts
  duskmoon_theme_bloc: ^1.4.0      # BLoC persistence
  duskmoon_adaptive_scaffold: ^1.4.0  # Responsive scaffold
  duskmoon_code_engine: ^1.4.0     # Code editor engine

yaml

dependencies:
  duskmoon_theme: ^1.4.0           # 仅主题功能
  duskmoon_widgets: ^1.4.0         # 自适应组件
  duskmoon_settings: ^1.4.0        # 设置UI
  duskmoon_feedback: ^1.4.0        # 对话框、提示框、消息条
  duskmoon_form: ^1.4.0            # 基于BLoC的表单管理
  duskmoon_visualization: ^1.4.0   # 数据可视化图表
  duskmoon_theme_bloc: ^1.4.0      # BLoC持久化
  duskmoon_adaptive_scaffold: ^1.4.0  # 响应式脚手架
  duskmoon_code_engine: ^1.4.0     # 代码编辑器引擎

Skill Modules

功能模块

Detailed documentation is split by package:

duskmoon_theme.md — Theme system, color schemes, text themes, extensions
duskmoon_widgets.md — 19 adaptive widgets (Material/Cupertino) plus markdown rendering, markdown input, and code editor
duskmoon_settings.md — Platform-aware settings UI (Material/Cupertino/Fluent)
duskmoon_feedback.md — Dialogs, snackbars, toasts, bottom sheets
duskmoon_form.md — BLoC-based form state management with 13 widget builders and 9 field BLoCs
duskmoon_visualization.md — Data visualization: line, bar, scatter, heatmap, network graph, map chart
duskmoon_theme_bloc.md — BLoC for persisting theme via SharedPreferences
duskmoon_adaptive_scaffold.md — Responsive scaffold with M3 adaptive layout, breakpoints, and slot-based composition
duskmoon_code_engine.md — Pure Dart code editor engine with 19 language grammars, incremental parsing, and syntax highlighting

详细文档按包拆分：

duskmoon_theme.md — 主题系统、配色方案、文本主题及扩展
duskmoon_widgets.md — 19个自适应组件（Material/Cupertino），支持markdown渲染、markdown输入及代码编辑器
duskmoon_settings.md — 平台感知的设置UI（Material/Cupertino/Fluent）
duskmoon_feedback.md — 对话框、消息条、提示框、底部弹窗
duskmoon_form.md — 基于BLoC的表单状态管理，包含13个组件构建器和9个字段BLoC
duskmoon_visualization.md — 数据可视化：折线图、柱状图、散点图、热力图、网络图、地图图表
duskmoon_theme_bloc.md — 基于SharedPreferences的BLoC主题持久化
duskmoon_adaptive_scaffold.md — 响应式脚手架，支持M3自适应布局、断点及基于插槽的组合
duskmoon_code_engine.md — 纯Dart代码编辑器引擎，支持19种语言语法、增量解析及语法高亮

Minimal App Example

最简应用示例

dart

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: DmThemeData.sunshine(),
      darkTheme: DmThemeData.moonlight(),
      themeMode: ThemeMode.system,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: DmAppBar(title: const Text('DuskMoon App')),
      body: Center(
        child: DmButton(
          onPressed: () => showDmSuccessToast(
            context: context,
            message: 'Hello from DuskMoon!',
          ),
          child: const Text('Tap me'),
        ),
      ),
    );
  }
}

dart

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: DmThemeData.sunshine(),
      darkTheme: DmThemeData.moonlight(),
      themeMode: ThemeMode.system,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: DmAppBar(title: const Text('DuskMoon App')),
      body: Center(
        child: DmButton(
          onPressed: () => showDmSuccessToast(
            context: context,
            message: 'Hello from DuskMoon!',
          ),
          child: const Text('Tap me'),
        ),
      ),
    );
  }
}

Architecture Overview

架构概览

duskmoon_theme              <- Pure theme, zero external deps
    +-- duskmoon_theme_bloc <- BLoC for theme persistence
    +-- duskmoon_widgets    <- 19 adaptive widgets + markdown + code editor
    |       +-- duskmoon_code_engine (for DmCodeEditor)
    +-- duskmoon_settings   <- Settings UI (Material/Cupertino/Fluent)
    +-- duskmoon_feedback   <- Dialogs, snackbars, toasts, bottom sheets
    +-- duskmoon_form       <- BLoC-based form management (depends on theme + widgets)
    +-- duskmoon_visualization <- Data visualization charts (depends on theme)
    +-- duskmoon_code_engine <- Pure Dart code editor (re-exported by umbrella)
            |
        duskmoon_ui         <- Umbrella: re-exports all packages
                               Provides DmEditorTheme (fromTheme, sunshine, moonlight)

duskmoon_code_engine        <- Pure Dart code editor (standalone)
duskmoon_adaptive_scaffold  <- Responsive scaffold (forked, independently versioned)

duskmoon_theme              <- Pure theme, zero external deps
    +-- duskmoon_theme_bloc <- BLoC for theme persistence
    +-- duskmoon_widgets    <- 19 adaptive widgets + markdown + code editor
    |       +-- duskmoon_code_engine (for DmCodeEditor)
    +-- duskmoon_settings   <- Settings UI (Material/Cupertino/Fluent)
    +-- duskmoon_feedback   <- Dialogs, snackbars, toasts, bottom sheets
    +-- duskmoon_form       <- BLoC-based form management (depends on theme + widgets)
    +-- duskmoon_visualization <- Data visualization charts (depends on theme)
    +-- duskmoon_code_engine <- Pure Dart code editor (re-exported by umbrella)
            |
        duskmoon_ui         <- Umbrella: re-exports all packages
                               Provides DmEditorTheme (fromTheme, sunshine, moonlight)

duskmoon_code_engine        <- Pure Dart code editor (standalone)
duskmoon_adaptive_scaffold  <- Responsive scaffold (forked, independently versioned)

Conventions

约定规范

All public classes use
```
Dm
```
prefix
Factory classes are
```
abstract final
```
with static methods
Generated token files use
```
.g.dart
```
suffix in
```
src/generated/
```
BLoC classes (user-subclassable) keep original names (e.g.,
```
FormBloc
```
,
```
TextFieldBloc
```
); only UI widgets get
```
Dm
```
prefix

Platform resolution is 4-tier: widget

platformOverride

DmPlatformOverride

InheritedWidget ->

DuskmoonApp

Theme.of(context).platform

```
DmPlatformStyle
```
has 3 values:
```
material
```
,
```
cupertino
```
,
```
fluent
```

所有公开类均使用
```
Dm
```
前缀
工厂类为
```
abstract final
```
类型，包含静态方法
生成的令牌文件使用
```
.g.dart
```
后缀，存放在
```
src/generated/
```
目录下
BLoC类（可由用户子类化）保留原名（如
```
FormBloc
```
、
```
TextFieldBloc
```
）；仅UI组件使用
```
Dm
```
前缀

平台解析分为四层：组件

platformOverride

DmPlatformOverride

InheritedWidget ->

DuskmoonApp

Theme.of(context).platform

```
DmPlatformStyle
```
包含3个取值：
```
material
```
、
```
cupertino
```
、
```
fluent
```