CINXE.COM

<!DOCTYPE html> <html lang="en-us"><head><script src="https://www.googletagmanager.com/gtm.js?id=GTM-MX6DBN9" async="async"></script><script src="/static/hash-j60jq2j3/js/gtm.js" async="async"></script><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1"/><meta name="twitter:card" content="summary"/><meta name="twitter:site" content="@dart_lang"/><meta name="twitter:description" content="Flutter widgets and themes implementing the current macOS design language."/><meta name="twitter:image" content="https://pub.dev/static/hash-j60jq2j3/img/pub-dev-icon-cover-image.png"/><meta property="og:type" content="website"/><meta property="og:site_name" content="Dart packages"/><meta property="og:title" content="macos_ui | Flutter package"/><meta property="og:description" content="Flutter widgets and themes implementing the current macOS design language."/><meta property="og:image" content="https://pub.dev/static/hash-j60jq2j3/img/pub-dev-icon-cover-image.png"/><meta property="og:url" content="https://pub.dev/packages/macos_ui"/><title>macos_ui | Flutter package</title><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Google+Sans+Display:wght@400&family=Google+Sans+Text:wght@400;500;700&family=Google+Sans+Mono:wght@400;700&display=swap"/><link rel="shortcut icon" href="/static/hash-j60jq2j3/img/flutter-logo-32x32.png"/><meta rel="apple-touch-icon" href="/static/hash-j60jq2j3/img/flutter-logo-32x32.png"/><meta rel="apple-touch-icon-precomposed" href="/static/hash-j60jq2j3/img/flutter-logo-32x32.png"/><link rel="stylesheet" href="https://www.gstatic.com/glue/v25_0/ccb.min.css"/><link rel="search" type="application/opensearchdescription+xml" title="Dart packages" href="/osd.xml"/><link rel="canonical" href="https://pub.dev/packages/macos_ui"/><meta name="description" content="Flutter widgets and themes implementing the current macOS design language."/><link rel="alternate" type="application/atom+xml" title="Updated Packages Feed for Pub" href="/feed.atom"/><link rel="stylesheet" type="text/css" href="/static/hash-j60jq2j3/material/bundle/styles.css"/><link rel="stylesheet" type="text/css" href="/static/hash-j60jq2j3/css/style.css"/><script src="/static/hash-j60jq2j3/material/bundle/script.min.js" defer="defer"></script><script src="/static/hash-j60jq2j3/js/script.dart.js" defer="defer"></script><script src="https://www.gstatic.com/brandstudio/kato/cookie_choice_component/cookie_consent_bar.v3.js" defer="defer" data-autoload-cookie-consent-bar="true"></script><meta name="pub-page-data" content="eyJwa2dEYXRhIjp7InBhY2thZ2UiOiJtYWNvc191aSIsInZlcnNpb24iOiIyLjEuMTAiLCJsaWtlcyI6OTUxLCJwdWJsaXNoZXJJZCI6Im1hY29zdWkuZGV2IiwiaXNEaXNjb250aW51ZWQiOmZhbHNlLCJpc0xhdGVzdCI6dHJ1ZX0sInNlc3Npb25Bd2FyZSI6ZmFsc2V9"/><link rel="preload" href="/static/hash-j60jq2j3/highlight/highlight-with-init.js" as="script"/></head><body class="light-theme"><script src="/static/hash-j60jq2j3/js/dark-init.js"></script><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><div class="site-header"><button class="hamburger" aria-label="menu toggle"></button><a class="logo" href="/" aria-label="Go to the landing page of pub.dev"><img class="site-logo" src="/static/hash-j60jq2j3/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/></a><div class="site-header-space"></div><div class="site-header-mask"></div><div class="site-header-search"><form action="/packages" method="GET"><input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search"/></form></div><nav class="site-header-nav scroll-container"><div class="nav-login-container"><button id="-account-login" class="nav-main-button link">Sign in</button></div><div class="nav-container nav-help-container hoverable"><button class="nav-main-button">Help</button><div class="nav-hover-popup"><div class="nav-table-columns"><div class="nav-table-column"><h3>pub.dev</h3><a class="nav-link" href="/help/search" rel="noopener" target="_blank">Searching for packages</a><a class="nav-link" href="/help/scoring" rel="noopener" target="_blank">Package scoring and pub points</a></div><div class="nav-table-column"><h3>Flutter</h3><a class="nav-link" href="https://flutter.dev/using-packages/" rel="noopener" target="_blank">Using packages</a><a class="nav-link" href="https://flutter.dev/developing-packages/" rel="noopener" target="_blank">Developing packages and plugins</a><a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a></div><div class="nav-table-column"><h3>Dart</h3><a class="nav-link" href="https://dart.dev/guides/packages" rel="noopener" target="_blank">Using packages</a><a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a></div></div></div></div><div class="nav-container nav-help-container-mobile foldable"><h3 class="foldable-button">pub.dev <img class="foldable-icon" src="/static/hash-j60jq2j3/img/nav-mobile-foldable-icon.svg" alt="toggle folding of the section" width="13" height="6"/></h3><div class="foldable-content"><a class="nav-link" href="/help/search" rel="noopener" target="_blank">Searching for packages</a><a class="nav-link" href="/help/scoring" rel="noopener" target="_blank">Package scoring and pub points</a></div></div><div class="nav-container nav-help-container-mobile foldable"><h3 class="foldable-button">Flutter <img class="foldable-icon" src="/static/hash-j60jq2j3/img/nav-mobile-foldable-icon.svg" alt="toggle folding of the section" width="13" height="6"/></h3><div class="foldable-content"><a class="nav-link" href="https://flutter.dev/using-packages/" rel="noopener" target="_blank">Using packages</a><a class="nav-link" href="https://flutter.dev/developing-packages/" rel="noopener" target="_blank">Developing packages and plugins</a><a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a></div></div><div class="nav-container nav-help-container-mobile foldable"><h3 class="foldable-button">Dart <img class="foldable-icon" src="/static/hash-j60jq2j3/img/nav-mobile-foldable-icon.svg" alt="toggle folding of the section" width="13" height="6"/></h3><div class="foldable-content"><a class="nav-link" href="https://dart.dev/guides/packages" rel="noopener" target="_blank">Using packages</a><a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a></div></div></nav><button class="-pub-theme-toggle" aria-label="light/dark theme toggle"></button></div><div id="banner-container"></div><main class="container"><div class="detail-wrapper -active -has-info-box"><div class="detail-banners"><a href="https://flutter.dev/docs/development/packages-and-plugins/favorites" rel="noopener" target="_blank" title="Package is a Flutter Favorite"><img class="ff-banner ff-banner-desktop displayed-in-light-theme" src="/static/hash-j60jq2j3/img/ff-banner-desktop-2x.png" alt="" width="150" height="218" role="presentation"/><img class="ff-banner ff-banner-desktop displayed-in-dark-theme" src="/static/hash-j60jq2j3/img/ff-banner-desktop-dark-2x.png" alt="" width="150" height="218" role="presentation"/><img class="ff-banner ff-banner-mobile displayed-in-light-theme" src="/static/hash-j60jq2j3/img/ff-banner-mobile-2x.png" alt="" width="94" height="116" role="presentation"/><img class="ff-banner ff-banner-mobile displayed-in-dark-theme" src="/static/hash-j60jq2j3/img/ff-banner-mobile-dark-2x.png" alt="" width="94" height="116" role="presentation"/></a></div><div class="detail-header -is-loose"><div class="detail-container"><div class="detail-header-outer-block"><div class="detail-header-content-block"><h1 class="title pub-monochrome-icon-hoverable">macos_ui 2.1.10 <span class="pkg-page-title-copy"><img class="pub-monochrome-icon pkg-page-title-copy-icon filter-invert-on-dark" src="/static/hash-j60jq2j3/img/content-copy-icon.svg" alt="copy "macos_ui: ^2.1.10" to clipboard" width="18" height="18" title="Copy "macos_ui: ^2.1.10" to clipboard" data-copy-content="macos_ui: ^2.1.10" data-ga-click-event="copy-package-version"/><div class="pkg-page-title-copy-feedback"><span class="code">macos_ui: ^2.1.10</span> copied to clipboard</div></span></h1><div class="metadata">Published <span><a class="-x-ago" href="" title="Mar 3, 2025" role="button" data-timestamp="1741013209542">33 days ago</a></span> • <a class="-pub-publisher" href="/publishers/macosui.dev"><img class="-pub-publisher-shield filter-invert-on-dark" src="/static/hash-j60jq2j3/img/material-icon-verified.svg" alt="verified publisher" width="14" height="14" title="Published by a pub.dev verified publisher"/>macosui.dev</a><span class="package-badge" title="Package is compatible with Dart 3.">Dart 3 compatible</span></div><div class="detail-tags-and-like"><div class="detail-tags"><div class="-pub-tag-badge"><span class="tag-badge-main">SDK</span><a class="tag-badge-sub" href="/packages?q=sdk%3Aflutter" rel="nofollow" title="Packages compatible with Flutter SDK">Flutter</a></div><div class="-pub-tag-badge"><span class="tag-badge-main">Platform</span><a class="tag-badge-sub" href="/packages?q=platform%3Amacos" rel="nofollow" title="Packages compatible with macOS platform">macOS</a></div></div><div class="detail-like"><button id="-pub-like-icon-button" class="mdc-icon-button" data-ga-click-event="toggle-like" aria-pressed="false" title="Like this package"><img class="mdc-icon-button__icon" src="/static/hash-j60jq2j3/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/><img class="mdc-icon-button__icon mdc-icon-button__icon--on" src="/static/hash-j60jq2j3/img/like-active.svg" alt="liked status: active" width="18" height="18"/></button><span class="likes-count"><span id="likes-count">951</span></span></div></div></div></div></div></div><div class="detail-container"><div class="detail-lead"><div class="detail-metadata-toggle"><div class="detail-metadata-toggle-icon">→</div><h3 class="detail-lead-title">Metadata</h3></div><p class="detail-lead-text">Flutter widgets and themes implementing the current macOS design language.</p><p class="detail-lead-more"><a class="detail-metadata-toggle">More...</a></p></div></div><div class="detail-body"><div class="detail-tabs"><div class="detail-tabs-wide-header"><div class="detail-container"><ul class="detail-tabs-header"><li class="detail-tab tab-button detail-tab-readme-title -active">Readme</li><li class="detail-tab tab-link detail-tab-changelog-title"><a href="/packages/macos_ui/changelog" role="button">Changelog</a></li><li class="detail-tab tab-link detail-tab-example-title"><a href="/packages/macos_ui/example" role="button">Example</a></li><li class="detail-tab tab-link detail-tab-installing-title"><a href="/packages/macos_ui/install" role="button">Installing</a></li><li class="detail-tab tab-link detail-tab-versions-title"><a href="/packages/macos_ui/versions" role="button">Versions</a></li><li class="detail-tab tab-link detail-tab-analysis-title"><a href="/packages/macos_ui/score" role="button">Scores</a></li></ul></div></div><div class="detail-container detail-body-main"><div class="detail-tabs-content"><section class="tab-content detail-tab-readme-content -active markdown-body"><h1 id="macos_ui" class="hash-header">macos_ui <a href="#macos_ui" class="hash-link">#</a></h1> <p>Flutter widgets and themes implementing the current macOS design language.</p> <p>Check out our <strong>interactive widget gallery</strong> online at <a href="https://macosui.github.io/macos_ui/#/" rel="ugc">https://macosui.github.io/macos_ui/#/</a></p> <p>Guides, codelabs, and other documentation can be found at <a href="https://macosui.dev" rel="ugc">https://macosui.dev</a></p> <p><a href="https://pub.dev/packages/macos_ui"><img src="https://img.shields.io/pub/v/macos_ui.svg" alt="pub package"></a> <a href="https://pub.dev/packages/macos_ui"><img src="https://img.shields.io/pub/publisher/macos_ui.svg" alt="pub package"></a></p> <p><a href="https://github.com/GroovinChip/macos_ui/actions/workflows/flutter_analysis.yml" rel="ugc"><img src="https://github.com/GroovinChip/macos_ui/actions/workflows/flutter_analysis.yml/badge.svg?branch=stable" alt="Flutter Analysis"></a> <a href="https://github.com/GroovinChip/macos_ui/actions/workflows/pana_analysis.yml" rel="ugc"><img src="https://github.com/GroovinChip/macos_ui/actions/workflows/pana_analysis.yml/badge.svg" alt="Pana Analysis"></a> <a href="https://github.com/GroovinChip/macos_ui/actions/workflows/codecov.yaml" rel="ugc"><img src="https://github.com/GroovinChip/macos_ui/actions/workflows/codecov.yaml/badge.svg" alt="codecov"></a> <a href="https://codecov.io/gh/macosui/macos_ui" rel="ugc"><img src="https://codecov.io/gh/macosui/macos_ui/branch/dev/graph/badge.svg?token=1SZGEVVMCH" alt="codecov"></a></p> <img src="https://imgur.com/44iJB7H.png" width="75%"> <h2 id="-usage-notes" class="hash-header">🚨 Usage notes <a href="#-usage-notes" class="hash-link">#</a></h2> <h3 id="img-srchttpsstoragegoogleapiscomcms-storage-bucket0dbfcc7a59cd1cf16282png-height14-flutter-channel" class="hash-header"><img src="https://storage.googleapis.com/cms-storage-bucket/0dbfcc7a59cd1cf16282.png" height="14"> Flutter channel <a href="#img-srchttpsstoragegoogleapiscomcms-storage-bucket0dbfcc7a59cd1cf16282png-height14-flutter-channel" class="hash-link">#</a></h3> <p><code>macos_ui</code> is developed against Flutter's <code>stable</code> channel. To ensure a smooth development experience with <code>macos_ui</code>, you should build your application on Flutter's <code>stable</code> channel.</p> <h3 id="img-srchttpsstoragegoogleapiscomcms-storage-bucket0dbfcc7a59cd1cf16282png-height14-platform-compatibility" class="hash-header"><img src="https://storage.googleapis.com/cms-storage-bucket/0dbfcc7a59cd1cf16282.png" height="14"> Platform Compatibility <a href="#img-srchttpsstoragegoogleapiscomcms-storage-bucket0dbfcc7a59cd1cf16282png-height14-platform-compatibility" class="hash-link">#</a></h3> <p>pub.dev shows that <code>macos_ui</code> only supports macOS. This is because <code>macos_ui</code> calls some native code, and therefore specifies macOS as a plugin platform in the <code>pubspec.yaml</code> file.</p> <p><code>macos_ui</code> <em>technically</em> will work on any platform that Flutter supports, <strong>but you will get best results on macOS</strong>. non-macOS platform support is <em><strong>not</strong></em> guaranteed.</p> <p>The features of <code>macos_ui</code> that will <em>not</em> work on platforms other than macOS due to calling native code are:</p> <ul> <li>Anything related to <code>macos_window_utils</code></li> <li>The <code>MacosColors.controlAccentColor()</code> function</li> <li>The <code>MacosColorWell</code> widget</li> </ul> <h3 id="img-srchttpsimgurcomtip0v7hpng-height14-popups--window-resizing" class="hash-header"><img src="https://imgur.com/TIP0V7H.png" height="14"> Popups & window resizing <a href="#img-srchttpsimgurcomtip0v7hpng-height14-popups--window-resizing" class="hash-link">#</a></h3> <p>Since at this time Flutter does not allow UI elements to overflow the bounds of the window, popups are constrained to the available space.</p> <p>Therefore, if you are using widgets that create popups in your toolbar, like <code>ToolBarPopupButton</code>, you should avoid allowing your application window to be resized below the height of your tallest popup.</p> <h2 id="contents" class="hash-header">Contents <a href="#contents" class="hash-link">#</a></h2> <details> <summary>Contributing & Resources</summary> <ul> <li><a href="#contributing">Contributing</a></li> <li><a href="#resources">Resources</a></li> </ul> </details> <details> <summary>Layout</summary> <ul> <li><a href="#layout">Layout</a> <ul> <li><a href="#macoswindow">MacosWindow</a></li> <li><a href="#sidebar">Sidebar</a></li> <li><a href="#macosscaffold">MacosScaffold</a></li> <li><a href="#modern-window-look">Modern Window Look</a></li> <li><a href="#toolbar">ToolBar</a></li> <li><a href="#SliverToolBar">SliverToolBar</a></li> <li><a href="#MacosListTile">MacosListTile</a></li> <li><a href="#MacosTabView">MacosTabView</a></li> </ul> </li> </ul> </details> <details> <summary>Icons</summary> <ul> <li><a href="#icons">Icons</a> <ul> <li><a href="#MacosIcon">MacosIcon</a></li> </ul> </li> </ul> </details> <details> <summary>Buttons</summary> <ul> <li><a href="#buttons">Buttons</a> <ul> <li><a href="#macoscheckbox">MacosCheckbox</a></li> <li><a href="#helpbutton">HelpButton</a></li> <li><a href="#radiobutton">RadioButton</a></li> <li><a href="#pulldownbutton">PulldownButton</a></li> <li><a href="#popupbutton">PopupButton</a></li> <li><a href="#pushbutton">PushButton</a></li> <li><a href="#macosswitch">MacosSwitch</a></li> <li><a href="#macossegmentedcontrol">MacosSegmentedControl</a></li> </ul> </li> </ul> </details> <details> <summary>Dialogs & Sheets</summary> <ul> <li><a href="#dialogs">Dialogs & Sheets</a> <ul> <li><a href="#MacosAlertDialog">MacosAlertDialog</a></li> <li><a href="#MacosSheet">MacosSheet</a></li> </ul> </li> </ul> </details> <details> <summary>Fields & Labels</summary> <ul> <li><a href="#fields">Fields</a> <ul> <li><a href="#macostextfield">MacosTextField</a></li> <li><a href="#macossearchfield">MacosSearchField</a></li> </ul> </li> <li><a href="#labels">Labels</a> <ul> <li><a href="#macostooltip">MacosTooltip</a></li> </ul> </li> </ul> </details> <details> <summary>Indicators</summary> <ul> <li><a href="#indicators">Indicators</a> <ul> <li><a href="#progress-indicators">Progress Indicators</a> <ul> <li><a href="#progresscircle">ProgressCircle</a></li> <li><a href="#progressbar">ProgressBar</a></li> </ul> </li> <li><a href="#level-indicators">Level Indicators</a> <ul> <li><a href="#capacityindicator">CapacityIndicator</a></li> <li><a href="#ratingindicator">RatingIndicator</a></li> </ul> </li> </ul> </li> </ul> </details> <details> <summary>Selectors</summary> <ul> <li><a href="#selectors">Selectors</a> <ul> <li><a href="#macosdatepicker">MacosDatePicker</a></li> <li><a href="#macostimepicker">MacosTimePicker</a></li> <li><a href="#macoscolorwell">MacosColorWell</a></li> </ul> </li> </ul> </details> <details> <summary>Older macOS versions</summary> <ul> <li><a href="#older-macos-versions">Older macOS versions</a></li> </ul> </details> <hr> <h2 id="contributing" class="hash-header">Contributing <a href="#contributing" class="hash-link">#</a></h2> <p><code>macos_ui</code> welcomes contributions! Please see <code>CONTRIBUTING.md</code> for more information.</p> <h2 id="resources" class="hash-header">Resources <a href="#resources" class="hash-link">#</a></h2> <ul> <li><a href="https://www.figma.com/file/M6K5L3GK0WJh6pnsASyVeE/macOS-Big-Sur-UI-Kit?node-id=1%3A2" rel="ugc">macOS Sonoma Figma kit</a></li> <li><a href="https://developer.apple.com/design/human-interface-guidelines/designing-for-macos" rel="ugc">macOS Human Interface Guidelines</a></li> <li><a href="https://developer.apple.com/design/resources/" rel="ugc">macOS Design Resources</a></li> </ul> <h1 id="layout" class="hash-header">Layout <a href="#layout" class="hash-link">#</a></h1> <h2 id="macoswindow" class="hash-header">MacosWindow <a href="#macoswindow" class="hash-link">#</a></h2> <p><code>MacosWindow</code> is the basic frame for a macOS-style layout.</p> <img src="https://imgur.com/olstQFC.png" width="40%"> <img src="https://imgur.com/yFXsoSy.png" width="40%"> <p>It supports a <code>Sidebar</code> on the left, an optional <code>TitleBar</code> at the top, and the rest of the window is typically filled out with a <code>MacosScaffold</code>.</p> <p>A scope for the <code>MacosWindow</code> is provided by <code>MacosWindowScope</code>. The sidebar can be toggled with <code>MacosWindowScope.of(context).toggleSidebar()</code>. <strong>Please note</strong> that you must wrap your <code>MacosScaffold</code> in a <code>Builder</code> widget in order for this to work properly.</p> <img src="https://imgur.com/IBbp5rN.gif" width="75%"> <h2 id="sidebar" class="hash-header">Sidebar <a href="#sidebar" class="hash-link">#</a></h2> <p>A sidebar enables app navigation and provides quick access to top-level collections of content in your app.</p> <p>Sidebars may be placed at the left or right of your app. To place a sidebar on the left, use the <code>MacosWindow.sidebar</code> property. To place a sidebar on the right, use the <code>MacosWindow.endSidebar</code> property.</p> <img src="https://imgur.com/BfoHcXE.png" width="75%"> <p>Example usage:</p> <pre><code class="language-dart">int pageIndex = 0; ... 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'), ); }, ), ), </code></pre> <h2 id="macosscaffold" class="hash-header">MacosScaffold <a href="#macosscaffold" class="hash-link">#</a></h2> <p>The <code>MacosScaffold</code> is what you might call a "page".</p> <p>The scaffold has a <code>toolbar</code> property and a <code>children</code> property. <code>children</code> accepts a <code>ContentArea</code> widget and multiple <code>ResizablePane</code> widgets. To catch navigation or routes below the scaffold, consider wrapping the <code>MacosScaffold</code> in a <a href="https://api.flutter.dev/flutter/cupertino/CupertinoTabView-class.html"><code>CupertinoTabView</code></a>. By doing so, navigation inside the <code>MacosScaffold</code> will be displayed inside the <code>MacosScaffold</code> area instead of covering the entire window. To push a route outside a <code>MacosScaffold</code> wrapped in a <a href="https://api.flutter.dev/flutter/cupertino/CupertinoTabView-class.html"><code>CupertinoTabView</code></a>, use the root navigator <code>Navigator.of(context, rootNavigator: true)</code></p> <p>See the documentation for customizations and <code>ToolBar</code> examples.</p> <img src="https://imgur.com/ePV2x2p.png" width="75%"> <img src="https://imgur.com/76fpFE2.png" width="75%"> <h2 id="modern-window-look" class="hash-header">Modern window look <a href="#modern-window-look" class="hash-link">#</a></h2> <p>A new look for macOS apps was introduced in Big Sur (macOS 11). To match that look in your Flutter app, macos_ui relies on <a href="https://pub.dev/packages/macos_window_utils">macos_window_utils</a>, which requires a minimum macOS deployment target of 10.14.6. Therefore, make sure to open the <code>macos/Runner.xcworkspace</code> folder of your project using Xcode and search for <code>Runner.xcodeproj</code>. Go to <code>Info</code> > <code>Deployment Target</code> and set the <code>macOS Deployment Target</code> to <code>10.14.6</code> or above. Then, open your project's <code>Podfile</code> (if it doesn't show up in Xcode, you can find it in your project's <code>macos</code> directory via VS Code) and set the minimum deployment version in the first line to <code>10.14.6</code> or above:</p> <pre><code class="language-podspec">platform :osx, '10.14.6' </code></pre> <p>You may also need to open up your app's <code>Runner.xcodeproj</code> in XCode and set the minimum deployment version there.</p> <p>Now, configure your window inside your <code>main()</code> as follows:</p> <pre><code class="language-dart">/// This method initializes macos_window_utils and styles the window. Future<void> _configureMacosWindowUtils() async { const config = MacosWindowUtilsConfig( toolbarStyle: NSWindowToolbarStyle.unified, ); await config.apply(); } void main() async { await _configureMacosWindowUtils(); runApp(const YourAppHere()); } </code></pre> <p>Please note that if you are using a title bar (<code>TitleBar</code>) in your <code>MacosWindow</code>, you should set the <code>toolbarStyle</code> of your window to <code>NSWindowToolbarStyle.expanded</code>, in order to properly align the close, minimize, zoom window buttons:</p> <pre><code class="language-dart">Future<void> _configureMacosWindowUtils() async { const config = MacosWindowUtilsConfig( toolbarStyle: NSWindowToolbarStyle.expanded, ); await config.apply(); } </code></pre> <p>In any other case, you should keep it as <code>NSWindowToolbarStyle.unified</code>.</p> <h2 id="toolbar" class="hash-header">ToolBar <a href="#toolbar" class="hash-link">#</a></h2> <p>Creates a toolbar in the <code>MacosScaffold</code>. The toolbar appears below the title bar (if present) of the macOS app or integrates with it, by using its <code>title</code> property.</p> <p>A toolbar provides convenient access to frequently used commands and features (toolbar items). Different routes of your app could have different toolbars.</p> <p>Toolbar items include <code>ToolBarIconButton</code>, <code>ToolBarPulldownButton</code>, and <code>ToolBarSpacer</code> widgets, and should be provided via the <code>items</code> property. The action of every toolbar item should also be provided as a menu bar command of your app.</p> <p>Toolbars look best and are easiest to understand when they contain elements of the same type (so either use labels for every toolbar item or not).</p> <p>You can use the <code>ToolBarSpacer</code> widgets to set the grouping of the different toolbar actions.</p> <p>An example toolbar would be:</p> <pre><code class="language-dart">ToolBar( title: const Text('Untitled Document'), titleWidth: 200.0, leading: MacosBackButton( onPressed: () => debugPrint('click'), fillColor: Colors.transparent, ), actions: [ ToolBarIconButton( label: "Add", icon: const MacosIcon( CupertinoIcons.add_circled, ), onPressed: () => debugPrint("Add..."), showLabel: true, ), const ToolBarSpacer(), ToolBarIconButton( label: "Delete", icon: const MacosIcon( CupertinoIcons.trash, ), onPressed: () => debugPrint("Delete"), showLabel: false, ), ToolBarPullDownButton( label: "Actions", icon: CupertinoIcons.ellipsis_circle, items: [ MacosPulldownMenuItem( label: "New Folder", title: const Text("New Folder"), onTap: () => debugPrint("Creating new folder..."), ), MacosPulldownMenuItem( label: "Open", title: const Text("Open"), onTap: () => debugPrint("Opening..."), ), ], ), ] ), </code></pre> <p>This builds this simple toolbar: <img src="https://imgur.com/BDUdQkj.png"></p> <p>Other toolbar examples:</p> <ul> <li> <p>Toolbar with icon buttons (no labels): <img src="https://imgur.com/PtrjhPx.png"></p> </li> <li> <p>Toolbar with icon buttons and labels: <img src="https://imgur.com/Ouaud12.png"></p> </li> <li> <p>Toolbar with a pulldown button open: <img src="https://imgur.com/msGmcNY.png"></p> </li> <li> <p>Toolbar with title bar above (also see <a href="#modern-window-look">the note above</a>): <img src="https://imgur.com/eAgcsKY.png"></p> </li> </ul> <p>You can also create your own <code>CustomToolbarItem</code> to include any type of widget in the toolbar:</p> <pre><code class="language-dart">// Add a grey vertical line as a custom toolbar item: CustomToolbarItem( inToolbarBuilder: (context) => Padding( padding: const EdgeInsets.all(8.0), child: Container(color: Colors.grey, width: 1, height: 30), ), inOverflowedBuilder: (context) => Container(color: Colors.grey, width: 30, height: 1), ), </code></pre> <h2 id="slivertoolbar" class="hash-header"><code>SliverToolBar</code> <a href="#slivertoolbar" class="hash-link">#</a></h2> <img src="https://imgur.com/u4LDaxj.gif" width="75%"> <p><code>SliverToolbar</code> is a variant of the standard <code>ToolBar</code>, with the key difference being that (as the name implies), it is compatible with scrollable widgets like <code>CustomScrollView</code> and <code>NestedScrollView</code>. There are three additional properties on <code>SliverToolBar</code>:</p> <ul> <li><code>pinned</code>, which determines if the toolbar should remain visible while scrolling</li> <li><code>floating</code>, which determines if the toolbar should become visible as soon as the use starts scrolling upwards</li> <li><code>opacity</code>, which manages the translucency effect of the toolbar</li> </ul> <p>This widget enables developers to achieve the toolbar behaviors seen in Apple's App Store.</p> <p>Sample usage:</p> <pre><code class="language-dart">return CustomScrollView( controller: scrollController, slivers: [ SliverToolBar( title: const Text('SliverToolbar'), pinned: true, toolbarOpacity: 0.75, ), // Other slivers below ], ); </code></pre> <h2 id="macoslisttile" class="hash-header">MacosListTile <a href="#macoslisttile" class="hash-link">#</a></h2> <p>A widget that aims to approximate the <a href="https://api.flutter.dev/flutter/material/ListTile-class.html"><code>ListTile</code></a> widget found in Flutter's material library.</p> <p><img src="https://imgur.com/pQB99M2.png" alt="MacosListTile"></p> <p>Sample usage:</p> <pre><code class="language-dart">MacosListTile( leading: const Icon(CupertinoIcons.lightbulb), title: Text( 'A robust library of Flutter components for macOS', style: MacosTheme.of(context).typography.headline, ), subtitle: Text( 'Create native looking macOS applications using Flutter', style: MacosTheme.of(context).typography.subheadline.copyWith( color: MacosColors.systemGrayColor, ), ), ), </code></pre> <h2 id="macostabview" class="hash-header">MacosTabView <a href="#macostabview" class="hash-link">#</a></h2> <p>A multipage interface that displays one page at a time. Must be used in a <code>StatefulWidget</code>.</p> <img src="https://imgur.com/WNF1CSl.png"> <p>You can control the placement of the tabs using the <code>position</code> property.</p> <p>Usage:</p> <pre><code class="language-dart">final _controller = MacosTabController( initialIndex: 0, length: 3, ); ... MacosTabView( controller: _controller, tabs: const [ MacosTab( label: 'Tab 1', ), MacosTab( label: 'Tab 2', ), MacosTab( label: 'Tab 3', ), ], children: const [ Center( child: Text('Tab 1'), ), Center( child: Text('Tab 2'), ), Center( child: Text('Tab 3'), ), ], ), </code></pre> <h1 id="icons" class="hash-header">Icons <a href="#icons" class="hash-link">#</a></h1> <h2 id="macosicon" class="hash-header">MacosIcon <a href="#macosicon" class="hash-link">#</a></h2> <p>A <code>MacosIcon</code> is identical to a regular <code>Icon</code> in every way with one exception - it respects a <code>MacosTheme</code>. Use it the same way you would a regular icon:</p> <pre><code class="language-dart">MacosIcon( CupertinoIcons.add, // color: CupertinoColors.activeBlue.color, // size: 20, ), </code></pre> <h1 id="buttons" class="hash-header">Buttons <a href="#buttons" class="hash-link">#</a></h1> <h2 id="macoscheckbox" class="hash-header">MacosCheckbox <a href="#macoscheckbox" class="hash-link">#</a></h2> <p>A checkbox is a type of button that lets the user choose between two opposite states, actions, or values. A selected checkbox is considered on when it contains a checkmark and off when it's empty. A checkbox is almost always followed by a title unless it appears in a checklist. <a href="https://developer.apple.com/design/human-interface-guidelines/macos/buttons/checkboxes/" rel="ugc">Learn more</a></p> <table> <thead> <tr> <th>Unchecked</th> <th>Checked</th> <th>Mixed</th> </tr> </thead> <tbody> <tr> <td><img src="https://imgur.com/Pu4EDAE.png" alt="Unchecked Checkbox"></td> <td><img src="https://imgur.com/CB3Kmwo.png" alt="Checked Checkbox"></td> <td><img src="https://imgur.com/T44rV38.png" alt="Mixed Checkbox"></td> </tr> </tbody> </table> <p>Here's an example of how to create a basic checkbox:</p> <pre><code class="language-dart">bool selected = false; MacosCheckbox( value: selected, onChanged: (value) { setState(() => selected = value); }, ) </code></pre> <p>To make a checkbox in the <code>mixed</code> state, set <code>value</code> to <code>null</code>.</p> <h2 id="helpbutton" class="hash-header">HelpButton <a href="#helpbutton" class="hash-link">#</a></h2> <p>A help button appears within a view and opens app-specific help documentation when clicked. All help buttons are circular, consistently sized buttons that contain a question mark icon. <a href="https://developer.apple.com/design/human-interface-guidelines/macos/buttons/help-buttons/" rel="ugc">Learn more</a></p> <p><img src="https://imgur.com/DlP7uLV.png" alt="HelpButton Example"></p> <p>Here's an example of how to create a help button:</p> <pre><code class="language-dart">HelpButton( onPressed: () { print('pressed help button'), }, ) </code></pre> <p>You can customize the help button appearance and behaviour using the <code>HelpButtonTheme</code>, but it's not recommended by apple to change help button's appearance.</p> <h2 id="radiobutton" class="hash-header">RadioButton <a href="#radiobutton" class="hash-link">#</a></h2> <p>A radio button is a small, circular button followed by a title. Typically presented in groups of two to five, radio buttons provide the user a set of related but mutually exclusive choices. A radio button’s state is either on (a filled circle) or off (an empty circle). <a href="https://developer.apple.com/design/human-interface-guidelines/macos/buttons/radio-buttons/" rel="ugc">Learn more</a></p> <p><img src="https://imgur.com/HI0eQsU.png" alt="RadioButton Preview"></p> <p>Here's an example of how to create a basic radio button:</p> <pre><code class="language-dart">bool selected = false; MacosRadioButton( value: selected, onChanged: (value) { setState(() => selected = value); }, ), </code></pre> <h2 id="pulldownbutton" class="hash-header">PulldownButton <a href="#pulldownbutton" class="hash-link">#</a></h2> <p>A pull-down button (often referred to as a pull-down menu) is a type of pop-up button that, when clicked, displays a menu containing a list of choices. The menu appears below the button. Once the menu is displayed onscreen, it remains open until the user chooses a menu item, clicks outside of the menu, switches to another app, or quits the app; or until the system displays an alert. <a href="https://developer.apple.com/design/human-interface-guidelines/macos/buttons/pull-down-buttons/" rel="ugc">Learn more</a></p> <p>Use a pull-down button to present a list of commands. A pull-down button can either show a <code>title</code> or an <code>icon</code> to describe the contents of the button's menu. If you use an icon, make sure it clearly communicates the button’s purpose.</p> <p>If <code>items</code> is null, the button will be disabled (greyed out).</p> <p>A <code>title</code> or an <code>icon</code> must be provided, to be displayed as the pull-down button's title, but not both at the same time.</p> <p>The menu can also be navigated with the up/down keys and an action selected with the Return key.</p> <p>It can also appear in the toolbar, via the <code>ToolBarPulldownButton</code> widget.</p> <table> <thead> <tr> <th>Dark Theme</th> <th>Light Theme</th> </tr> </thead> <tbody> <tr> <td><img src="https://imgur.com/XZlsUxF.jpg"></td> <td><img src="https://imgur.com/EtrydYd.jpg"></td> </tr> <tr> <td><img src="https://imgur.com/KVX8OsR.jpg"></td> <td><img src="https://imgur.com/mTvBxyL.jpg"></td> </tr> <tr> <td><img src="https://imgur.com/k1Wm6fd.jpg"></td> <td><img src="https://imgur.com/wb08RXI.jpg"></td> </tr> </tbody> </table> <p>Here's an example of how to create a basic pull-down button:</p> <pre><code class="language-dart">MacosPulldownButton( title: "Actions", // Or provide an icon to use as title: // icon: CupertinoIcons.ellipsis_circle, items: [ MacosPulldownMenuItem( title: const Text('Save'), onTap: () => debugPrint("Saving..."), ), MacosPulldownMenuItem( title: const Text('Save as...'), onTap: () => debugPrint("Opening Save As dialog..."), ), const MacosPulldownMenuDivider(), MacosPulldownMenuItem( enabled: false, title: const Text('Export'), onTap: () => debugPrint("Exporting"), ), ], ), </code></pre> <h2 id="popupbutton" class="hash-header">PopupButton <a href="#popupbutton" class="hash-link">#</a></h2> <p>A pop-up button (often referred to as a pop-up menu) is a type of button that, when clicked, displays a menu containing a list of mutually exclusive choices. The menu appears on top of the button. Like other types of menus, a pop-up button’s menu can include separators and symbols like checkmarks. After the menu is revealed, it remains open until the user chooses a menu item, clicks outside of the menu, switches to another app, or quits the app; or until the system displays an alert. <a href="https://developer.apple.com/design/human-interface-guidelines/macos/buttons/pop-up-buttons/" rel="ugc">Learn more</a></p> <p>The type <code>T</code> of the <code>MacosPopupButton</code> is the type of the value that each pop-up menu item represents. All the entries in a given menu must represent values with consistent types. Typically, an <code>enum</code> is used. Each <code>MacosPopupMenuItem</code> in items must be specialized with that same type argument.</p> <p>The <code>onChanged</code> callback should update a state variable that defines the pop-up menu's value. It should also call <code>State.setState</code> to rebuild the pop-up button with the new value.</p> <p>When there are menu items that cannot be displayed within the available menu constraints, a caret is shown at the top or bottom of the open menu to signal that there are items that are not currently visible.</p> <p>The menu can also be navigated with the up/down keys and an item selected with the Return key.</p> <table> <thead> <tr> <th>Dark Theme</th> <th>Light Theme</th> </tr> </thead> <tbody> <tr> <td><img src="https://imgur.com/ov0kzJC.jpg"></td> <td><img src="https://imgur.com/buhYEo1.jpg"></td> </tr> <tr> <td><img src="https://imgur.com/BOEH59L.jpg"></td> <td><img src="https://imgur.com/61S7DSX.jpg"></td> </tr> <tr> <td><img src="https://imgur.com/zY0d8RF.jpg"></td> <td><img src="https://imgur.com/W4CMa5z.jpg"></td> </tr> </tbody> </table> <p>Here's an example of how to create a basic pop-up button:</p> <pre><code class="language-dart">String popupValue = 'One'; MacosPopupButton<String>( value: popupValue, onChanged: (String? newValue) { setState(() { popupValue = newValue!; }); }, items: <String>['One', 'Two', 'Three', 'Four'] .map<MacosPopupMenuItem<String>>((String value) { return MacosPopupMenuItem<String>( value: value, child: Text(value), ); }).toList(), ), </code></pre> <h2 id="pushbutton" class="hash-header">PushButton <a href="#pushbutton" class="hash-link">#</a></h2> <p>Push buttons are the standard button type in macOS. Push buttons contain text—not icons—and often open a separate window, dialog, or app so the user can complete a task. <a href="https://developer.apple.com/design/human-interface-guidelines/macos/buttons/push-buttons/" rel="ugc">Learn more</a></p> <table> <thead> <tr> <th>Dark Theme</th> <th>Light Theme</th> </tr> </thead> <tbody> <tr> <td><img src="https://imgur.com/RLg1tWu.png"></td> <td><img src="https://imgur.com/zymbEIE.png"></td> </tr> </tbody> </table> <p>ℹ️ <strong>Note</strong> ℹ️ Native push buttons can be styled as text-only, text with an icon, or icon-only. Currently, text-only push buttons are supported. To create an icon-only button, use the <code>MacosIconButton</code> widget.</p> <p>Here's an example of how to create a basic push button:</p> <pre><code class="language-dart">PushButton( child: Text('button'), controlSize: ControlSize.regular, onPressed: () { print('button pressed'); }, ), </code></pre> <h2 id="macosswitch" class="hash-header">MacosSwitch <a href="#macosswitch" class="hash-link">#</a></h2> <p>A switch (also known as a toggle) is a control that offers a binary choice between two mutually exclusive states — on and off. A switch shows that it's on when the accent color is visible and off when the switch appears colorless.</p> <p>The <code>ContolSize</code> enum can be passed to the <code>size</code> property to control the size of the switch. <code>MacosSwitch</code> supports the following control sizes:</p> <ul> <li><code>mini</code></li> <li><code>small</code></li> <li><code>regular</code></li> </ul> <table> <thead> <tr> <th>Off</th> <th>On</th> </tr> </thead> <tbody> <tr> <td><img src="https://imgur.com/bH7I0Lg.png"></td> <td><img src="https://imgur.com/uuaXiS3.png"></td> </tr> </tbody> </table> <p>Here's an example of how to create a basic toggle switch:</p> <pre><code class="language-dart">bool switchValue = false; MacosSwitch( value: switchValue, onChanged: (value) { setState(() => switchValue = value); }, ), </code></pre> <p>Learn more about switches <a href="https://developer.apple.com/design/human-interface-guidelines/toggles" rel="ugc">here</a>.</p> <h2 id="macossegmentedcontrol" class="hash-header">MacosSegmentedControl <a href="#macossegmentedcontrol" class="hash-link">#</a></h2> <p>Displays one or more navigational tabs in a single horizontal group. Used by <code>MacosTabView</code> to navigate between the different tabs of the tab bar.</p> <img src="https://imgur.com/6fIkCMr.png"> <p>The typical usage of this widget is by <code>MacosTabView</code>, to control the navigation of its children. You do not need to specify a <code>MacosSegmentedControl</code> with your <code>MacosTabView</code>, as it is built by that widget.</p> <h1 id="dialogs-and-sheets" class="hash-header">Dialogs and Sheets <a href="#dialogs-and-sheets" class="hash-link">#</a></h1> <h2 id="macosalertdialog" class="hash-header">MacosAlertDialog <a href="#macosalertdialog" class="hash-link">#</a></h2> <p>Usage:</p> <pre><code class="language-dart">showMacosAlertDialog( context: context, builder: (_) => MacosAlertDialog( appIcon: FlutterLogo(size: 64), title: Text( 'Alert Dialog with Primary Action', style: MacosTheme.of(context).typography.headline, ), message: Text( 'This is an alert dialog with a primary action and no secondary action', textAlign: TextAlign.center, style: MacosTypography.of(context).headline, ), primaryButton: PushButton( controlSize: ControlSize.large, child: Text('Primary'), onPressed: () {}, ), ), ); </code></pre> <p><img src="https://imgur.com/4zbGsFi.png" alt=""> <img src="https://imgur.com/5fgkRU9.png" alt=""> <img src="https://imgur.com/jOyJrZO.png" alt=""> <img src="https://imgur.com/NX9taPj.png" alt=""></p> <h2 id="macossheet" class="hash-header">MacosSheet <a href="#macossheet" class="hash-link">#</a></h2> <p>Usage:</p> <pre><code class="language-dart">showMacosSheet( context: context, builder: (_) => const MacosuiSheet(), ); </code></pre> <p><img src="https://imgur.com/Mnw2ywm.png" alt=""></p> <h1 id="fields" class="hash-header">Fields <a href="#fields" class="hash-link">#</a></h1> <h2 id="macostextfield" class="hash-header">MacosTextField <a href="#macostextfield" class="hash-link">#</a></h2> <p>A text field is a rectangular area in which the user enters or edits one or more lines of text. A text field can contain plain or styled text.</p> <img src="https://imgur.com/UzyMlcL.png" width="75%"> <p>Here's an example of how to create a basic text field:</p> <pre><code class="language-dart">MacosTextField( placeholder: 'Type some text here', ) </code></pre> <h2 id="macossearchfield" class="hash-header">MacosSearchField <a href="#macossearchfield" class="hash-link">#</a></h2> <p>A search field is a style of text field optimized for performing text-based searches in a large collection of values.</p> <p>When the user starts typing into the search field, a list of selectable results appears in an overlay below (or above) the field.</p> <img src="https://imgur.com/qbabwAW.png" width="75%"> <table> <thead> <tr> <th>Dark Theme</th> <th>Light Theme</th> </tr> </thead> <tbody> <tr> <td><img src="https://imgur.com/Jol85ny.jpg"></td> <td><img src="https://imgur.com/xP3l3Lv.jpg"></td> </tr> </tbody> </table> <p>Here's an example of how to create a search field:</p> <pre><code class="language-dart">MacosSearchField( placeholder: 'Search for a country...', results: countries.map((e) => SearchResultItem(e)).toList(), onResultSelected: (resultItem) { debugPrint(resultItem.searchKey); }, ) </code></pre> <p>Check the <code>examples/fields_page</code> for more examples.</p> <h1 id="labels" class="hash-header">Labels <a href="#labels" class="hash-link">#</a></h1> <p>Labels are a short description of what an element on the screen does.</p> <h2 id="macostooltip" class="hash-header">MacosTooltip <a href="#macostooltip" class="hash-link">#</a></h2> <p>Tooltips succinctly describe how to use controls without shifting people’s focus away from the primary interface. Help tags appear when the user positions the pointer over a control for a few seconds. A tooltip remains visible for 10 seconds, or until the pointer moves away from the control.</p> <table> <thead> <tr> <th>Dark Theme</th> <th>Light Theme</th> </tr> </thead> <tbody> <tr> <td><img src="https://imgur.com/0qLFqdK.jpg"></td> <td><img src="https://imgur.com/Y3PLqBo.jpg"></td> </tr> </tbody> </table> <p>To create a tooltip, wrap any widget on a <code>MacosTooltip</code>:</p> <pre><code class="language-dart">MacosTooltip( message: 'This is a tooltip', child: Text('Hover or long press to show a tooltip'), ), </code></pre> <p>You can customize the tooltip the way you want by customizing the theme's <code>TooltipTheme</code>. A tooltip automatically adapts to its environment, responding to touch and pointer events. To use a tooltip with a toolbar item, provide it with a <code>tooltipMessage</code> property.</p> <h1 id="indicators" class="hash-header">Indicators <a href="#indicators" class="hash-link">#</a></h1> <h2 id="progress-indicators" class="hash-header">Progress Indicators <a href="#progress-indicators" class="hash-link">#</a></h2> <p>Don’t make people sit around staring at a static screen waiting for your app to load content or perform lengthy data processing operations. Use progress indicators to let people know your app hasn't stalled and to give them some idea of how long they’ll be waiting.</p> <p>Progress indicators have two distinct styles:</p> <ul> <li><strong>Bar indicators</strong>, more commonly known as progress bars, show progress in a horizontal bar.</li> <li><strong>Spinning indicators</strong> show progress in a circular form, either as a spinner or as a circle that fills in as progress continues.</li> </ul> <p>People don't interact with progress indicators; however, they are often accompanied by a button for canceling the corresponding operation. <a href="https://developer.apple.com/design/human-interface-guidelines/macos/indicators/progress-indicators/" rel="ugc">Learn more</a></p> <h3 id="progresscircle" class="hash-header">ProgressCircle <a href="#progresscircle" class="hash-link">#</a></h3> <p>A <code>ProgressCircle</code> can be either determinate or indeterminate.</p> <table> <thead> <tr> <th>Determinate Progress Circle</th> <th>Indeterminate Progress Circle</th> </tr> </thead> <tbody> <tr> <td><img src="https://imgur.com/hr3dHn9.jpg"></td> <td><img src="https://imgur.com/NSbKqLK.gif"></td> </tr> </tbody> </table> <p>Here's an example of how to create an indeterminate progress circle:</p> <pre><code class="language-dart">ProgressCircle( value: null, ), </code></pre> <p>You can provide a non-null value to <code>value</code> to make the progress circle determinate.</p> <h3 id="progressbar" class="hash-header">ProgressBar <a href="#progressbar" class="hash-link">#</a></h3> <p>A <code>ProgressBar</code> can only be determinate.</p> <img src="https://imgur.com/tdYgJmB.jpg" width="50%" height="50%"> <p>Here's an example of how to create a determinate progress bar:</p> <pre><code class="language-dart">ProgressBar( value: 30, ) </code></pre> <h2 id="level-indicators" class="hash-header">Level Indicators <a href="#level-indicators" class="hash-link">#</a></h2> <p>A level indicator graphically represents of a specific value within a range of numeric values. It’s similar to a <a href="#slider">slider</a> in purpose, but more visual and doesn’t contain a distinct control for selecting a value—clicking and dragging across the level indicator itself to select a value is supported, however. A level indicator can also include tick marks, making it easy for the user to pinpoint a specific value in the range. There are three different level indicator styles, each with a different appearance, for communicating capacity, rating, and relevance.</p> <h3 id="capacityindicator" class="hash-header">CapacityIndicator <a href="#capacityindicator" class="hash-link">#</a></h3> <p>A capacity indicator illustrates the current level in relation to a finite capacity. Capacity indicators are often used when communicating factors like disk and battery usage. <a href="https://developer.apple.com/design/human-interface-guidelines/macos/indicators/level-indicators#capacity-indicators" rel="ugc">Learn more</a></p> <img src="https://imgur.com/U7hcCqJ.png"> <img src="https://imgur.com/AJyXG6p.png"> <p>Here's an example of how to create an interactive continuous capacity indicator:</p> <pre><code class="language-dart">double value = 30; CapacityIndicator( value: value, discrete: false, onChanged: (v) { setState(() => value = v); }, ), </code></pre> <p>You can set <code>discrete</code> to <code>true</code> to make it a discrete capacity indicator.</p> <h3 id="macosslider" class="hash-header">MacosSlider <a href="#macosslider" class="hash-link">#</a></h3> <p>A slider is a control that lets people select a value from a continuous or discrete range of values by moving the slider thumb.</p> <table> <thead> <tr> <th>Continuous</th> <th>Discrete</th> </tr> </thead> <tbody> <tr> <td><img src="https://i.imgur.com/dc4YjoX.png" alt="Continuous Slider Example"></td> <td><img src="https://i.imgur.com/KckOTUf.png" alt="Discrete Slider Example"></td> </tr> <tr> <td>A horizontal slider where any value continuous value between a min and max can be selected</td> <td>A horizontal slider where only discrete values between a min and max can be selected. Tick marks are often displayed to provide context.</td> </tr> </tbody> </table> <p>Here's an example of how to create an interactive continuous slider:</p> <pre><code class="language-dart">double value = 0.5; MacosSlider( value: value, onChanged: (v) { setState(() => value = v); }, ), </code></pre> <h3 id="ratingindicator" class="hash-header">RatingIndicator <a href="#ratingindicator" class="hash-link">#</a></h3> <p>A rating indicator uses a series of horizontally arranged graphical symbols to communicate a ranking level. The default symbol is a star.</p> <p><img src="https://imgur.com/ySQBpL6.png" alt="RatingIndicator Example"></p> <p>A rating indicator doesn’t display partial symbols—its value is rounded in order to display complete symbols only. Within a rating indicator, symbols are always the same distance apart and don't expand or shrink to fit the control. <a href="https://developer.apple.com/design/human-interface-guidelines/macos/indicators/level-indicators#rating-indicators" rel="ugc">Learn more</a></p> <p>Here's an example of how to create an interactive rating indicator:</p> <pre><code class="language-dart">double value = 3; RatingIndicator( amount: 5, value: value, onChanged: (v) { setState(() => value = v); } ) </code></pre> <h1 id="selectors" class="hash-header">Selectors <a href="#selectors" class="hash-link">#</a></h1> <h2 id="macosdatepicker" class="hash-header">MacosDatePicker <a href="#macosdatepicker" class="hash-link">#</a></h2> <img src="https://imgur.com/sprmep1.png" width="75%"> <p>Lets the user choose a date.</p> <p>There are three styles of <code>MacosDatePickers</code>:</p> <ul> <li><code>textual</code>: a text-only date picker where the user must select the day, month, or year and use the caret-control buttons to change the value. This is useful when space in your app is constrained.</li> <li><code>graphical</code>: a visual date picker where the user can navigate through a calendar-like interface to select a date.</li> <li><code>combined</code>: provides both <code>textual</code> and <code>graphical</code> interfaces.</li> </ul> <p>Localization of the time picker is supported by the <code>weekdayAbbreviations</code> and <code>monthAbbreviations</code> parameters (instead of e.g. standard <code>localizations.narrowWeekdays()</code> in order to match Apple's spec).</p> <ul> <li><code>weekdayAbbreviations</code> should be a list of 7 strings, one for each day of the week, starting with Sunday</li> <li><code>monthAbbreviations</code> should be a list of 12 strings, one for each month of the year, starting with January</li> </ul> <p>You can also define the <code>dateFormat</code> to change the way dates are displayed in the textual interface. It takes a string of tokens (case-insensitive) and replaces them with their corresponding values. The following tokens are supported:</p> <ul> <li><code>D</code>: day of the month (1-31)</li> <li><code>DD</code>: day of the month (01-31)</li> <li><code>M</code>: month of the year (1-12)</li> <li><code>MM</code>: month of the year (01-12)</li> <li><code>YYYY</code>: year (0000-9999)</li> <li>Any separator between tokens is preserved (e.g. <code>/</code>, <code>-</code>, <code>.</code>)</li> </ul> <p>The default format is <code>M/D/YYYY</code>.</p> <p>Example usage:</p> <pre><code class="language-dart">MacosDatePicker( onDateChanged: (date) => debugPrint('$date'), ), </code></pre> <h2 id="macostimepicker" class="hash-header">MacosTimePicker <a href="#macostimepicker" class="hash-link">#</a></h2> <img src="https://imgur.com/RtPbRo2.png" width="50%"> <p>Lets the user choose a time.</p> <p>There are three styles of <code>MacosTimePickers</code>:</p> <ul> <li><code>textual</code>: a text-only time picker where the user must select the hour or minute and use the caret-control buttons to change the value. This is useful when space in your app is constrained.</li> <li><code>graphical</code>: a visual time picker where the user can move the hands of a clock-like interface to select a time.</li> <li><code>combined</code>: provides both <code>textual</code> and <code>graphical</code> interfaces.</li> </ul> <p>Example usage:</p> <pre><code class="language-dart">MacosTimePicker( onTimeChanged: (time) => debugPrint('$time'), ), </code></pre> <h2 id="macoscolorwell" class="hash-header">MacosColorWell <a href="#macoscolorwell" class="hash-link">#</a></h2> <img src="https://imgur.com/VpK4IlM.gif" width="50%"> <p>Lets the user choose a color via the native macOS color picker.</p> <p>You can choose which mode to launch the picker in using the <code>ColorPickerMode</code> enum. The default is <code>ColorPickerMode.wheel</code></p> <p>🚨 This widget will not work on platforms other than macOS!</p> <p>Example usage:</p> <pre><code class="language-dart">MacosColorWell( onColorSelected: (color) => debugPrint('$color'), ), </code></pre> <h2 id="older-macos-versions" class="hash-header">Older macOS versions <a href="#older-macos-versions" class="hash-link">#</a></h2> <p>If you’re targeting older macOS versions (Monterey and earlier), it is necessary to perform the following steps to make the <a href="https://pub.dev/packages/macos_window_utils">macos_window_utils</a> plugin, which macos_ui depends on, work correctly:</p> <p>Open the <code>macos/Runner.xcworkspace</code> folder of your project using Xcode, press ⇧ + ⌘ + O and search for <code>MainFlutterWindow.swift</code>.</p> <p>Insert <code>import macos_window_utils</code> at the top of the file. Then, replace the code above the <code>super.awakeFromNib()</code>-line with the following code:</p> <pre><code class="language-swift">let windowFrame = self.frame let macOSWindowUtilsViewController = MacOSWindowUtilsViewController() self.contentViewController = macOSWindowUtilsViewController self.setFrame(windowFrame, display: true) /* Initialize the macos_window_utils plugin */ MainFlutterWindowManipulator.start(mainFlutterWindow: self) RegisterGeneratedPlugins(registry: macOSWindowUtilsViewController.flutterViewController) </code></pre> <p>Assuming you're starting with the default configuration, the finished code should look something like this:</p> <pre><code class="language-diff">import Cocoa import FlutterMacOS +import macos_window_utils class MainFlutterWindow: NSWindow { override func awakeFromNib() { - let flutterViewController = FlutterViewController.init() - let windowFrame = self.frame - self.contentViewController = flutterViewController - self.setFrame(windowFrame, display: true) - RegisterGeneratedPlugins(registry: flutterViewController) + let windowFrame = self.frame + let macOSWindowUtilsViewController = MacOSWindowUtilsViewController() + self.contentViewController = macOSWindowUtilsViewController + self.setFrame(windowFrame, display: true) + /* Initialize the macos_window_utils plugin */ + MainFlutterWindowManipulator.start(mainFlutterWindow: self) + RegisterGeneratedPlugins(registry: macOSWindowUtilsViewController.flutterViewController) super.awakeFromNib() } } </code></pre> </section></div></div></div><aside class="detail-info-box"><a class="packages-scores" href="/packages/macos_ui/score"><div class="packages-score packages-score-like"><div class="packages-score-value -has-value"><span class="packages-score-value-number">951</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">likes</div></div><div class="packages-score packages-score-health"><div class="packages-score-value -has-value"><span class="packages-score-value-number">150</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">points</div></div><div class="packages-score packages-score-downloads" title="Number of downloads of this package during the past 30 days"><div class="packages-score-value -has-value"><span class="packages-score-value-number">29.2k</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">downloads</div></div></a><h3 class="title">Publisher</h3><p><a href="/publishers/macosui.dev"><img class="-pub-publisher-shield filter-invert-on-dark" src="/static/hash-j60jq2j3/img/material-icon-verified.svg" alt="verified publisher" width="14" height="14" title="Published by a pub.dev verified publisher"/>macosui.dev</a></p><h3 class="title">Weekly Downloads</h3><div id="-weekly-downloads-sparkline" class="weekly-downloads-sparkline" data-widget="weekly-sparkline" data-weekly-sparkline-points="gM/tZzQZAABfGAAAlhkAADwdAABEGgAA1xkAAD4bAACwHQAACRgAAEEZAABQHgAAHCMAAPMcAAAGFAAAPREAAJccAAAXGgAAUxkAAJ4aAAC3GgAAJRwAAC0ZAACrGQAAhx4AAEEcAABTHwAAIB4AAOIeAAC0HAAAdRsAAEkdAAA+GwAAuR0AAMccAABcGQAARxkAAHAZAAA1GQAA4xgAABAYAACsGAAA3hYAAHkbAADNGQAAbRwAAJEZAAC5HAAA7RkAAFgWAABHGAAANxkAANAYAAA="></div><h3 class="title pkg-infobox-metadata">Metadata</h3><p>Flutter widgets and themes implementing the current macOS design language.</p><p><a class="link" href="https://macosui.dev" rel="ugc">Homepage</a><br/><a class="link" href="https://github.com/GroovinChip/macos_ui" rel="ugc">Repository (GitHub)</a><br/><a class="link" href="https://github.com/GroovinChip/macos_ui/blob/dev/CONTRIBUTING.md" rel="ugc">Contributing</a><br/></p><h3 class="title">Documentation</h3><p><a class="link" href="/documentation/macos_ui/latest/">API reference</a><br/></p><h3 class="title">License</h3><p><img class="inline-icon-img filter-invert-on-dark" src="/static/hash-j60jq2j3/img/material-icon-balance.svg" alt="" width="14" height="14" role="presentation"/>MIT (<a href="/packages/macos_ui/license">license</a>)</p><h3 class="title">Dependencies</h3><p><a href="/packages/appkit_ui_element_colors" title="^1.0.0">appkit_ui_element_colors</a>, <a href="/packages/equatable" title="^2.0.5">equatable</a>, <a href="https://api.flutter.dev/">flutter</a>, <a href="/packages/gradient_borders" title="^1.0.1">gradient_borders</a>, <a href="/packages/macos_window_utils" title="^1.5.0">macos_window_utils</a></p><h3 class="title">More</h3><p><a href="/packages?q=dependency%3Amacos_ui" rel="nofollow">Packages that depend on macos_ui</a></p></aside></div><script type="application/ld+json">{"@context":"http\u003a\u002f\u002fschema.org","@type":"SoftwareSourceCode","name":"macos\u005fui","version":"2.1.10","description":"macos\u005fui - Flutter widgets and themes implementing the current macOS design language.","url":"https\u003a\u002f\u002fpub.dev\u002fpackages\u002fmacos\u005fui","dateCreated":"2021-05-13T12\u003a57\u003a48.628896Z","dateModified":"2025-03-03T14\u003a46\u003a49.542465Z","programmingLanguage":"Dart","image":"https\u003a\u002f\u002fpub.dev\u002fstatic\u002fimg\u002fpub-dev-icon-cover-image.png","license":"https\u003a\u002f\u002fpub.dev\u002fpackages\u002fmacos\u005fui\u002flicense"}</script></div><div class="detail-metadata"><h3 class="detail-metadata-title"><span class="detail-metadata-toggle">←</span> Metadata</h3><div class="detail-info-box"><a class="packages-scores" href="/packages/macos_ui/score"><div class="packages-score packages-score-like"><div class="packages-score-value -has-value"><span class="packages-score-value-number">951</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">likes</div></div><div class="packages-score packages-score-health"><div class="packages-score-value -has-value"><span class="packages-score-value-number">150</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">points</div></div><div class="packages-score packages-score-downloads" title="Number of downloads of this package during the past 30 days"><div class="packages-score-value -has-value"><span class="packages-score-value-number">29.2k</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">downloads</div></div></a><h3 class="title">Publisher</h3><p><a href="/publishers/macosui.dev"><img class="-pub-publisher-shield filter-invert-on-dark" src="/static/hash-j60jq2j3/img/material-icon-verified.svg" alt="verified publisher" width="14" height="14" title="Published by a pub.dev verified publisher"/>macosui.dev</a></p><h3 class="title">Weekly Downloads</h3><div id="-weekly-downloads-sparkline" class="weekly-downloads-sparkline" data-widget="weekly-sparkline" data-weekly-sparkline-points="gM/tZzQZAABfGAAAlhkAADwdAABEGgAA1xkAAD4bAACwHQAACRgAAEEZAABQHgAAHCMAAPMcAAAGFAAAPREAAJccAAAXGgAAUxkAAJ4aAAC3GgAAJRwAAC0ZAACrGQAAhx4AAEEcAABTHwAAIB4AAOIeAAC0HAAAdRsAAEkdAAA+GwAAuR0AAMccAABcGQAARxkAAHAZAAA1GQAA4xgAABAYAACsGAAA3hYAAHkbAADNGQAAbRwAAJEZAAC5HAAA7RkAAFgWAABHGAAANxkAANAYAAA="></div><h3 class="title pkg-infobox-metadata">Metadata</h3><p>Flutter widgets and themes implementing the current macOS design language.</p><p><a class="link" href="https://macosui.dev" rel="ugc">Homepage</a><br/><a class="link" href="https://github.com/GroovinChip/macos_ui" rel="ugc">Repository (GitHub)</a><br/><a class="link" href="https://github.com/GroovinChip/macos_ui/blob/dev/CONTRIBUTING.md" rel="ugc">Contributing</a><br/></p><h3 class="title">Documentation</h3><p><a class="link" href="/documentation/macos_ui/latest/">API reference</a><br/></p><h3 class="title">License</h3><p><img class="inline-icon-img filter-invert-on-dark" src="/static/hash-j60jq2j3/img/material-icon-balance.svg" alt="" width="14" height="14" role="presentation"/>MIT (<a href="/packages/macos_ui/license">license</a>)</p><h3 class="title">Dependencies</h3><p><a href="/packages/appkit_ui_element_colors" title="^1.0.0">appkit_ui_element_colors</a>, <a href="/packages/equatable" title="^2.0.5">equatable</a>, <a href="https://api.flutter.dev/">flutter</a>, <a href="/packages/gradient_borders" title="^1.0.1">gradient_borders</a>, <a href="/packages/macos_window_utils" title="^1.5.0">macos_window_utils</a></p><h3 class="title">More</h3><p><a href="/packages?q=dependency%3Amacos_ui" rel="nofollow">Packages that depend on macos_ui</a></p></div><p class="detail-lead-back"><a class="detail-metadata-toggle">Back</a></p></div><div id="-screenshot-carousel" class="carousel"><fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0"><div class="mdc-fab__ripple"></div><img class="mdc-fab__icon" src="/static/hash-j60jq2j3/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/></fab><div id="-image-container" class="image-container"></div><fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0"><div class="mdc-fab__ripple"></div><img class="mdc-fab__icon" src="/static/hash-j60jq2j3/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/></fab><p id="-screenshot-description" class="screenshot-description"></p></div></main><footer class="site-footer"><a class="link" href="https://dart.dev/">Dart language</a><a class="link sep" href="/report?subject=package%3Amacos_ui&url=https%3A%2F%2Fpub.dev%2Fpackages%2Fmacos_ui">Report package</a><a class="link sep" href="/policy">Policy</a><a class="link sep" href="https://www.google.com/intl/en/policies/terms/">Terms</a><a class="link sep" href="https://developers.google.com/terms/">API Terms</a><a class="link sep" href="/security">Security</a><a class="link sep" href="https://www.google.com/intl/en/policies/privacy/">Privacy</a><a class="link sep" href="/help">Help</a><a class="link icon sep" href="/feed.atom"><img class="inline-icon" src="/static/hash-j60jq2j3/img/rss-feed-icon.svg" alt="RSS" width="20" height="20" title="RSS/atom feed"/></a><a class="link icon github_issue" href="https://github.com/dart-lang/pub-dev/issues/new"><img class="inline-icon" src="/static/hash-j60jq2j3/img/bug-report-white-96px.png" alt="bug report" width="20" height="20" title="Report an issue with this site"/></a></footer><script src="/static/hash-j60jq2j3/highlight/highlight-with-init.js" defer="defer"></script></body></html>