// Fluent Design 和现代化 Flutter 开发指南。Invoke when implementing Fluent Design UI, modern Flutter patterns, or Windows-style interfaces.
| name | fluent-design-flutter |
| description | Fluent Design 和现代化 Flutter 开发指南。Invoke when implementing Fluent Design UI, modern Flutter patterns, or Windows-style interfaces. |
本 skill 提供在 Flutter 中实现 Microsoft Fluent Design System 的完整指南，以及现代化 Flutter 开发的最佳实践。
BoxShadow、PhysicalModel、ElevationAnimationController 和 ImplicitlyAnimatedWidgetBackdropFilter 和 ImageFilter.blurdependencies:
fluent_ui: ^4.9.1 # Fluent Design 组件库
system_theme: ^3.0.0 # 系统主题同步
window_manager: ^0.3.7 # 窗口管理
flutter_acrylic: ^1.1.3 # 窗口透明/Acrylic效果
bitsdojo_window: ^0.1.6 # 自定义窗口标题栏
lib/
├── app/
│ ├── app.dart # MaterialApp/FluentApp 配置
│ └── routes/ # 路由配置
├── core/
│ ├── theme/ # 主题定义
│ │ ├── app_theme.dart
│ │ └── fluent_theme.dart
│ ├── constants/ # 常量定义
│ └── utils/ # 工具函数
├── features/ # 按功能模块组织
│ └── feature_name/
│ ├── data/ # 数据层
│ ├── domain/ # 业务逻辑层
│ └── presentation/ # UI层
│ ├── pages/
│ ├── widgets/
│ └── providers/
├── shared/
│ ├── widgets/ # 共享组件
│ └── extensions/ # 扩展方法
└── main.dart
import 'package:fluent_ui/fluent_ui.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return FluentApp(
title: 'Fluent App',
theme: FluentThemeData(
accentColor: Colors.blue,
brightness: Brightness.light,
),
darkTheme: FluentThemeData(
accentColor: Colors.blue,
brightness: Brightness.dark,
),
home: HomePage(),
);
}
}
// 侧边导航
NavigationView(
appBar: NavigationAppBar(
title: Text('App Title'),
),
pane: NavigationPane(
selected: _selectedIndex,
onChanged: (index) => setState(() => _selectedIndex = index),
displayMode: PaneDisplayMode.auto,
items: [
PaneItem(
icon: Icon(FluentIcons.home),
title: Text('Home'),
body: HomePage(),
),
PaneItem(
icon: Icon(FluentIcons.settings),
title: Text('Settings'),
body: SettingsPage(),
),
],
),
)
// 按钮
FilledButton(child: Text('Primary'), onPressed: () {}),
Button(child: Text('Secondary'), onPressed: () {}),
HyperlinkButton(child: Text('Link'), onPressed: () {}),
// 输入框
TextBox(
placeholder: 'Enter text',
prefix: Icon(FluentIcons.search),
),
// 卡片
Card(
child: Column(
children: [
Text('Card Title'),
Text('Card Content'),
],
),
),
// 信息提示
InfoBar(
title: Text('Info'),
content: Text('This is an info message'),
severity: InfoBarSeverity.info,
),
推荐使用 Riverpod 或 Provider：
// Riverpod 示例
final counterProvider = StateProvider<int>((ref) => 0);
class CounterWidget extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final count = ref.watch(counterProvider);
return Text('$count');
}
}
class ResponsiveLayout extends StatelessWidget {
final Widget mobile;
final Widget tablet;
final Widget desktop;
const ResponsiveLayout({
required this.mobile,
required this.tablet,
required this.desktop,
});
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) return mobile;
if (constraints.maxWidth < 1200) return tablet;
return desktop;
},
);
}
}
import 'dart:ui';
Widget acrylicEffect({required Widget child}) {
return ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Container(
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.7),
borderRadius: BorderRadius.circular(8),
),
child: child,
),
),
);
}
import 'package:flutter_acrylic/flutter_acrylic.dart';
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Window.initialize();
await Window.setEffect(
effect: WindowEffect.acrylic,
color: Color(0xCC222222),
);
runApp(MyApp());
}
class ThemeProvider extends ChangeNotifier {
ThemeMode _mode = ThemeMode.system;
ThemeMode get mode => _mode;
void toggleTheme() {
_mode = _mode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
notifyListeners();
}
}
import 'package:system_theme/system_theme.dart';
await SystemTheme.accentColor.load();
final accentColor = SystemTheme.accentColor.accent;
// 使用 AnimatedContainer
AnimatedContainer(
duration: Duration(milliseconds: 200),
curve: Curves.easeInOut,
decoration: BoxDecoration(
color: isHovered ? Colors.blue : Colors.transparent,
),
child: child,
)
// 使用 AnimatedOpacity
AnimatedOpacity(
opacity: isVisible ? 1.0 : 0.0,
duration: Duration(milliseconds: 200),
child: child,
)
Hero(
tag: 'image-hero',
child: Image.network(url),
)
CachedNetworkImage(
imageUrl: url,
placeholder: (context, url) => ProgressRing(),
errorWidget: (context, url, error) => Icon(FluentIcons.error),
fadeInDuration: Duration(milliseconds: 200),
memCacheWidth: 300, // 限制内存缓存大小
)
ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) => ItemWidget(items[index]),
cacheExtent: 500, // 预缓存区域
)
FutureBuilder(
future: _loadData(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return ProgressRing();
}
return ContentWidget(snapshot.data);
},
)
| 类型 | 规范 | 示例 |
|---|---|---|
| 文件 | snake_case | user_profile_page.dart |
| 类 | PascalCase | UserProfilePage |
| 变量 | camelCase | userName |
| 常量 | camelCase | maxRetryCount |
| 私有成员 | _camelCase | _internalState |
class MyWidget extends StatelessWidget {
final String title;
final VoidCallback? onPressed;
const MyWidget({
super.key,
required this.title,
this.onPressed,
});
@override
Widget build(BuildContext context) {
return Container(
child: _buildContent(context),
);
}
Widget _buildContent(BuildContext context) {
return Column(
children: [
_buildTitle(context),
_buildBody(context),
],
);
}
Widget _buildTitle(BuildContext context) {
return Text(title);
}
Widget _buildBody(BuildContext context) {
return Expanded(child: Container());
}
}
class AppConstants {
static const double cardRadius = 8.0;
static const double defaultPadding = 16.0;
static const Duration defaultAnimationDuration = Duration(milliseconds: 200);
}
flutter pub global activate devtools
flutter pub global run devtools
void main() {
debugProfileBuildsEnabled = true;
debugPrintMarkedBuilds = true;
runApp(MyApp());
}