diff --git a/CHANGELOG.md b/CHANGELOG.md index 88c90a37..786279c3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,15 @@ +## [2.0.0-beta.10] +🛠️ Fixed 🛠️ +* Ensure builds targeting web do not utilize any `macos_window_utils` code +* Ensure builds targeting web are themed correctly + +🔄 Updated 🔄 +* `MacosTypography` white and black are now factory constructors called `darkOpaque()` and `lightOpaque()` to reflect +Apple's naming conventions. +* `PushButton` now uses the correct `body` text style instead of the incorrect `headline` +* `Toolbar` now uses the correct `title3` text style instead of the incorrect `headline` +* `MacosTheme` sets the global typography, per theme, more efficiently + ## [2.0.0-beta.9] * `ResizablePane` can now disallow the usage of its internal scrollbar via the `ReziablePane.noScrollBar` constructor. diff --git a/example/lib/main.dart b/example/lib/main.dart index 04f48411..8869a817 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -1,3 +1,5 @@ +import 'dart:io'; + import 'package:example/pages/buttons_page.dart'; import 'package:example/pages/colors_page.dart'; import 'package:example/pages/dialogs_page.dart'; @@ -9,9 +11,12 @@ import 'package:example/pages/sliver_toolbar_page.dart'; import 'package:example/pages/tabview_page.dart'; import 'package:example/pages/toolbar_page.dart'; import 'package:example/pages/typography_page.dart'; +import 'package:example/platform_menus.dart'; import 'package:flutter/cupertino.dart'; +import 'package:flutter/foundation.dart'; import 'package:macos_ui/macos_ui.dart'; import 'package:provider/provider.dart'; +import 'package:url_launcher/url_launcher.dart'; import 'theme.dart'; @@ -22,7 +27,11 @@ Future _configureMacosWindowUtils() async { } Future main() async { - await _configureMacosWindowUtils(); + if (!kIsWeb) { + if (Platform.isMacOS) { + await _configureMacosWindowUtils(); + } + } runApp(const MacosUIGalleryApp()); } @@ -78,38 +87,7 @@ class _WidgetGalleryState extends State { @override Widget build(BuildContext context) { return PlatformMenuBar( - menus: const [ - PlatformMenu( - label: 'macos_ui Widget Gallery', - menus: [ - PlatformProvidedMenuItem( - type: PlatformProvidedMenuItemType.about, - ), - PlatformProvidedMenuItem( - type: PlatformProvidedMenuItemType.quit, - ), - ], - ), - PlatformMenu( - label: 'View', - menus: [ - PlatformProvidedMenuItem( - type: PlatformProvidedMenuItemType.toggleFullScreen, - ), - ], - ), - PlatformMenu( - label: 'Window', - menus: [ - PlatformProvidedMenuItem( - type: PlatformProvidedMenuItemType.minimizeWindow, - ), - PlatformProvidedMenuItem( - type: PlatformProvidedMenuItemType.zoomWindow, - ), - ], - ), - ], + menus: menuBarItems(), child: MacosWindow( sidebar: Sidebar( top: MacosSearchField( @@ -184,7 +162,17 @@ class _WidgetGalleryState extends State { builder: (context, scrollController) { return SidebarItems( currentIndex: pageIndex, - onChanged: (i) => setState(() => pageIndex = i), + onChanged: (i) { + if (kIsWeb && i == 10) { + launchUrl( + Uri.parse( + 'https://www.figma.com/file/IX6ph2VWrJiRoMTI1Byz0K/Apple-Design-Resources---macOS-(Community)?node-id=0%3A1745&mode=dev', + ), + ); + } else { + setState(() => pageIndex = i); + } + }, scrollController: scrollController, itemSize: SidebarItemSize.large, items: const [ @@ -281,7 +269,7 @@ class _WidgetGalleryState extends State { ); }, ), - child: IndexedStack( + /*child: IndexedStack( index: pageIndex, children: pageBuilders .asMap() @@ -291,7 +279,20 @@ class _WidgetGalleryState extends State { }) .values .toList(), - ), + ),*/ + child: [ + CupertinoTabView(builder: (_) => const ButtonsPage()), + const IndicatorsPage(), + const FieldsPage(), + const ColorsPage(), + const DialogsPage(), + const ToolbarPage(), + const SliverToolbarPage(isVisible: !kIsWeb), + const TabViewPage(), + const ResizablePanePage(), + const SelectorsPage(), + const TypographyPage(), + ][pageIndex], ), ); } diff --git a/example/lib/pages/selectors_page.dart b/example/lib/pages/selectors_page.dart index fdc5fbeb..74ed4b47 100644 --- a/example/lib/pages/selectors_page.dart +++ b/example/lib/pages/selectors_page.dart @@ -1,6 +1,7 @@ import 'package:example/widgets/widget_text_title1.dart'; import 'package:example/widgets/widget_text_title2.dart'; import 'package:flutter/cupertino.dart'; +import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:macos_ui/macos_ui.dart'; @@ -79,11 +80,13 @@ class _SelectorsPageState extends State { ], ), const SizedBox(height: 20), - const WidgetTextTitle1(widgetName: 'MacosColorWell'), - Divider(color: MacosTheme.of(context).dividerColor), - MacosColorWell( - onColorSelected: (color) => debugPrint('$color'), - ), + if (!kIsWeb) ...[ + const WidgetTextTitle1(widgetName: 'MacosColorWell'), + Divider(color: MacosTheme.of(context).dividerColor), + MacosColorWell( + onColorSelected: (color) => debugPrint('$color'), + ), + ], ], ), ); diff --git a/example/lib/platform_menus.dart b/example/lib/platform_menus.dart new file mode 100644 index 00000000..91ba6a7c --- /dev/null +++ b/example/lib/platform_menus.dart @@ -0,0 +1,52 @@ +import 'package:flutter/foundation.dart' show kIsWeb; +import 'dart:io' as io; + +import 'package:flutter/widgets.dart' + show + PlatformMenu, + PlatformMenuItem, + PlatformProvidedMenuItem, + PlatformProvidedMenuItemType; + +List menuBarItems() { + if (kIsWeb) { + return []; + } else { + if (io.Platform.isMacOS) { + return const [ + PlatformMenu( + label: 'macos_ui Widget Gallery', + menus: [ + PlatformProvidedMenuItem( + type: PlatformProvidedMenuItemType.about, + ), + PlatformProvidedMenuItem( + type: PlatformProvidedMenuItemType.quit, + ), + ], + ), + PlatformMenu( + label: 'View', + menus: [ + PlatformProvidedMenuItem( + type: PlatformProvidedMenuItemType.toggleFullScreen, + ), + ], + ), + PlatformMenu( + label: 'Window', + menus: [ + PlatformProvidedMenuItem( + type: PlatformProvidedMenuItemType.minimizeWindow, + ), + PlatformProvidedMenuItem( + type: PlatformProvidedMenuItemType.zoomWindow, + ), + ], + ), + ]; + } else { + return []; + } + } +} diff --git a/example/macos/Flutter/GeneratedPluginRegistrant.swift b/example/macos/Flutter/GeneratedPluginRegistrant.swift index 15deecb4..0179c12c 100644 --- a/example/macos/Flutter/GeneratedPluginRegistrant.swift +++ b/example/macos/Flutter/GeneratedPluginRegistrant.swift @@ -8,9 +8,11 @@ import Foundation import macos_ui import macos_window_utils import path_provider_foundation +import url_launcher_macos func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) { MacOSUiPlugin.register(with: registry.registrar(forPlugin: "MacOSUiPlugin")) MacOSWindowUtilsPlugin.register(with: registry.registrar(forPlugin: "MacOSWindowUtilsPlugin")) PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin")) + UrlLauncherPlugin.register(with: registry.registrar(forPlugin: "UrlLauncherPlugin")) } diff --git a/example/macos/Podfile.lock b/example/macos/Podfile.lock index 97b47e1b..2fa81174 100644 --- a/example/macos/Podfile.lock +++ b/example/macos/Podfile.lock @@ -7,12 +7,15 @@ PODS: - path_provider_foundation (0.0.1): - Flutter - FlutterMacOS + - url_launcher_macos (0.0.1): + - FlutterMacOS DEPENDENCIES: - FlutterMacOS (from `Flutter/ephemeral`) - macos_ui (from `Flutter/ephemeral/.symlinks/plugins/macos_ui/macos`) - macos_window_utils (from `Flutter/ephemeral/.symlinks/plugins/macos_window_utils/macos`) - path_provider_foundation (from `Flutter/ephemeral/.symlinks/plugins/path_provider_foundation/darwin`) + - url_launcher_macos (from `Flutter/ephemeral/.symlinks/plugins/url_launcher_macos/macos`) EXTERNAL SOURCES: FlutterMacOS: @@ -23,12 +26,15 @@ EXTERNAL SOURCES: :path: Flutter/ephemeral/.symlinks/plugins/macos_window_utils/macos path_provider_foundation: :path: Flutter/ephemeral/.symlinks/plugins/path_provider_foundation/darwin + url_launcher_macos: + :path: Flutter/ephemeral/.symlinks/plugins/url_launcher_macos/macos SPEC CHECKSUMS: FlutterMacOS: 8f6f14fa908a6fb3fba0cd85dbd81ec4b251fb24 macos_ui: 6229a8922cd97bafb7d9636c8eb8dfb0744183ca macos_window_utils: 933f91f64805e2eb91a5bd057cf97cd097276663 path_provider_foundation: eaf5b3e458fc0e5fbb9940fb09980e853fe058b8 + url_launcher_macos: d2691c7dd33ed713bf3544850a623080ec693d95 PODFILE CHECKSUM: ff0a9a3ce75ee73f200ca7e2f47745698c917ef9 diff --git a/example/pubspec.lock b/example/pubspec.lock index 8872a184..7e7d770a 100644 --- a/example/pubspec.lock +++ b/example/pubspec.lock @@ -99,6 +99,11 @@ packages: description: flutter source: sdk version: "0.0.0" + flutter_web_plugins: + dependency: transitive + description: flutter + source: sdk + version: "0.0.0" google_fonts: dependency: "direct main" description: @@ -145,7 +150,7 @@ packages: path: ".." relative: true source: path - version: "2.0.0-beta.9" + version: "2.0.0-beta.10" macos_window_utils: dependency: transitive description: @@ -335,6 +340,70 @@ packages: url: "https://pub.dev" source: hosted version: "1.3.2" + url_launcher: + dependency: "direct main" + description: + name: url_launcher + sha256: "781bd58a1eb16069412365c98597726cd8810ae27435f04b3b4d3a470bacd61e" + url: "https://pub.dev" + source: hosted + version: "6.1.12" + url_launcher_android: + dependency: transitive + description: + name: url_launcher_android + sha256: "15f5acbf0dce90146a0f5a2c4a002b1814a6303c4c5c075aa2623b2d16156f03" + url: "https://pub.dev" + source: hosted + version: "6.0.36" + url_launcher_ios: + dependency: transitive + description: + name: url_launcher_ios + sha256: "9af7ea73259886b92199f9e42c116072f05ff9bea2dcb339ab935dfc957392c2" + url: "https://pub.dev" + source: hosted + version: "6.1.4" + url_launcher_linux: + dependency: transitive + description: + name: url_launcher_linux + sha256: "207f4ddda99b95b4d4868320a352d374b0b7e05eefad95a4a26f57da413443f5" + url: "https://pub.dev" + source: hosted + version: "3.0.5" + url_launcher_macos: + dependency: transitive + description: + name: url_launcher_macos + sha256: "1c4fdc0bfea61a70792ce97157e5cc17260f61abbe4f39354513f39ec6fd73b1" + url: "https://pub.dev" + source: hosted + version: "3.0.6" + url_launcher_platform_interface: + dependency: transitive + description: + name: url_launcher_platform_interface + sha256: bfdfa402f1f3298637d71ca8ecfe840b4696698213d5346e9d12d4ab647ee2ea + url: "https://pub.dev" + source: hosted + version: "2.1.3" + url_launcher_web: + dependency: transitive + description: + name: url_launcher_web + sha256: cc26720eefe98c1b71d85f9dc7ef0cada5132617046369d9dc296b3ecaa5cbb4 + url: "https://pub.dev" + source: hosted + version: "2.0.18" + url_launcher_windows: + dependency: transitive + description: + name: url_launcher_windows + sha256: "7967065dd2b5fccc18c653b97958fdf839c5478c28e767c61ee879f4e7882422" + url: "https://pub.dev" + source: hosted + version: "3.0.7" vector_math: dependency: transitive description: diff --git a/example/pubspec.yaml b/example/pubspec.yaml index 79564134..0a008b51 100644 --- a/example/pubspec.yaml +++ b/example/pubspec.yaml @@ -15,6 +15,7 @@ dependencies: path: .. provider: ^6.0.5 google_fonts: ^5.1.0 + url_launcher: ^6.1.12 dev_dependencies: flutter_test: diff --git a/lib/src/buttons/push_button.dart b/lib/src/buttons/push_button.dart index 4fa2258a..19180016 100644 --- a/lib/src/buttons/push_button.dart +++ b/lib/src/buttons/push_button.dart @@ -324,8 +324,7 @@ class PushButtonState extends State ? const Color.fromRGBO(255, 255, 255, 0.25) : const Color.fromRGBO(0, 0, 0, 0.25); - final baseStyle = - theme.typography.headline.copyWith(color: foregroundColor); + final baseStyle = theme.typography.body.copyWith(color: foregroundColor); return MouseRegion( cursor: widget.mouseCursor!, diff --git a/lib/src/layout/scaffold.dart b/lib/src/layout/scaffold.dart index 2df5a94d..59678372 100644 --- a/lib/src/layout/scaffold.dart +++ b/lib/src/layout/scaffold.dart @@ -1,5 +1,6 @@ import 'dart:math' as math; +import 'package:flutter/foundation.dart'; import 'package:flutter/rendering.dart'; import 'package:macos_ui/macos_ui.dart'; import 'package:macos_ui/src/library.dart'; @@ -63,7 +64,7 @@ class _MacosScaffoldState extends State { ); final MacosThemeData theme = MacosTheme.of(context); - late Color backgroundColor = widget.backgroundColor ?? theme.canvasColor; + Color backgroundColor = widget.backgroundColor ?? theme.canvasColor; return LayoutBuilder( builder: (context, constraints) { @@ -76,19 +77,34 @@ class _MacosScaffoldState extends State { return Stack( children: [ - // Background color - Positioned.fill( - child: ColoredBox(color: backgroundColor), - ), - - // Content Area - Positioned( - top: 0, - width: width, - height: height, - child: WallpaperTintedArea( - backgroundColor: backgroundColor, - insertRepaintBoundary: true, + if (!kIsWeb) ...[ + // Content Area + Positioned( + top: 0, + width: width, + height: height, + child: WallpaperTintedArea( + backgroundColor: backgroundColor, + insertRepaintBoundary: true, + child: MediaQuery( + data: mediaQuery.copyWith( + padding: EdgeInsets.only(top: topPadding), + ), + child: _ScaffoldBody(children: children), + ), + ), + ), + ] else ...[ + // Background color + Positioned.fill( + child: ColoredBox(color: backgroundColor), + ), + + // Content Area + Positioned( + top: 0, + width: width, + height: height, child: MediaQuery( data: mediaQuery.copyWith( padding: EdgeInsets.only(top: topPadding), @@ -96,7 +112,7 @@ class _MacosScaffoldState extends State { child: _ScaffoldBody(children: children), ), ), - ), + ], // Toolbar if (widget.toolBar != null) diff --git a/lib/src/layout/toolbar/toolbar.dart b/lib/src/layout/toolbar/toolbar.dart index bad588c8..efd62e3c 100644 --- a/lib/src/layout/toolbar/toolbar.dart +++ b/lib/src/layout/toolbar/toolbar.dart @@ -223,13 +223,10 @@ class _ToolBarState extends State { title = SizedBox( width: widget.titleWidth, child: DefaultTextStyle( - style: MacosTheme.of(context).typography.headline.copyWith( - fontSize: 15, - fontWeight: FontWeight.w600, - color: theme.brightness.isDark - ? const Color(0xFFEAEAEA) - : const Color(0xFF4D4D4D), - ), + style: theme.typography.title3.copyWith( + fontSize: 15, + fontWeight: MacosFontWeight.w590, + ), child: title, ), ); @@ -266,7 +263,7 @@ class _ToolBarState extends State { ), ), child: _WallpaperTintedAreaOrBlurFilter( - enableWallpaperTintedArea: !widget.enableBlur, + enableWallpaperTintedArea: kIsWeb ? false : !widget.enableBlur, isWidgetVisible: widget.allowWallpaperTintingOverrides, backgroundColor: theme.canvasColor, widgetOpacity: widget.decoration?.color?.opacity, diff --git a/lib/src/layout/window.dart b/lib/src/layout/window.dart index 4d8b4cf5..85c20417 100644 --- a/lib/src/layout/window.dart +++ b/lib/src/layout/window.dart @@ -265,12 +265,65 @@ class _MacosWindowState extends State { minHeight: height, maxHeight: height, ).normalize(), - child: TransparentMacOSSidebar( + child: kIsWeb ? ColoredBox( + color: theme.canvasColor, + child: Column( + children: [ + // If an app is running on macOS, apply + // sidebar.topOffset as needed in order to avoid the + // traffic lights. Otherwise, position the sidebar + // by the top of the application's bounds based on + // the presence of sidebar.top. + if (!kIsWeb && sidebar.topOffset > 0) ...[ + SizedBox(height: sidebar.topOffset), + ] else if (sidebar.top != null) ...[ + const SizedBox(height: 12), + ] else + const SizedBox.shrink(), + if (_sidebarScrollController.hasClients && + _sidebarScrollController.offset > 0.0) + Divider(thickness: 1, height: 1, color: dividerColor), + if (sidebar.top != null && constraints.maxHeight > 81) + Padding( + padding: + const EdgeInsets.symmetric(horizontal: 8.0), + child: sidebar.top!, + ), + Expanded( + child: MacosScrollbar( + controller: _sidebarScrollController, + child: Padding( + padding: sidebar.padding, + child: sidebar.builder( + context, + _sidebarScrollController, + ), + ), + ), + ), + if (sidebar.bottom != null && + constraints.maxHeight > 141) + Padding( + padding: const EdgeInsets.all(16.0), + child: sidebar.bottom!, + ), + ], + ), + ) : TransparentMacOSSidebar( state: sidebarState, child: Column( children: [ - if ((sidebar.topOffset) > 0) + // If an app is running on macOS, apply + // sidebar.topOffset as needed in order to avoid the + // traffic lights. Otherwise, position the sidebar + // by the top of the application's bounds based on + // the presence of sidebar.top. + if (!kIsWeb && sidebar.topOffset > 0) ...[ SizedBox(height: sidebar.topOffset), + ] else if (sidebar.top != null) ...[ + const SizedBox(height: 12), + ] else + const SizedBox.shrink(), if (_sidebarScrollController.hasClients && _sidebarScrollController.offset > 0.0) Divider(thickness: 1, height: 1, color: dividerColor), diff --git a/lib/src/theme/macos_theme.dart b/lib/src/theme/macos_theme.dart index 0cae2b9a..87405882 100644 --- a/lib/src/theme/macos_theme.dart +++ b/lib/src/theme/macos_theme.dart @@ -217,11 +217,8 @@ class MacosThemeData with Diagnosticable { canvasColor ??= isDark ? const Color.fromRGBO(40, 40, 40, 1.0) : const Color.fromRGBO(246, 246, 246, 1.0); - typography ??= MacosTypography( - color: _brightness == Brightness.light - ? CupertinoColors.black - : CupertinoColors.white, - ); + typography ??= + isDark ? MacosTypography.lightOpaque() : MacosTypography.darkOpaque(); pushButtonTheme ??= PushButtonThemeData( color: primaryColor, secondaryColor: diff --git a/lib/src/theme/typography.dart b/lib/src/theme/typography.dart index 2462208b..7b2f72a7 100644 --- a/lib/src/theme/typography.dart +++ b/lib/src/theme/typography.dart @@ -18,8 +18,8 @@ const _kDefaultFontFamily = '.AppleSystemUIFont'; class MacosTypography with Diagnosticable { /// Creates a typography that uses the given values. /// - /// Rather than creating a new typography, consider using [MacosTypography.black] - /// or [MacosTypography.white]. + /// Rather than creating a new typography, consider using [MacosTypography.darkOpaque] + /// or [MacosTypography.lightOpaque]. /// /// If you do decide to create your own typography, consider using one of /// those predefined themes as a starting point for [copyWith]. @@ -67,18 +67,11 @@ class MacosTypography with Diagnosticable { ); headline ??= TextStyle( fontFamily: _kDefaultFontFamily, - fontWeight: FontWeight.w400, + fontWeight: FontWeight.w700, fontSize: 13, letterSpacing: -0.08, color: color, ); - subheadline ??= TextStyle( - fontFamily: _kDefaultFontFamily, - fontWeight: FontWeight.w400, - fontSize: 11, - letterSpacing: 0.06, - color: color, - ); body ??= TextStyle( fontFamily: _kDefaultFontFamily, fontWeight: FontWeight.w400, @@ -92,6 +85,13 @@ class MacosTypography with Diagnosticable { fontSize: 12, color: color, ); + subheadline ??= TextStyle( + fontFamily: _kDefaultFontFamily, + fontWeight: FontWeight.w400, + fontSize: 11, + letterSpacing: 0.06, + color: color, + ); footnote ??= TextStyle( fontFamily: _kDefaultFontFamily, fontWeight: FontWeight.w400, @@ -108,7 +108,7 @@ class MacosTypography with Diagnosticable { ); caption2 ??= TextStyle( fontFamily: _kDefaultFontFamily, - fontWeight: FontWeight.w400, + fontWeight: MacosFontWeight.w510, fontSize: 10, letterSpacing: 0.12, color: color, @@ -142,9 +142,9 @@ class MacosTypography with Diagnosticable { required this.caption2, }); - static final MacosTypography black = + factory MacosTypography.darkOpaque() => MacosTypography(color: MacosColors.labelColor.color); - static final MacosTypography white = + factory MacosTypography.lightOpaque() => MacosTypography(color: MacosColors.labelColor.darkColor); /// Style used for body text. @@ -240,7 +240,7 @@ class MacosTypography with Diagnosticable { @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); - final defaultStyle = MacosTypography.black; + final defaultStyle = MacosTypography.darkOpaque(); properties.add(DiagnosticsProperty( 'largeTitle', largeTitle, diff --git a/lib/src/utils.dart b/lib/src/utils.dart index b99c1796..1f2d8a1e 100644 --- a/lib/src/utils.dart +++ b/lib/src/utils.dart @@ -1,5 +1,6 @@ import 'dart:io'; +import 'package:flutter/foundation.dart'; import 'package:macos_ui/macos_ui.dart'; import 'package:macos_ui/src/library.dart'; @@ -77,13 +78,9 @@ class MacOSBrightnessOverrideHandler { /// [currentBrightness] differs from the value it had when this method was /// previously called. Therefore, it is safe to call this method frequently. static void ensureMatchingBrightness(Brightness currentBrightness) { - if (!Platform.isMacOS) { - return; - } - - if (currentBrightness == _lastBrightness) { - return; - } + if (kIsWeb) return; + if (!Platform.isMacOS) return; + if (currentBrightness == _lastBrightness) return; WindowManipulator.overrideMacOSBrightness(dark: currentBrightness.isDark); _lastBrightness = currentBrightness; diff --git a/pubspec.yaml b/pubspec.yaml index c14c5d6b..e76d7bfb 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: macos_ui description: Flutter widgets and themes implementing the current macOS design language. -version: 2.0.0-beta.9 +version: 2.0.0-beta.10 homepage: "https://macosui.dev" repository: "https://github.com/GroovinChip/macos_ui"