feat: platform app bar add

example/lib/main.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:platform_ui/platform_ui.dart';
 
@@ -17,6 +18,7 @@ class _MyAppState extends State<MyApp> {
   @override
   Widget build(BuildContext context) {
     return PlatformApp(
+      debugShowCheckedModeBanner: false,
       title: 'Flutter Demo',
       home: MyHomePage(
         title: 'Flutter Demo Home Page',
@@ -53,8 +55,41 @@ class _MyHomePageState extends State<MyHomePage> {
   @override
   Widget build(BuildContext context) {
     return PlatformScaffold(
-      appBar: AppBar(
+      appBar: PlatformAppBar(
         title: Text(widget.title),
+        automaticallyImplyLeading: true,
+        leading: const Icon(Icons.flutter_dash_rounded),
+        actions: [
+          PlatformIconButton(
+            icon: const Icon(
+              Icons.notifications_active_rounded,
+            ),
+            onPressed: () {},
+          ),
+          PlatformPopupMenuButton<String>(
+            items: [
+              PlatformPopupMenuItem(
+                value: "lol",
+                child: const Text("LOL"),
+              ),
+              PlatformPopupMenuItem(
+                value: "lmao",
+                child: const Text("LMAO"),
+              ),
+              PlatformPopupMenuItem(
+                value: "ftw",
+                child: const Text("FTW"),
+              ),
+            ],
+            onCanceled: () {
+              print("Canceled");
+            },
+            onSelected: (value) {
+              print(value);
+            },
+            child: const Icon(Icons.more_vert_rounded),
+          )
+        ],
       ),
       body: PlatformTabView(
         body: {
@@ -180,30 +215,6 @@ class _MyHomePageState extends State<MyHomePage> {
                     print("Long Pressed");
                   },
                 ),
-                PlatformPopupMenuButton<String>(
-                  items: [
-                    PlatformPopupMenuItem(
-                      value: "lol",
-                      child: const Text("LOL"),
-                    ),
-                    PlatformPopupMenuItem(
-                      value: "lmao",
-                      child: const Text("LMAO"),
-                    ),
-                    PlatformPopupMenuItem(
-                      value: "ftw",
-                      child: const Text("FTW"),
-                    ),
-                  ],
-                  color: Colors.amber,
-                  onCanceled: () {
-                    print("Canceled");
-                  },
-                  onSelected: (value) {
-                    print(value);
-                  },
-                  child: const Icon(Icons.more_horiz_rounded),
-                ),
                 PlatformTooltip(
                   message:
                       "Really Wonderful ${Theme.of(context).platform.name}",

lib/platform_ui.dart

@@ -14,3 +14,4 @@ export 'src/platform_tooltip.dart';
 export 'src/platform_popup_menu_button.dart';
 export 'src/platform_tab_view.dart';
 export 'src/platform_property.dart';
+export 'src/platform_app_bar.dart';

lib/src/platform_app_bar.dart

@@ -3,8 +3,46 @@ import 'package:flutter/material.dart';
 import 'package:platform_ui/platform_ui.dart';
 import 'package:macos_ui/macos_ui.dart';
 
-class PlatformAppBar extends StatelessWidget with PlatformMixin<Widget> {
-  const PlatformAppBar({Key? key}) : super(key: key);
+// ignore: must_be_immutable
+class PlatformAppBar extends StatelessWidget
+    with PlatformMixin<Widget>
+    implements ObstructingPreferredSizeWidget {
+  final Widget? leading;
+  final bool automaticallyImplyLeading;
+  final Widget? title;
+  final List<Widget>? actions;
+  final Color? backgroundColor;
+  final Color? foregroundColor;
+  final IconThemeData? actionsIconTheme;
+  final bool? centerTitle;
+  final double? titleSpacing;
+  final double toolbarOpacity;
+  final double? leadingWidth;
+  final TextStyle? toolbarTextStyle;
+  final TextStyle? titleTextStyle;
+  final double? titleWidth;
+
+  PlatformAppBar({
+    Key? key,
+    this.leading,
+    this.automaticallyImplyLeading = true,
+    this.title,
+    this.actions,
+    this.backgroundColor,
+    this.foregroundColor,
+    this.actionsIconTheme,
+    this.centerTitle,
+    this.titleSpacing,
+    this.toolbarOpacity = 1.0,
+    this.leadingWidth,
+    this.toolbarTextStyle,
+    this.titleWidth,
+    this.titleTextStyle,
+  })  : preferredSize = const Size.fromHeight(kToolbarHeight),
+        super(key: key);
+
+  @override
+  Size preferredSize;
 
   @override
   Widget build(BuildContext context) {
@@ -13,12 +51,64 @@ class PlatformAppBar extends StatelessWidget with PlatformMixin<Widget> {
 
   @override
   Widget android(BuildContext context) {
-    return AppBar();
+    final appBar = AppBar(
+      leading: leading,
+      automaticallyImplyLeading: automaticallyImplyLeading,
+      title: title,
+      actions: actions,
+      backgroundColor: backgroundColor,
+      foregroundColor: foregroundColor,
+      actionsIconTheme: actionsIconTheme,
+      centerTitle: centerTitle,
+      titleSpacing: titleSpacing,
+      toolbarOpacity: toolbarOpacity,
+      leadingWidth: leadingWidth,
+      toolbarTextStyle: toolbarTextStyle,
+      titleTextStyle: titleTextStyle,
+    );
+    preferredSize = appBar.preferredSize;
+    return appBar;
   }
 
   @override
   Widget ios(BuildContext context) {
-    return CupertinoNavigationBar();
+    final Color defaultBackgroundColor =
+        CupertinoDynamicColor.maybeResolve(backgroundColor, context) ??
+            CupertinoTheme.of(context).barBackgroundColor;
+    final styledTitle = title != null
+        ? DefaultTextStyle(
+            style: titleTextStyle ??
+                CupertinoTheme.of(context).textTheme.navTitleTextStyle,
+            child: title!,
+          )
+        : null;
+
+    final cupertinoNavigationBar = CupertinoNavigationBar(
+      leading: centerTitle == false
+          ? Row(children: [
+              if (leading != null) leading!,
+              SizedBox(width: titleSpacing),
+              if (title != null) styledTitle!
+            ])
+          : leading,
+      automaticallyImplyLeading: automaticallyImplyLeading,
+      middle: centerTitle != false ? styledTitle : null,
+      automaticallyImplyMiddle: true,
+      backgroundColor: (backgroundColor ?? defaultBackgroundColor)
+          .withOpacity(toolbarOpacity),
+      transitionBetweenRoutes: true,
+      trailing: actions != null
+          ? IconTheme(
+              data: actionsIconTheme ??
+                  IconTheme.of(context).copyWith(color: foregroundColor),
+              child: Row(mainAxisSize: MainAxisSize.min, children: actions!),
+            )
+          : null,
+    );
+
+    preferredSize = cupertinoNavigationBar.preferredSize;
+
+    return cupertinoNavigationBar;
   }
 
   @override
@@ -28,11 +118,70 @@ class PlatformAppBar extends StatelessWidget with PlatformMixin<Widget> {
 
   @override
   Widget macos(BuildContext context) {
-    return ToolBar();
+    final styledTitle = title != null
+        ? DefaultTextStyle(
+            maxLines: 1,
+            style: titleTextStyle ??
+                CupertinoTheme.of(context).textTheme.navTitleTextStyle,
+            child: title!,
+          )
+        : null;
+
+    preferredSize = const Size.fromHeight(52);
+
+    return ToolBar(
+      leading: leading != null
+          ? DefaultTextStyle(
+              style: toolbarTextStyle ?? MacosTheme.of(context).typography.body,
+              child: IconTheme(
+                data: actionsIconTheme ??
+                    IconTheme.of(context).copyWith(
+                      color: foregroundColor ??
+                          MacosTheme.of(context).typography.body.color,
+                    ),
+                child: leading!,
+              ),
+            )
+          : null,
+      automaticallyImplyLeading: automaticallyImplyLeading,
+      title: styledTitle,
+      actions: actions
+              ?.map(
+                (e) => CustomToolbarItem(
+                  inToolbarBuilder: (context) => DefaultTextStyle(
+                    style: MacosTheme.of(context).typography.body,
+                    child: IconTheme(
+                      data: actionsIconTheme ??
+                          IconTheme.of(context).copyWith(
+                            color: foregroundColor ??
+                                MacosTheme.of(context).typography.body.color,
+                          ),
+                      child: e,
+                    ),
+                  ),
+                ),
+              )
+              .toList() ??
+          <ToolbarItem>[],
+      decoration: BoxDecoration(
+        color: (backgroundColor ?? MacosTheme.of(context).canvasColor)
+            .withOpacity(toolbarOpacity),
+      ),
+      titleWidth: titleWidth ?? 150,
+      centerTitle: centerTitle ?? false,
+    );
   }
 
   @override
   Widget windows(BuildContext context) {
     return android(context);
   }
+
+  @override
+  bool shouldFullyObstruct(BuildContext context) {
+    final Color backgroundColor =
+        CupertinoDynamicColor.maybeResolve(this.backgroundColor, context) ??
+            CupertinoTheme.of(context).barBackgroundColor;
+    return backgroundColor.alpha == 0xFF;
+  }
 }

lib/src/platform_scaffold.dart

@@ -2,6 +2,7 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:macos_ui/macos_ui.dart';
+import 'package:platform_ui/src/platform_app_bar.dart';
 import 'package:platform_ui/src/platform_mixin.dart';
 
 class PlatformScaffold extends StatelessWidget with PlatformMixin<Widget> {
@@ -92,7 +93,9 @@ class PlatformScaffold extends StatelessWidget with PlatformMixin<Widget> {
     return CupertinoPageScaffold(
       // TODO: Do something for [CuopertinoNavBar]
       backgroundColor: backgroundColor,
-      navigationBar: null,
+      navigationBar: appBar is ObstructingPreferredSizeWidget
+          ? appBar as ObstructingPreferredSizeWidget
+          : null,
       resizeToAvoidBottomInset: resizeToAvoidBottomInset ?? true,
       child: body,
     );
@@ -106,8 +109,9 @@ class PlatformScaffold extends StatelessWidget with PlatformMixin<Widget> {
   @override
   Widget macos(context) {
     return MacosScaffold(
-      // TODO: Do something for [macOS ToolBar]
-      toolBar: null,
+      toolBar: (appBar is PlatformAppBar)
+          ? (appBar as PlatformAppBar).macos(context) as ToolBar
+          : null,
       backgroundColor: backgroundColor,
       children: [
         ContentArea(

lib/src/specific/macos_popup_menu_button.dart

@@ -700,7 +700,11 @@ class _MacosPulldownButtonState extends State<MacosPulldownButton>
               color: buttonStyles.bgColor,
               borderRadius: borderRadius,
             ),
-      child: widget.child,
+      padding: const EdgeInsets.symmetric(horizontal: 8),
+      child: IconTheme(
+        data: IconTheme.of(context).copyWith(color: buttonStyles.textColor),
+        child: widget.child,
+      ),
     );
 
     return Semantics(
@@ -749,32 +753,29 @@ _ButtonStyles _getButtonStyles(
     const Color(0xffc3c4c9),
     const Color(0xff222222),
   );
-  Color caretColor = MacosColors.white;
-  Color caretBgColor = pulldownTheme.highlightColor!;
   Color iconColor = pulldownTheme.iconColor!;
   if (!enabled) {
-    caretBgColor = MacosColors.transparent;
-    textColor = caretColor = brightness.resolve(
+    textColor = brightness.resolve(
       const Color.fromRGBO(0, 0, 0, 0.3),
       const Color.fromRGBO(255, 255, 255, 0.3),
     );
     bgColor = borderColor = MacosColors.transparent;
   } else {
-    borderColor = caretBgColor = MacosColors.transparent;
+    borderColor = MacosColors.transparent;
     switch (pullDownButtonState) {
       case PulldownButtonState.enabled:
-        textColor = caretColor = iconColor;
+        textColor = iconColor;
         bgColor = MacosColors.transparent;
         break;
       case PulldownButtonState.hovered:
-        textColor = caretColor = iconColor;
+        textColor = iconColor;
         bgColor = brightness.resolve(
           const Color(0xfff4f5f5),
           const Color(0xff323232),
         );
         break;
       case PulldownButtonState.pressed:
-        textColor = caretColor = iconColor.withOpacity(0.85);
+        textColor = iconColor.withOpacity(0.85);
         bgColor = brightness.resolve(
           const Color.fromRGBO(0, 0, 0, 0.1),
           const Color.fromRGBO(255, 255, 255, 0.1),