Windowsアプリ風UIが簡単に作れるFlutterのパッケージ「fluent_ui」

Flutterはクロスプラットフォームに対応したフレームワークですが、WindowsらしいUIを作るのは意外と大変です。
そんなときに役立つのが fluent_ui パッケージです。
Windowsの「Fluent Design System」に準拠したUIを構築できます。

1. fluent_uiとは？
2. インストール方法
3. 基本的な使い方
4. 主なウィジェット一覧
5. サイドバー付きアプリの例
6. 注意点
まとめ
おわりに

1. fluent_uiとは？

fluent_ui は、MicrosoftのFluent Design SystemをFlutterで再現するためのUIパッケージです。
Windowsアプリに近い見た目・操作感をFlutterで実現できます。

2. インストール方法

pubspec.yaml に以下を追加します。

dependencies:
  fluent_ui: ^4.8.7

インストール後に以下を実行：

flutter pub get

3. 基本的な使い方

import 'package:fluent_ui/fluent_ui.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FluentApp(
      title: 'Fluent UI App',
      theme: FluentThemeData(
        brightness: Brightness.light,
        accentColor: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return NavigationView(
      content: ScaffoldPage(
        header: PageHeader(title: Text('ホーム')),
        content: Center(
          child: Button(
            child: Text('クリック'),
            onPressed: () {
              showDialog(
                context: context,
                builder: (_) => ContentDialog(
                  title: Text('通知'),
                  content: Text('ボタンが押されました'),
                  actions: [
                    Button(child: Text('OK'), onPressed: () => Navigator.pop(context)),
                  ],
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

4. 主なウィジェット一覧

ウィジェット名	説明
`FluentApp`	`MaterialApp`の代わりに使用
`NavigationView`	Windowsアプリ風のサイドナビを表示
`Button`	シンプルなボタンウィジェット
`ContentDialog`	ダイアログ表示用
`TextBox`	入力欄（`TextField`に相当）
`ToggleSwitch`	トグル式のON/OFFスイッチ

5. サイドバー付きアプリの例

NavigationView(
  pane: NavigationPane(
    selected: 0,
    onChanged: (index) {},
    items: [
      PaneItem(icon: Icon(FluentIcons.home), title: Text('ホーム')),
      PaneItem(icon: Icon(FluentIcons.settings), title: Text('設定')),
    ],
  ),
  content: ScaffoldPage(
    content: Center(child: Text('コンテンツ表示')),
  ),
);

6. 注意点

主に Windows向けデザイン に最適化されています（macOSやモバイルではやや不自然）
Webでは一部ウィジェットが完全に対応していない場合があります
Material や Cupertino と併用は非推奨です（UIスタイルが混ざる）

まとめ

特徴	内容
Windows風のUIを簡単に実装	Fluent Design Systemに準拠したUIコンポーネント
豊富な標準ウィジェット	ナビゲーション、ボタン、ダイアログなど対応済
クロスプラットフォーム	ただし、Windows以外では見た目に差が出る可能性