forui：40 个组件的 Flutter UI 库

Flutter 里想快速搭出一套干净、跨平台的界面，很多人会先想到 Material 或 Cupertino。如果你更喜欢 shadcn/ui 那种克制、可定制的风格，Forui 值得一试：40 多个组件、自带主题 CLI，桌面和触控都能用。

Forui 是什么

Forui 是 Duobase 做的 Flutter UI 库，设计明显参考 shadcn/ui，走极简路线。组件覆盖按钮、输入、弹层、导航等常见场景，也支持国际化。配套包 forui_hooks 把控制器暴露成 Flutter Hooks，写起来更顺。

当前 pub 上是 0.26.x。注意版本门槛：0.26.0+ 需要 Flutter 3.47.0 及以上。装之前先跑一下 flutter --version。

安装

在项目根目录：

bash

flutter pub add forui

图标库 Forui Lucide 已经打进主包，一般不用单独装。如果只要图标：

bash

flutter pub add forui_lucide

Flutter 对 1.0 之前的包不会自动跨次要版本升级。如果你写的是 forui: ^0.25.0，不会自动升到 0.26。想跟最新版：

bash

flutter pub upgrade forui --major-versions

从 0.17.0 起还提供了 data-driven fixes，升级后可以跑 dart fix --apply 帮你迁一部分 API。

最小接入

把 FTheme 挂在 MaterialApp / CupertinoApp / WidgetsApp 下面，再往里塞 Forui 组件即可。也可以直接让 CLI 生成骨架：

bash

dart run forui init

手写的话，核心是「主题 + 壳」：

dart

import 'package:flutter/foundation.dart';
import 'package:forui/forui.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    final isTouch = const {
      TargetPlatform.android,
      TargetPlatform.iOS,
      TargetPlatform.fuchsia,
    }.contains(defaultTargetPlatform);

    final light = isTouch
        ? FTheme.neutral.light.touch
        : FTheme.neutral.light.desktop;
    final dark = isTouch
        ? FTheme.neutral.dark.touch
        : FTheme.neutral.dark.desktop;

    return MaterialApp(
      supportedLocales: FLocalizations.supportedLocales,
      localizationsDelegates: const [
        ...FLocalizations.localizationsDelegates,
      ],
      theme: light.toApproximateMaterialTheme(),
      darkTheme: dark.toApproximateMaterialTheme(),
      builder: (context, child) => FTheme(
        data: Theme.brightnessOf(context) == Brightness.light ? light : dark,
        child: FToaster(child: FTooltipGroup(child: child!)),
      ),
      home: const FScaffold(child: DemoPage()),
    );
  }
}

class DemoPage extends StatefulWidget {
  const DemoPage({super.key});

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        spacing: 10,
        children: [
          Text('Count: $_count'),
          FButton(
            onPress: () => setState(() => _count++),
            suffix: const Icon(FLucideIcons.chevronsUp),
            child: const Text('Increase'),
          ),
        ],
      ),
    );
  }
}

和 Material / Cupertino 混用不冲突。现有页面可以一块一块换，不必全盘重写。

主题和 CLI

内置主题是 FTheme.neutral，有 light/dark，还有 touch / desktop 两套密度。想自己调：

bash

# 交互式生成主题
dart run forui theme create

# 生成可改的 style / snippet
dart run forui style create
dart run forui snippet create

也可以在浏览器里用 Forui Create 可视化配色，再导出到项目。CLI 不会把额外体积打进 App，只是生成源码文件，改起来像改自己项目一样。

和 Hooks 一起用

如果项目已经在用 flutter_hooks，装上 forui_hooks，控制器可以直接当 hook 用，少写一堆 StatefulWidget 样板。适合表单、弹层、分页这类状态密集的页面。

什么时候适合上

想要统一的极简视觉，又不想从零写 Design System
同一套 UI 要兼顾手机和桌面
愿意用 CLI / Create 把主题沉淀进仓库，而不是散落在各处 ThemeData

不适合的情况也很清楚：团队已经深度绑死 Material 3 规范，或者 Flutter SDK 还卡在老版本、升不动 3.47。

小结

Forui 把 shadcn 那套「组件 + 可改主题」搬到了 Flutter：flutter pub add forui，挂上 FTheme，再用 CLI 生成主题，就能开干。文档和组件列表在 forui.dev，源码在 GitHub，包在 pub.dev。

字节笔记本

forui：40 个组件的 Flutter UI 库

Forui 是什么

安装

最小接入

主题和 CLI

和 Hooks 一起用

什么时候适合上

小结