Flutter widgets and themes implementing the current macOS design language.

Related tags

Desktop macos_ui
Overview

macos_ui

Flutter widgets and themes implementing the current macOS design language.

Flutter Analysis Pana Analysis codecov codecov

NOTE: This package depends on the excellent native_context_menu plugin. Since it is a desktop plugin, and therefore does not target Android and iOS, the pub score of this package is lower than 130

Content

Contributing

macOS welcomes contributions. Please see CONTRIBUTING.md for more information.

Resources

Layout

MacosWindow

MacosWindow is the basic frame for the macOS layout.

It has a Sidebar on the left and the rest of the window is typically filled out with a MacosScaffold. A scope for the MacosWindow is provided by MacosWindowScope. The sidebar can be toggled with MacosWindowScope.of(context).toggleSidebar(). Please note that you must wrap your MacosScaffold in a Builder widget in order for this to work properly.

MacosScaffold

The MacosScaffold is what you would call a "page".

The scaffold has a TitleBar property and the children property which accepts a ContentArea widget and multiple ResizablePane widgets. To catch navigation or routes below the scaffold, consider wrapping the MacosScaffold in a CupertinoTabView. By doing so, navigation inside the MacosScaffold will be displayed inside the MacosScaffold area instead of covering the entire window. To push a route outside a MacosScaffold wrapped in a CupertinoTabView, use the root navigator Navigator.of(context, rootNavigator: true)

See the documentation for customizations.

Modern window look

A new look for macOS apps was introduced in Big Sur (macOS 11). To match that look in your Flutter app, like our screenshots, your macos/Runner/MainFlutterWindow.swift file should look like this.

import Cocoa
import FlutterMacOS

class MainFlutterWindow: NSWindow {
  override func awakeFromNib() {
    let flutterViewController = FlutterViewController.init()
    let windowFrame = self.frame
    self.contentViewController = flutterViewController
    self.setFrame(windowFrame, display: true)

    if #available(macOS 10.13, *) {
      let customToolbar = NSToolbar()
      customToolbar.showsBaselineSeparator = false
      self.toolbar = customToolbar
    }
    self.titleVisibility = .hidden
    self.titlebarAppearsTransparent = true
    if #available(macOS 11.0, *) {
      self.toolbarStyle = .unified
    }

    self.isMovableByWindowBackground = true
    self.styleMask.insert(NSWindow.StyleMask.fullSizeContentView)

    RegisterGeneratedPlugins(registry: flutterViewController)

    super.awakeFromNib()
  }
}

MacosListTile

A widget that aims to approximate the [ListTile] widget found in Flutter's material library.

MacosListTile

Usage:

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,
    ),
  ),
),

Icons

MacosIcon

A MacosIcon is identical to a regular Icon in every way with one exception - it respects a MacosTheme. Use it the same way you would a regular icon:

MacosIcon(
  CupertinoIcons.add,
  // color: CupertinoColors.activeBlue.color,
  // size: 20,
),

Buttons

MacosCheckbox

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. Learn more

Off On Mixed
Off Checkbox On Checkbox Mixed Checkbox

Here's an example of how to create a basic checkbox:

bool selected = false;

MacosCheckbox(
  value: selected,
  onChanged: (value) {
    setState(() => selected = value);
  },
)

To make a checkbox in the mixed state, set value to null.

HelpButton

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. Learn more

HelpButton Example

Here's an example of how to create a help button:

HelpButton(
  onPressed: () {
    print('pressed help button'),
  },
)

You can customize the help button appearance and behaviour using the HelpButtonTheme, but it's not recommended by apple to change help button's appearance.

RadioButton

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). Learn more

RadioButton Preview

Here's an example of how to create a basic radio button:

bool selected = false;

MacosRadioButton(
  value: selected,
  onChanged: (value) {
    setState(() => selected = value);
  },
),

PushButton

A push button appears within a view and initiates an instantaneous app-specific action, such as printing a document or deleting a file. Push buttons contain text—not icons—and often open a separate window, dialog, or app so the user can complete a task. Learn more

Dark Theme Light Theme

Here's an example of how to create a basic push button:

PushButton(
  child: Text('button'),
  buttonSize: ButtonSize.large,
  onPressed: () {
    print('button pressed');
  },
),

MacosSwitch

A switch is a visual toggle 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. Learn more

On Off

Here's an example of how to create a basic toggle switch:

bool selected = false;

MacosSwitch(
  value: selected,
  onChanged: (value) {
    setState(() => selected = value);
  },
),

Dialogs and Sheets

MacosAlertDialog

Usage:

showMacosAlertDialog(
  context: context,
  builder: (_) => MacosAlertDialog(
    appIcon: FlutterLogo(
      size: 56,
    ),
    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: MacosTheme.of(context).typography.headline,
    ),
    primaryButton: PushButton(
      buttonSize: ButtonSize.large,
      child: Text('Primary'),
      onPressed: () {},
    ),
  ),
);

MacosSheet

Usage:

showMacosSheet(
  context: context,
  builder: (_) => const MacosuiSheet(),
);

Context Menus

macos_ui uses the [native_context_menu] plugin under the hood for Context Menus. Please consult the readme for that plugin for usage.

(gif courtesy of the native_context_menu plugin)

Fields

MacosTextField

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.

Here's an example of how to create a basic text field:

MacosTextField(),

Labels

Labels are a short description of what an element on the screen does.

MacosTooltip

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.

Tooltip Example

To create a tooltip, wrap any widget on a Tooltip:

MacosTooltip(
  message: 'This is a tooltip',
  child: Text('Hover or long press to show a tooltip'),
),

You can customize the tooltip the way you want using its style property. A tooltip automatically adapts to its environment, responding to touch and pointer events.

Indicators

Progress Indicators

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.

Progress indicators have two distinct styles:

  • Bar indicators, more commonly known as progress bars, show progress in a horizontal bar.
  • Spinning indicators show progress in a circular form, either as a spinner or as a circle that fills in as progress continues.

People don't interact with progress indicators; however, they are often accompanied by a button for canceling the corresponding operation. Learn more

Progress Indicator Example

ProgressCircle

A ProgressCircle can be either determinate or indeterminate.

Determinate Progress Circle Indeterminate Progress Circle

Here's an example of how to create an indeterminate progress circle:

ProgressCircle(
  value: null,
),

You can provide a non-null value to value to make the progress circle determinate.

ProgressBar

A ProgressBar can only be determinate.

Here's an example of how to create a determinate progress bar:

ProgressBar(
  value: 30,
)

Level Indicators

A level indicator graphically represents of a specific value within a range of numeric values. It’s similar to a slider 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.

CapacityIndicator

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. Learn more

Continuous Discrete
Continuous CapacityIndicator Example Discrete CapacityIndicator Example
A horizontal translucent track that fills with a colored bar to indicate the current value. Tick marks are often displayed to provide context. A horizontal row of separate, equally sized, rectangular segments. The number of segments matches the total capacity, and the segments fill completely—never partially—with color to indicate the current value.

Here's an example of how to create an interactive continuous capacity indicator:

double value = 30;

CapacityIndicator(
  value: value,
  discrete: false,
  onChanged: (v) {
    setState(() => value = v);
  },
),

You can set discrete to true to make it a discrete capacity indicator.

RatingIndicator

A rating indicator uses a series of horizontally arranged graphical symbols to communicate a ranking level. The default symbol is a star.

RatingIndicator Example

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. Learn more

Here's an example of how to create an interactive rating indicator:

double value = 3;

RatingIndicator(
  amount: 5,
  value: value,
  onChanged: (v) {
    setState(() => value = v);
  }
)

RelevanceIndicator

A relevance indicator communicates relevancy using a series of vertical bars. It often appears in a list of search results for reference when sorting and comparing multiple items. Learn more

RelevanceIndicator Example

Here's an example of how to create a relevance indicator:

RelevanceIndicator(
  value: 15,
  amount: 20,
)
Comments
  • Website

    Website

    This PR contains a basic website for macos_ui. It was created with Docusaurus and contains a codelab for getting started with macos_ui. More codelabs and documentation is in progress. The website has not been deployed yet, but I have purchased the domain "macosui.dev" in preparation for deployment. I also need to figure out a logo or something, and perhaps some different images. I'm also toying with the idea of embedding the demo app into the site.

    To run the website, ensure that NPM is installed. Then run npx docusaurus start.

    Any feedback for the initial version of the website is welcome.

    Closes #238

    Pre-launch Checklist

    • [ ] I have run dartfmt on all changed files
    • [ ] I have incremented the package version as appropriate and updated CHANGELOG.md with my changes
    • [ ] I have added/updated relevant documentation
    • [ ] I have run "optimize/organize imports" on all changed files
    • [ ] I have addressed all analyzer warnings as best I could
    opened by GroovinChip 14
  • Fix bottom padding for alert dialogs when supress is null

    Fix bottom padding for alert dialogs when supress is null

    Fix padding on MacosAlertDialog when supress field is null.

    Fixes #188

    Pre-launch Checklist

    • [x] I have run dartfmt on all changed files
    • [x] I have incremented the package version as appropriate and updated CHANGELOG.md with my changes
    • [x] I have added/updated relevant documentation
    • [x] I have run "optimize/organize imports" on all changed files
    • [x] I have addressed all analyzer warnings as best I could
    opened by Andrewngabriel 11
  • `MacosPopupButton` (closes #176)

    `MacosPopupButton` (closes #176)

    Adds a new MacosPopupButton widget, trying to replicate the Pop-Up button component from Apple's Guidelines.

    Final result:

    | Dark Theme | Light Theme | | ------------------------------------------ | ------------------------------------------ | | | | | | | | | |

    Screencast:

    https://user-images.githubusercontent.com/9117427/150102681-488c3531-791f-4de3-8613-c3cc675d97ce.mov

    Based on Flutter's Material DropdownButton widget, but with these modifications:

    • Different size, padding, border shadows, animations, etc., trying to match Apple design as much as possible. All these were eye-balled from pop-up buttons found in System Preferences.
    • Double caret icon at the right edge of the button (done with a CustomPainter).
    • macOS-themed styling.
    • No scrollbar when menu is open.
    • An up or down caret symbol for when the menu has items that cannot fit the available constraints (i.e. with a longer items list).

    User can also navigate the open menu with up/down arrow keys and select an item with the Return key.

    Future development can include:

    • Translucency effect for the open menu.
    • More tests (especially for its visual design).

    Pre-launch Checklist

    • [✅] I have run dartfmt on all changed files
    • [✅] I have incremented the package version as appropriate and updated CHANGELOG.md with my changes
    • [✅] I have added/updated relevant documentation
    • [✅] I have run "optimize/organize imports" on all changed files
    • [✅] I have addressed all analyzer warnings as best I could
    opened by whiplashoo 11
  • Additional options for Alert and Sidebar.

    Additional options for Alert and Sidebar.

    This PR adds ability to add a top widget to a Sidebar, or nothing. This will also remove the titlebar sized gap at the top of the Sidebar's content. If a dev wants that padding that can add it as a sized box on Sidebar's top attribute. It also adds ability to set the text alignment on an Alert's title and message.

    Pre-launch Checklist

    • [x] I have run dartfmt on all changed files
    • [X] I have incremented the package version as appropriate and updated CHANGELOG.md with my changes
    • [X] I have added/updated relevant documentation (header doc)
    • [X] I have run "optimize/organize imports" on all changed files
    • [X] I have addressed all analyzer warnings as best I could
    opened by wess 11
  • 🐛 Cursors use `SystemMouseCursors.click` instead of `SystemMouseCursors.basic`

    🐛 Cursors use `SystemMouseCursors.click` instead of `SystemMouseCursors.basic`

    Description

    Clickable macOS components do not use the "click cursor". They have always used the default cursor. This forms a distinction between using the web on macOS and interacting with macOS applications.

    So by default, clickable elements in macos_ui should use SystemMouseCursors.basic instead of SystemMouseCursors.click. I also believe an option should be provided to customize that.

    bug enhancement 
    opened by wilsonowilson 11
  • Sidebar bottom item

    Sidebar bottom item

    Add the option to provide a bottom Widget to the Sidebar Widget.

    This closes #130

    image image

    Pre-launch Checklist

    • [x] I have run dartfmt on all changed files
    • [x] I have incremented the package version as appropriate and updated CHANGELOG.md with my changes
    • [x] I have added/updated relevant documentation
    • [x] I have run "optimize/organize imports" on all changed files
    • [x] I have addressed all analyzer warnings as best I could
    opened by ABausG 11
  • Version 1.6.0 - `MacosTabView` & `MacosSegmentedControl`

    Version 1.6.0 - `MacosTabView` & `MacosSegmentedControl`

    This PR introduces two new widgets: MacosTabView and MacosSegmentedControl. Relevant tests have been added.

    It also contains improvements to overall dartdocs.

    Closes #70.

    See this comment from #206 for background info.

    I'm not super pleased with the API here, but it's much closer to what it should be. The thing that I'm unhappy about is the active property for MacosTab; I feel that it should be managing its own state rather than depending on it via class properties. This will allow multiple states for tabs, and we know that the native control has more states than simply "active" or "inactive". I tried using MaterialStateProperty but got nowhere. I also do not want to use a color parameter because the colors of that tab and the tab's states should only be set internally. Putting the GestureDetector that handles the tab click into the tab widget itself is also problematic because it requires functions and/or the tab controller to be passed into the tab, and that's not correct.

    The above issue can either be cleaned up in this PR, or in a separate PR.

    Pre-launch Checklist

    • [x] I have run dartfmt on all changed files
    • [x] I have incremented the package version as appropriate and updated CHANGELOG.md with my changes
    • [x] I have added/updated relevant documentation
    • [x] I have run "optimize/organize imports" on all changed files
    • [x] I have addressed all analyzer warnings as best I could
    opened by GroovinChip 10
  • Fix `MacosThemeData` to properly apply user-defined component theme classes.

    Fix `MacosThemeData` to properly apply user-defined component theme classes.

    Fixes an issue where user-defined theme properties pushButtonTheme, helpButtonTheme, and tooltipTheme were not passed properly when creating a custom MacosThemeData.

    Now, a user can customize a theme like this:

    return MacosApp(
      darkTheme: MacosThemeData.dark().copyWith(
        pushButtonTheme: const PushButtonThemeData().copyWith(
          color: MacosColors.appleBrown,
          disabledColor: MacosColors.applePurple,
          secondaryColor: MacosColors.appleMagenta,
        ),
        helpButtonTheme: const HelpButtonThemeData(
          color: MacosColors.appleOrange,
          disabledColor: MacosColors.appleCyan,
        ),
        tooltipTheme: const TooltipThemeData(
          height: 100.0,
        ),
      ),
    )
    

    and get properly styled PushButton, HelpButton, and MacosTooltip (not shown) widgets:

    Screenshot 2022-03-12 at 11 02 05 PM

    Also changed a couple of colors in the example/main.dart, to remove its Material library dependency.

    Pre-launch Checklist

    • [x] I have run dartfmt on all changed files
    • [x] I have incremented the package version as appropriate and updated CHANGELOG.md with my changes
    • [x] I have added/updated relevant documentation
    • [x] I have run "optimize/organize imports" on all changed files
    • [x] I have addressed all analyzer warnings as best I could
    opened by whiplashoo 10
  • version `0.16.0` - `MacosTimePicker`

    version `0.16.0` - `MacosTimePicker`

    This PR adds the MacosTimePicker widget with support for the textual, graphical, and combined styles.

    Closes #213

    Pre-launch Checklist

    • [x] I have run dartfmt on all changed files
    • [x] I have incremented the package version as appropriate and updated CHANGELOG.md with my changes
    • [x] I have added/updated relevant documentation
    • [x] I have run "optimize/organize imports" on all changed files
    • [x] I have addressed all analyzer warnings as best I could
    opened by GroovinChip 9
  • How to use pop up selections without a `MacosTheme` parent widget?

    How to use pop up selections without a `MacosTheme` parent widget?

    Hi, macOS_ui looks nice. How can I using this pop up selection without using any macostheme parent?

    image

    I just want call this popup and popup this window:

    image

    is that doable?

    question 
    opened by jinfagang 8
  • Reopen window bug

    Reopen window bug

    Starting from version 0.15.0, when you click x to close the window, and click the icon again to display the window, the color picker will be displayed image

    bug 
    opened by shiguanghuxian 8
  • Popups clipped by the window bounds

    Popups clipped by the window bounds

    Run the example/lib/main.dart and switch toe the "Toolbar" page. Now resize the app window to make it smaller than the default start and click one of the toolbar buttons that shows a popup:

    image

    Two issues:

    1. The popup is aligned to the left of the window instead of the button
    2. The popup is clipped vertically with a bunch of errors shown in log
    The overflowing RenderFlex has an orientation of Axis.vertical.
    The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
    black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
    Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
    RenderFlex to fit within the available space instead of being sized to their natural size.
    This is considered an error condition because it indicates that there is content that cannot be
    seen. If the content is legitimately bigger than the available space, consider clipping it with a
    ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
    like a ListView.
    The specific RenderFlex in question is: RenderFlex#3d45a OVERFLOWING:
      needs compositing
      creator: Column ← DecoratedBox ← ConstrainedBox ← Container ← AnimatedContainer ← Positioned ←
        AnimatedPositioned ← Stack ← MacosWindowScope ← LayoutBuilder ← MacosWindow ←
        PlatformMenuBar#33d25 ← ⋯
      parentData: <none> (can use size)
      constraints: BoxConstraints(w=200.0, h=131.0)
      size: Size(200.0, 131.0)
      direction: vertical
      mainAxisAlignment: start
      mainAxisSize: max
      crossAxisAlignment: center
      verticalDirection: down
    ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
    ════════════════════════════════════════════════════════════════════════════════════════════════════
    
    Another exception was thrown: 'package:macos_ui/src/buttons/pulldown_button.dart': Failed assertion: line 254 pos 16: 'menuLimits.top >= 0.0': is not true.
    
    Another exception was thrown: A RenderFlex overflowed by 107 pixels on the bottom.
    
    Another exception was thrown: 'package:macos_ui/src/buttons/pulldown_button.dart': Failed assertion: line 254 pos 16: 'menuLimits.top >= 0.0': is not true.
    
    Another exception was thrown: A RenderFlex overflowed by 107 pixels on the bottom.
    
    Another exception was thrown: A RenderFlex overflowed by 7.0 pixels on the bottom.
    
    Another exception was thrown: 'package:macos_ui/src/buttons/pulldown_button.dart': Failed assertion: line 254 pos 16: 'menuLimits.top >= 0.0': is not true.
    
    Another exception was thrown: A RenderFlex overflowed by 47 pixels on the bottom.
    
    bug 
    opened by kirill-grouchnikov 0
  • Can't run the main demo

    Can't run the main demo

    The latest clone of the project. Run flutter run from the example folder and choose to run on macOS (my version is 13.0.1):

    lib/main.dart:110:7: Error: No named parameter with the name 'child'.
          child: MacosWindow(
          ^^^^^
    ../../../flutter/packages/flutter/lib/src/widgets/platform_menu_bar.dart:462:9: Context: Found this candidate, but the arguments don't match.
      const PlatformMenuBar({
            ^^^^^^^^^^^^^^^
    
    bug 
    opened by kirill-grouchnikov 2
  • MacosScaffold's main content area not scrolling under the blurring Toolbar

    MacosScaffold's main content area not scrolling under the blurring Toolbar

    Description

    Not really sure if it is a feature request but after reading the source code I am inclined to believe it might be an omission.

    Anyway, looking at some native MacOS Apps, such as the actual AppStore, the navigation bar allows for content to scroll under while applying the well-known blurring translucency:

    image

    How to reproduce the same effect using this macos_ui package?

    I started to dig in the source code of the Toolbar widget that can be supplied to the MacosScaffold and I did find the logic where the background is blurred:

    Source code (shortened and simplified)
    return MediaQuery(
          data: MediaQuery.of(context).copyWith(
            padding: EdgeInsets.only(
              left: !kIsWeb && isMacOS ? 70 : 0,
            ),
          ),
          child: ClipRect(
            child: BackdropFilter(
              filter: widget.decoration?.color?.opacity == 1
                  ? ImageFilter.blur()
                  : ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0), // <<<< HERE
              child: Container(
                 ...
                ).copyWith(
                  ...
                ),
                child: NavigationToolbar(
                  middle: title,
                  centerMiddle: widget.centerTitle,
                  trailing: OverflowHandler(...),
                    children: ...,
                  middleSpacing: 8,
                  leading: ...,
                ),
              ),
            ),
          ),
        );
    
    

    Then I moved on to the source code of MacosScaffold. Unsurpringly, the various parts (toolbar, children), are laid out in a Stack.

    But there is something that looks maybe wrong: if a Toolbar is defined, then a top padding based on the Toolbar's height is applied to the body part of the MacosScaffold which causes the body to be placed under the toolbar:

    double topPadding = 0;
    if (widget.toolBar != null) topPadding += widget.toolBar!.height;
    
    [...]
    
    // Content Area
    Positioned(
          top: 0,
          width: width,
          height: height,
          child: MediaQuery(
          data: mediaQuery.copyWith(
                padding: EdgeInsets.only(top: topPadding), // << HERE
           ),
           child: _ScaffoldBody(children: children),
           ),
    ),
    

    In order to have the translucency I am looking for, I have to remove this top padding so that the my main content starts drawing under the Toolbar and I have to set a background color with some opacity that I decided to set at 0.9:

    image

    But I have trouble getting the same effect as the AppStore...

    Strangely, If I dot not ouch the source code and apply a completely transparent background color to my Toolbar there is a little of blurring:

    image

    (zoomed screenshot) image

    So, in conclusion, I believe it was meant for the Toolbar to have the translucent blurring background however, I don't know how I should get it working using the package as-is. I am not that well knowledgeable in Flutter, but I believe a way would be so that the ContentArea provides a safe area to draw content taking into account the Toolbar's height much like the Cupertino widgets does it for the TabBar.

    Logs

    Flutter doctor
    [✓] Flutter (Channel stable, 3.3.8, on macOS 12.6.1 21G217 darwin-arm, locale fr-FR)
        • Flutter version 3.3.8 on channel stable at /Users/XXXXXX/workspace/others/flutter-sdk/flutter
        • Upstream repository https://github.com/flutter/flutter.git
        • Framework revision 52b3dc25f6 (13 days ago), 2022-11-09 12:09:26 +0800
        • Engine revision 857bd6b74c
        • Dart version 2.18.4
        • DevTools version 2.15.0
    
    [✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
        • Android SDK at /Users/XXXXX/Library/Android/sdk/
        • Platform android-33, build-tools 33.0.0
        • ANDROID_HOME = ~/Library/Android/sdk
        • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
        • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
        • All Android licenses accepted.
    
    [✓] Xcode - develop for iOS and macOS (Xcode 14.1)
        • Xcode at /Applications/Xcode.app/Contents/Developer
        • Build 14B47b
        • CocoaPods version 1.11.3
    
    [✓] Chrome - develop for the web
        • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
    
    [✓] Android Studio (version 2021.2)
        • Android Studio at /Applications/Android Studio.app/Contents
        • Flutter plugin can be installed from:
          🔨 https://plugins.jetbrains.com/plugin/9212-flutter
        • Dart plugin can be installed from:
          🔨 https://plugins.jetbrains.com/plugin/6351-dart
        • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    
    [!] Proxy Configuration
        • HTTP_PROXY is set
        • NO_PROXY is xxxxx127.0.0.1
        ! NO_PROXY does not contain localhost
        • NO_PROXY contains 127.0.0.1
        ! NO_PROXY does not contain ::1
    
    [✓] Connected device (2 available)
        • macOS (desktop) • macos  • darwin-arm64   • macOS 12.6.1 21G217 darwin-arm
        • Chrome (web)    • chrome • web-javascript • Google Chrome 107.0.5304.110
    
    [✓] HTTP Host Availability
        • All required HTTP hosts are available
    
    ! Doctor found issues in 1 category.
    
    bug 
    opened by ricard-v 0
  • feat: implement MacosTable

    feat: implement MacosTable

    I implemented a MacosTable widget which looks similar to the macOS NSTableView (adresses #262 and #199). The table features ordering by column and row selection. I have also added some tests for the basic operations. I am sure there is still a lot to improve, both in code and in UI, but I hope this can serve as a starting point.

    This is a screenshot of the table widget running in a process monitor application I am building. Note that this is running on linux and the font is not the one used on macOS. Screenshot_2022-11-18_14-13-43

    Pre-launch Checklist

    • [x] I have run dartfmt on all changed files
    • [x] I have incremented the package version as appropriate and updated CHANGELOG.md with my changes
    • [ ] I have added/updated relevant documentation
    • [ ] I have run "optimize/organize imports" on all changed files
    • [x] I have addressed all analyzer warnings as best I could
    opened by pithuene 0
  • Input events in the toolbar trigger window position and size changes

    Input events in the toolbar trigger window position and size changes

    Description

    When using macOS 11 style windows, click events in the toolbar still trigger window changes even if they are located over a UI element. This includes double-clicking changing the window size, and click-and-drag moving the window.

    Steps To Reproduce

    1. Run the example app
    2. Navigate to any page in the sidebar with UI elements in the toolbar. The "Toolbar" page is a good option
    3. Double click any UI element in the toolbar and the window will resize
    4. With the window un-maximized, click and drag a UI element in the toolbar. The window will move with your cursor

    Expected behavior

    Input events on UI elements should take priority and not trigger window resize or move events, as in native and even most non-native applications.

    Screenshots

    Here is an example of double click triggering window resize in the example app:

    https://user-images.githubusercontent.com/1316184/201949806-4bfe746f-6570-4d07-9148-2b00c12b0d71.mov

    For comparison, here is the behavior of a similar element in the macOS notes application:

    https://user-images.githubusercontent.com/1316184/201949986-f12991de-066b-4347-8805-18af97f2e5fc.mov

    Logs

    N/A.

    Suggestion

    The root cause seems to be that the way the runner app handles the macOS 11 style window: the titlebar is not removed but just made transparent, and therefore still receives input. Setting self.titlebarAppearsTransparent = false in MainFlutterWindow lets us see this:

    Screenshot 2022-11-15 at 09 43 11

    One possible way to fix this would be to remove the titlebar entirely and handle window movement internally with a package like bitsdojo_window. This would likely require changes to the Toolbar and/or MacosScaffold widgets to attach the required listeners.

    Related

    #316 includes these issues along with an unrelated button styling issue

    bug 
    opened by jmatth 1
Releases(1.7.5)
  • 1.7.5(Sep 5, 2022)

  • 1.7.4(Aug 20, 2022)

    What's Changed

    • Tab view padding by @stMerlHin in https://github.com/GroovinChip/macos_ui/pull/285
    • fix: use prepared title wrapped with a DefaultTextStyle instead of the raw title by @jtdLab in https://github.com/GroovinChip/macos_ui/pull/289
    • feat: add backgroundColor to MacosSheet by @GroovinChip in https://github.com/GroovinChip/macos_ui/pull/291

    New Contributors

    • @stMerlHin made their first contribution in https://github.com/GroovinChip/macos_ui/pull/285
    • @jtdLab made their first contribution in https://github.com/GroovinChip/macos_ui/pull/289

    Full Changelog: https://github.com/GroovinChip/macos_ui/compare/1.7.1...1.7.4

    Source code(tar.gz)
    Source code(zip)
  • 1.7.3(Aug 17, 2022)

    What's Changed

    • Tab view padding by @stMerlHin in https://github.com/GroovinChip/macos_ui/pull/285
    • fix: use prepared title wrapped with a DefaultTextStyle instead of the raw title by @jtdLab in https://github.com/GroovinChip/macos_ui/pull/289
    • feat: add backgroundColor to MacosSheet by @GroovinChip in https://github.com/GroovinChip/macos_ui/pull/291

    New Contributors

    • @stMerlHin made their first contribution in https://github.com/GroovinChip/macos_ui/pull/285
    • @jtdLab made their first contribution in https://github.com/GroovinChip/macos_ui/pull/289

    Full Changelog: https://github.com/GroovinChip/macos_ui/compare/1.7.1...1.7.3

    Source code(tar.gz)
    Source code(zip)
  • 1.7.1(Jul 27, 2022)

  • 1.7.0(Jul 10, 2022)

    What's Changed

    • Version 1.7.0: MacosImageIcon & sidebar updates by @GroovinChip in https://github.com/GroovinChip/macos_ui/pull/274

    Full Changelog: https://github.com/GroovinChip/macos_ui/compare/1.4.1...1.7.0

    Source code(tar.gz)
    Source code(zip)
  • 1.6.0(Jul 9, 2022)

    What's Changed

    • Version 1.6.0 by @GroovinChip in https://github.com/GroovinChip/macos_ui/pull/281

    Full Changelog: https://github.com/GroovinChip/macos_ui/compare/1.5.1...1.6.0

    Source code(tar.gz)
    Source code(zip)
  • 1.5.1(Jul 7, 2022)

    What's Changed

    • Fixup by @GroovinChip in https://github.com/GroovinChip/macos_ui/pull/256
    • Version 1.4.1+1 by @GroovinChip in https://github.com/GroovinChip/macos_ui/pull/257
    • latest from dev by @GroovinChip in https://github.com/GroovinChip/macos_ui/pull/269
    • 1.5.1 & Update actions by @GroovinChip in https://github.com/GroovinChip/macos_ui/pull/280

    Full Changelog: https://github.com/GroovinChip/macos_ui/compare/1.4.1...1.5.1

    Source code(tar.gz)
    Source code(zip)
  • 1.4.1(May 16, 2022)

  • 14.0(May 13, 2022)

    [1.4.0]

    • Migration to Flutter 3.0
      • Minimum dart sdk version is now 2.17.0
      • Use new super parameters feature
      • Update to flutter_lints: ^2.0.1 with subsequent fixes
      • MacosScrollbar API more closely matches its material counterpart
    • Update MacosColor to more closely match the Color class
      • Adds MacosColor.fromARGB constructor
      • Adds MacosColor.fromRGBO constructor
      • Adds alphaBlend function
      • Adds getAlphaFromOpacity function
    Source code(tar.gz)
    Source code(zip)
  • 1.2.1+1(May 10, 2022)

  • 1.2.0(May 8, 2022)

  • 1.1.0+1(May 7, 2022)

  • 1.1.0(May 6, 2022)

    • New functionality for MacosSearchField
      • Shows a list of search results in an overlay below the field
      • A result can be selected and customized.
    • A MacosOverlayFilter widget can now be used to apply the blurry "frosted glass" effect on surfaces.
    • New widget: CustomToolbarItem that enables any widget to be used in the Toolbar.
    Source code(tar.gz)
    Source code(zip)
  • 0.16.0(May 3, 2022)

    What's Changed

    • version 0.15.0 - Adds MacosColorWell by @GroovinChip in https://github.com/GroovinChip/macos_ui/pull/211
    • version 0.16.0 - MacosTimePicker by @GroovinChip in https://github.com/GroovinChip/macos_ui/pull/214
    Source code(tar.gz)
    Source code(zip)
  • 0.14.0(May 2, 2022)

    • New widget: ToolBar, which can be used to create a toolbar at the top of the MacosScaffold. Toolbar items include ToolBarIconButton, ToolBarPulldownButton, and ToolBarSpacer widgets.
    • New widget: MacosSearchField, which creates a macOS-style search field.
    • Breaking change: the title bar (TitleBar) should now be set via the titlebar property of MacosWindow (was previously a property of MacosScaffold). If you are using a title bar in your app, please note a small change you would need to make in your macos/Runner/MainFlutterWindow.swift file, described in the "Modern window look" section of the README file.
    • Fix the graphical version of MacosDatePicker having an incorrect current day text color in light theme
    Source code(tar.gz)
    Source code(zip)
  • 0.12.1+1(Mar 21, 2022)

It is too hard to build coherent and accessible themes with the right colors. This should help.

Color Studio It is hard to choose colors. Most color pickers give you 16 million colors and ask you to pick one. So many options, in fact, that your c

Bernardo Ferrari 372 Dec 22, 2022
A package which provides most of the window decorations from linux themes.

Window Decorations A package which provides most of the window decorations from linux themes. Features Easier to use and implement Native looking wind

Prateek SU 20 Dec 21, 2022
Flutter on Windows, MacOS and Linux - based on Flutter Embedding, Go and GLFW.

go-flutter - A package that brings Flutter to the desktop Purpose Flutter allows you to build beautiful native apps on iOS and Android from a single c

null 5.5k Jan 6, 2023
TinyPNG4Flutter - A TinyPNG Compress Image Desktop GUI For Flutter. Support macOS and windows

TinyPNG4Flutter A TinyPNG Compress Image Desktop GUI For Flutter. Support macOS

逸风 20 Dec 8, 2022
A simple-to-use flutter update package for Windows, MacOS, and Linux.

Updat - The simple-to-use, flutter-based desktop update package Updat is a simple-to-use reliable flutter-native updater that handles your application

Eduardo M. 14 Dec 21, 2022
A cross-platform app ecosystem, bringing iMessage to Android, PC (Windows, Linux, & even macOS), and Web!

BlueBubbles Android App BlueBubbles is an open-source and cross-platform ecosystem of apps aimed to bring iMessage to Android, Windows, Linux, and mor

BlueBubbles 318 Jan 8, 2023
Flutter plugin for Flutter desktop(macOS/Linux/Windows) to change window size.

desktop_window Flutter plugin for Flutter desktop(macOS/Linux/Windows) to change window size. Usage import 'package:desktop_window/desktop_window.dart

ChunKoo Park 72 Dec 2, 2022
🎞 Flutter media playback, broadcast & recording library for Windows, Linux & macOS. Written in C++ using libVLC & libVLC++. (Both audio & video)

dart_vlc Flutter media playback, broadcast, recording & chromecast library for Windows, Linux & macOS. Written in C++ using libVLC & libVLC++. Install

Hitesh Kumar Saini 417 Dec 29, 2022
A cross-platform (Windows/macOS) scanner plugin for Flutter

quick_scanner A cross-platform (Windows/macOS) scanner plugin for Flutter Usage QuickScanner.startWatch(); var _scanners = await QuickScanner.getScan

Woodemi Co., Ltd 5 Jun 10, 2022
A cross-platform (Android/Windows/macOS/Linux) USB plugin for Flutter

quick_usb A cross-platform (Android/Windows/macOS/Linux) USB plugin for Flutter Usage List devices List devices with additional description Get device

Woodemi Co., Ltd 39 Oct 1, 2022
Simple file explorer for desktop made with Flutter, highly inspired by macOS Finder

file_explorer A basic file explorer made with Flutter Getting Started This project is a starting point for a Flutter application. A few resources to g

Valentin 0 Nov 7, 2021
A macOS plugin which can register a callback for a global keyboard shortcut.

global_shortcuts A macOS plugin which can register a callback for a global keyboard shortcut. As the shortcut is global, the callback will be triggere

James Leahy 7 Jan 2, 2023
Sol - an imperative, statically-typed language designed as a tool for learning how to program

SOL: Simple Obvious Language Sol is an imperative, statically-typed language designed as a tool for learning how to program. It is simple, in that it

Christopher Fujino 3 Oct 6, 2022
My Notes is an app to create simple notes and add 3 levels of tags to them. The uniqueness of the app lies in its design and dark theme

?? My Notes | Simple & Beautiful Note Taking App ?? About The App ?? My Notes is an app to create simple notes and add 3 levels of tags to them. The u

null 4 Apr 27, 2022
Implements Microsoft's Fluent Design System in Flutter.

fluent_ui Design beautiful native windows apps using Flutter Unofficial implementation of Fluent UI for Flutter. It's written based on the official do

Bruno D'Luka 1.8k Dec 30, 2022
A simple app design

shopper_design A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started i

Samuel Adekunle 2 Nov 25, 2021
Serverpod is a next-generation app and web server, explicitly built for the Flutter and Dart ecosystem.

Serverpod Serverpod is a next-generation app and web server, explicitly built for the Flutter and Dart ecosystem. It allows you to write your server-s

Serverpod 1k Jan 8, 2023
A project that makes use of a Typescript back end and a Flutter web front end to consume the Jira API in order to visualize and interact with issues.

A project that makes use of a Typescript back end and a Flutter web front end to consume the Jira API in order to visualize and interact with issues.

Lucas Coelho 1 Mar 20, 2022
A material theme editor and generator for Flutter to configure and preview the overall visual theme of your material app

A material theme editor and generator for Flutter to configure and preview the overall visual theme of your material app

Joshua 301 Jan 3, 2023