【Flutter】macos_uiでmacOSのUIを再現

macos_uiとは
使い方

macos_uiとは

macos_uiは、FlutterアプリケーションにmacOSのデザイン言語を実装するためのウィジェットやテーマを提供するパッケージです。
FlutterアプリケーションがmacOSのネイティブな見た目と操作感を持つようになります。macOS固有のウィンドウユーティリティやカラースキームなどを含む、多くのコンポーネントが用意されています。

使い方

パッケージのインストール

dependencies:
  flutter:
    sdk: flutter
  macos_ui: ^2.0.7

基本的なウィンドウの設定

macOSアプリのウィンドウ設定を行います。

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

Future<void> _configureMacosWindowUtils() async {
  const config = MacosWindowUtilsConfig(
    toolbarStyle: NSWindowToolbarStyle.unified,
  );
  await config.apply();
}

void main() async {
  await _configureMacosWindowUtils();
  runApp(MyApp());
}

MacosWindowの使用例

基本的なMacosWindowの使用例を示します。この例では、サイドバーとエンドサイドバーを含むウィンドウを作成しています。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MacosApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int pageIndex = 0;

  @override
  Widget build(BuildContext context) {
    return MacosWindow(
      sidebar: Sidebar(
        minWidth: 200,
        builder: (context, scrollController) {
          return SidebarItems(
            currentIndex: pageIndex,
            scrollController: scrollController,
            itemSize: SidebarItemSize.large,
            onChanged: (i) {
              setState(() => pageIndex = i);
            },
            items: const [
              SidebarItem(
                label: Text('Page One'),
              ),
              SidebarItem(
                label: Text('Page Two'),
              ),
            ],
          );
        },
      ),
      endSidebar: Sidebar(
        startWidth: 200,
        minWidth: 200,
        maxWidth: 300,
        shownByDefault: false,
        builder: (context, _) {
          return const Center(
            child: Text('End Sidebar'),
          );
        },
      ),
      child: MacosScaffold(
        toolBar: ToolBar(
          title: const Text('My App'),
          actions: [
            ToolBarIconButton(
              label: "Add",
              icon: const MacosIcon(CupertinoIcons.add_circled),
              onPressed: () => print("Add..."),
              showLabel: true,
            ),
            ToolBarIconButton(
              label: "Delete",
              icon: const MacosIcon(CupertinoIcons.trash),
              onPressed: () => print("Delete"),
              showLabel: false,
            ),
          ],
        ),
        children: [
          ContentArea(
            builder: (context, _) {
              return Center(child: Text('Page $pageIndex'));
            },
          ),
        ],
      ),
    );
  }
}