animal_island_flutter 0.1.0

A cozy Animal Island inspired Flutter component library.

Animal Island Flutter

基于 animal-island-ui 复刻的 Flutter 组件库。它保留 React 版的暖米色背景、青绿色主色、棕色文字、pill 圆角、3D 按键阴影、动森风格图标和游戏式控件手感，同时使用 Flutter/Dart 更自然的 Widget API。

本项目用于学习 Flutter 组件库设计、跨端 UI 复刻和文档站搭建。视觉灵感来自生活模拟游戏的温暖岛屿氛围，但组件、代码和资源均以本项目内实现为准。

预览

示例文档项目位于 example，当前文档页按 React demo 的内容结构改写为 Flutter 使用环境。

cd example
flutter run -d web-server --web-hostname 127.0.0.1 --web-port 5178

兼容平台

平台	状态
Android	已适配，可运行示例项目
Windows	已适配 Windows Flutter 工程
Web	已适配，可运行文档站预览
iOS	需在 macOS + Xcode 环境自行测试

安装

当前以本地 path 依赖方式使用：

dependencies:
  animal_island_flutter:
    path: ../animal_island_flutter

入口导入：

import 'package:animal_island_flutter/animal_island_flutter.dart';

推荐在应用根部包一层 AnimalTheme：

void main() {
  runApp(
    MaterialApp(
      home: AnimalTheme(
        child: const App(),
      ),
    ),
  );
}

快速上手

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          children: [
            const AnimalCard(
              type: AnimalCardType.title,
              child: Text('Animal Island'),
            ),
            const SizedBox(height: 16),
            AnimalInput(
              hintText: '今天想做什么？',
              allowClear: true,
              prefix: const Icon(Icons.search_rounded),
              onChanged: (value) {},
            ),
            const SizedBox(height: 16),
            AnimalButton(
              type: AnimalButtonType.primary,
              block: true,
              onPressed: () {},
              child: const Text('开始冒险'),
            ),
          ],
        ),
      ),
    );
  }
}

文档

文档	用途
AI_USAGE.md	面向 AI 代码助手的 Flutter API 手册，列出组件、枚举、默认值、常见组合和禁用写法。
DESIGN_PROMPT.md	设计/生成提示词，整理色板、字体、动效、背景、组件样式和禁止清单。
skill/SKILL.md	像素级复刻 Skill，给 AI 助手维护 Flutter 组件库时使用。

组件映射

React animal-island-ui	Flutter
Button	AnimalButton
Input	AnimalInput
Switch	AnimalSwitch
Modal	AnimalDialog.show(...) / AnimalDialog
Card	AnimalCard
Collapse	AnimalCollapse
Cursor	AnimalCursor
Time	AnimalTime
Phone	AnimalPhone
Footer	AnimalFooter
Divider	AnimalDivider
Typewriter	AnimalTypewriter
Icon / ICON_LIST	AnimalIcon / animalIconList
Select	AnimalSelect
Tabs	AnimalTabs
Checkbox	AnimalCheckbox
CodeBlock	AnimalCodeBlock
Loading	AnimalLoading
Table	AnimalTable

组件覆盖

当前已覆盖 React 包公开导出的 19 个组件：Button、Input、Switch、Modal、Card、Collapse、Cursor、Time、Phone、Footer、Divider、Typewriter、Icon、Select、Tabs、Checkbox、CodeBlock、Loading、Table。

Flutter 版本会优先保持视觉和交互语义一致；少量 Web/React 专属 API 会转换成 Flutter 习惯写法：

• default 在 Dart 中是关键字，因此枚举值写成 defaultType / defaultColor
• Modal.open 改为 AnimalDialog.show(...) 或自行构建 AnimalDialog
• Select.value/onChange 改为 AnimalSelect.value/onChanged
• Checkbox.defaultValue/value 改为 AnimalCheckbox.defaultValue/value
• Table.dataSource 改为 AnimalTable.rows
• Table.render 改为 AnimalTableColumn.cellBuilder
• Loading.active 改为 AnimalLoading(active: true/false)

Dart 命名差异

React 写法	Flutter 写法
type="default"	AnimalButtonType.defaultType
Card type="default"	AnimalCardType.defaultType
Card color="default"	AnimalCardColor.defaultColor
Switch size="default"	AnimalSwitchSize.normal
onChange	onChanged
checkedChildren	checkedChild
unCheckedChildren	uncheckedChild

本地开发

flutter pub get
flutter analyze
flutter test

运行示例：

cd example
flutter pub get
flutter run -d web-server --web-hostname 127.0.0.1 --web-port 5178

生成平台工程：

cd example
flutter create --platforms=android,ios,windows .

视觉资产

项目已接入 React 源码中的 SVG/PNG/WebP 资源，位于 assets/animal_island/img。字体来自 React 项目声明的 @fontsource/nunito、@fontsource/noto-sans-sc、@fontsource/zen-maru-gothic npm 包，已抽取为 Flutter 可注册的 .woff2，位于 assets/animal_island/fonts。Icon、Divider、Footer、Phone、Select、Cursor 等组件会优先使用源码视觉资产；Modal 使用 Flutter 原生 CustomClipper 复刻 objectBoundingBox blob 轮廓。

注意事项

• 本项目仅用于学习、研究和非商业展示。
• 本项目不是任天堂官方产品，与任天堂株式会社无任何关联、授权或合作关系。
• 若继续进行发布到 pub.dev，需要补充许可证、截图、平台测试记录和版本发布说明。

License

MIT