Flutter跨平台UI组件插件flutter_platform_widgets_aurora的使用

Flutter Platform Widgets

TL;DR;

这是一个包装库，它使您能够通过单一的widget轻松地为目标平台设计语言进行适配。

Bit more

对于刚开始使用Flutter构建应用程序的人来说，选择正确的widget非常重要。通常从使用Material widget集开始，这是Android的默认外观和感觉。然而，当为iOS设计屏幕并采用Cupertino设计语言时，则需要加倍努力来适应一套新的widget。

此项目最初是一个实验，后来发展成为一个完整的包，以支持使用单一平台widget呈现Material和Cupertino设计语言的界面。

如果您想构建一个具有类似功能的Material和Cupertino外观的应用程序，这个包可以为您节省时间和精力。

---

此包支持稳定版作为完全发布的版本。

当有预发布版本时可能会支持Beta通道。请查看CHANGELOG了解版本兼容性。

由于Master分支正在快速开发中，此包无法支持Master通道。如果需要此支持，建议克隆仓库并在本地引用fork版本，以便根据需要进行更改。

---

安装

请访问pub.dev获取安装指南。

---

如何工作

与其编写这样的条件代码…

if (Platform.isAndroid) {
  return ElevatedButton(onPressed: onPressed, child: child);
} else if (Platform.isIOS) {
  return CupertinoButton.filled(onPressed: onPressed, child: child);
}

您可以使用一个单一的platform widget，该widget会根据ThemeData.platform属性渲染正确的底层widget…

return PlatformElevatedButton(onPressed: onPressed, child: child);

选择正确widget的繁重工作已经为您完成。

您还可以在flutter中指定任何受支持平台的设计语言。这些包括：

• Android
• iOS
• Web
• Macos
• Windows
• Linux

---

文档

查看package wiki以获取使用说明和可用widget列表。

---

问题与反馈

请通过创建issue提供反馈或报告问题。

---

许可证

MIT

---

贡献者

特别感谢过去五年来为本项目做出贡献的所有人…

由contrib.rocks制作。

受Swav Kulinski（https://github.com/swavkulinski/flutter-platform-specific-widgets）提供的示例启发。

---

示例代码

以下是使用flutter_platform_widgets_aurora的完整示例代码。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_platform_widgets_aurora/flutter_platform_widgets.dart';

import 'platform_page.dart';

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ThemeMode? themeMode = ThemeMode.light; // 初始亮度模式

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 定义Material主题
    final materialLightTheme = ThemeData.light();
    final materialDarkTheme = ThemeData.dark();

    // 定义Cupertino暗色主题
    const darkDefaultCupertinoTheme =
        CupertinoThemeData(brightness: Brightness.dark);
    final cupertinoDarkTheme = MaterialBasedCupertinoThemeData(
      materialTheme: materialDarkTheme.copyWith(
        cupertinoOverrideTheme: CupertinoThemeData(
          brightness: Brightness.dark,
          barBackgroundColor: darkDefaultCupertinoTheme.barBackgroundColor,
          textTheme: CupertinoTextThemeData(
            primaryColor: Colors.white,
            navActionTextStyle:
                darkDefaultCupertinoTheme.textTheme.navActionTextStyle.copyWith(
              color: const Color(0xF0F9F9F9),
            ),
            navLargeTitleTextStyle: darkDefaultCupertinoTheme
                .textTheme.navLargeTitleTextStyle
                .copyWith(color: const Color(0xF0F9F9F9)),
          ),
        ),
      ),
    );

    // 定义Cupertino亮色主题
    final cupertinoLightTheme =
        MaterialBasedCupertinoThemeData(materialTheme: materialLightTheme);

    return PlatformProvider(
      settings: PlatformSettingsData(
        iosUsesMaterialWidgets: true,
        iosUseZeroPaddingForAppbarPlatformIcon: true,
      ),
      builder: (context) => PlatformTheme(
        themeMode: themeMode,
        materialLightTheme: materialLightTheme,
        materialDarkTheme: materialDarkTheme,
        cupertinoLightTheme: cupertinoLightTheme,
        cupertinoDarkTheme: cupertinoDarkTheme,
        matchCupertinoSystemChromeBrightness: true,
        onThemeModeChanged: (newThemeMode) {
          setState(() {
            themeMode = newThemeMode;
          });
        },
        builder: (context) => PlatformApp(
          localizationsDelegates: [
            DefaultMaterialLocalizations.delegate,
            DefaultWidgetsLocalizations.delegate,
            DefaultCupertinoLocalizations.delegate,
          ],
          title: 'Flutter Platform Widgets',
          home: PlatformPage(),
        ),
      ),
    );
  }
}

PlatformPage 示例页面代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_platform_widgets_aurora/flutter_platform_widgets.dart';

class PlatformPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Platform Widgets'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 使用Material风格的按钮
            PlatformElevatedButton(
              onPressed: () {},
              child: Text('Material Button'),
            ),
            SizedBox(height: 20), // 空间间隔
            // 使用Cupertino风格的按钮
            PlatformCupertinoButton(
              onPressed: () {},
              child: Text('Cupertino Button'),
            ),
          ],
        ),
      ),
    );
  }
}