Flutter平台界面统一插件platform_ui的使用

平台UI

由 @KRTirtho 提供

Flutter平台特定UI小部件

它尽可能地模仿了原生UI小部件（安卓、iOS、macOS、Linux 和 Windows）在 Flutter 中的行为，并且拥有广泛的各种平台特定小部件。其名称和API与 Flutter 的 Material UI 小部件相似，使 Flutter 开发者感到熟悉。它利用了：

• fluent_ui 用于 Windows
• macos_ui 用于 macOS
• Material UI/You 用于 Android
• Cupertino 用于 iOS
• libadwaita 用于 Linux

特性亮点

• 简单可定制的平台特定UI小部件
• 支持所有主要平台（Android、iOS、macOS、Linux 和 Windows）
• 暴露内部API以便在其上构建小部件
• 可改变默认的 TargetPlatform 以覆盖其他平台的设计（这很疯狂但很酷）
• 广泛的平台特定小部件集合
• 小部件API与 Flutter 的 Material UI 小部件相似
• 支持深色模式

安装

在终端运行以下命令：

$ flutter pub add platform_ui fluent_ui macos_ui libadwaita adwaita

预览

https://krtirtho.github.io/platform_ui/

使用

导入包：

import 'package:platform_ui/platform_ui.dart';

示例

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return PlatformApp(
      title: 'Platform UI',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return PlatformScaffold(
      appBar: PlatformAppBar(
        title: Text('Platform UI'),
      ),
      body: Center(
        child: PlatformText(
          'Hello World',
          style: TextStyle(fontSize: 30),
        ),
      ),
    );
  }
}

文档

• API 参考
• 示例应用
• 生产应用
  • Spotube

截图

桌面（Linux → macOS → Windows）

移动设备（Android → iOS）

支持

如果你喜欢这个项目，请考虑通过以下方式支持它：

• 给项目点赞并分享
• 关注 @KrTirtho 在 Twitter 上
• 买杯咖啡 ☕️

许可证

MIT

示例代码

import 'package:example/basic.dart';
import 'package:example/dialog_tabs.dart';
import 'package:example/input.dart';
import 'package:flutter/material.dart';
import 'package:platform_ui/platform_ui.dart';
import 'package:macos_ui/macos_ui.dart';
import 'package:fluent_ui/fluent_ui.dart' as FluentUI;

void main() {
  platform = TargetPlatform.macOS;
  runApp(const MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => MyAppState();

  static MyAppState of(context) =>
      context.findAncestorStateOfType<MyAppState>()!;
}

class MyAppState extends State<MyApp> {
  ThemeMode themeMode = ThemeMode.system;

  toggleTheme() {
    setState(() {
      themeMode =
          themeMode == ThemeMode.dark ? ThemeMode.light : ThemeMode.dark;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return PlatformApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      themeMode: themeMode,
      androidTheme: ThemeData.light(),
      androidDarkTheme: ThemeData.dark(),
      macosTheme: MacosThemeData.light(),
      macosDarkTheme: MacosThemeData.dark(),
      windowsTheme: FluentUI.ThemeData.light(),
      windowsDarkTheme: FluentUI.ThemeData.dark(),
      home: const MyHomePage(
        title: 'Platform UI Demo (AppBar)',
      ),
      windowButtonConfig: PlatformWindowButtonConfig(
        onClose: () => print('close'),
        onMinimize: () => print('minimize'),
        onMaximize: () => print('maximize'),
        onRestore: () => print('restore'),
        isMaximized: () => false,
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool checked = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    final platforms = List<TargetPlatform>.from(TargetPlatform.values)
      ..remove(TargetPlatform.fuchsia);

    return PlatformScaffold(
      appBar: PlatformAppBar(
        title: PlatformText(widget.title),
        actions: [
          PlatformIconButton(
            icon: const Icon(
              Icons.notifications_active_rounded,
            ),
            onPressed: () {},
          ),
          PlatformIconButton(
            icon: Icon(
              MyApp.of(context).themeMode == ThemeMode.dark
                  ? Icons.light_mode_outlined
                  : Icons.dark_mode_outlined,
            ),
            onPressed: MyApp.of(context).toggleTheme,
          ),
          PlatformPopupMenuButton<TargetPlatform>(
            items: platforms
                .map(
                  (e) =>
                      PlatformPopupMenuItem(
                        value: e,
                        child: PlatformText(e.name),
                      ),
                )
                .toList(),
            onCanceled: () {
              print("Canceled");
            },
            onSelected: (value) {
              MyApp.of(context).setState(() {
                platform = value;
              });
            },
            child: const Icon(Icons.more_vert_rounded),
          ),
          const PlatformWindowButtons(),
        ],
      ),
      body: PlatformSidebar(
        header: Center(child: PlatformText.headline("Header")),
        windowsFooterItems: [
          FluentUI.PaneItem(
            icon: const Icon(Icons.home),
            body: const PlatformText("Footer"),
          ),
        ],
        footer: PlatformTextButton(
          child: const Center(child: PlatformText("Footer")),
          onPressed: () {},
        ),
        body: {
          PlatformSidebarItem(
            title: const Text("Basic Widgets"),
            icon: const Icon(Icons.widgets_rounded),
          ): const Basic(),
          PlatformSidebarItem(
            title: const Text("Form/Input Widgets"),
            icon: const Icon(Icons.file_present_rounded),
          ): const Input(),
          PlatformSidebarItem(
            title: const Text("Dialog and Tabbar"),
            icon: const Icon(Icons.home_rounded),
          ): PlatformTabView(
            body: {
              PlatformTab(
                label: "Widgets",
                icon: const Icon(Icons.collections_bookmark_rounded),
              ): const DialogTabs(),
              PlatformTab(
                label: "More Widgets",
                icon: const Icon(Icons.format_align_justify),
              ): const SizedBox.shrink(),
            },
          ),
          PlatformSidebarItem(
            title: const Text("Settings"),
            icon: const Icon(Icons.settings_rounded),
          ): const Center(
            child: PlatformText("Settings"),
          ),
          PlatformSidebarItem(
            title: const Text("About"),
            icon: const Icon(Icons.info_rounded),
          ): const Center(
            child: PlatformText("About"),
          ),
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}