macosui / macos_ui Goto Github PK
View Code? Open in Web Editor NEWFlutter widgets and themes implementing the current macOS design language.
Home Page: https://macosui.github.io/macos_ui/#/
License: MIT License
Flutter widgets and themes implementing the current macOS design language.
Home Page: https://macosui.github.io/macos_ui/#/
License: MIT License
Scrollbar
, and expose ScrollbarThemeData
to MacosThemeData
MacosScrollBehavior
Goes on Titlebars, I think. @lesliearkorful
https://developer.apple.com/design/human-interface-guidelines/macos/windows-and-views/tab-views/
A tab view presents multiple mutually exclusive panes of content in the same area. A tab view includes a tabbed control and a content area. Each segment of a tabbed control is known as a tab, and clicking a tab displays its corresponding pane in the content area. Although the amount of content can vary from pane to pane, switching tabs doesn’t change the overall size of the tab view or its parent window.
Vertical Tabs | Horizontal Tabs |
---|---|
Implement date and hour pickers:
Resources:
intl should be used to format the dates
Apply it to Scaffold
color
property for our IconButton
sets the background color of the button, if the user selects a transparent background they should be able to set the color of the IconData
themselvesMacosIconButtonThemeData
Other - as long as it is in between min and max width
All our widget names should start with Mac. eg MacScaffold
.
This is to prevent name conflicts with existing widgets in the flutter framework and preserve the great developer experience Flutter already has. No dev (yes, including us) dreams of importing our library with a prefix or in every file of their project.
Make the example a showcase application, showing all the implemented widgets
Line 206 of the readme links to a slider widget like so: slider. However, there is no such link in this file.
A widget much like the material ListTile
only without the material bits. Such a widget is often quite useful.
height
from all TextStyle
sTextStyle
s that require itTextStyle
sDiscussion here: https://github.com/GroovinChip/macos_ui/discussions/15
Titlebar
should support Toolbar
widgetsHelp tags, often referred to as 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 help tag remains visible for 10 seconds, or until the pointer moves away from the control.
The tooltips should be rendered according to the pointer (mouse) position, not to its child.
Todo: description
These kinds of menus are almost everywhere in macOS UIs :
Implementing them would require a native plugin since they can appear outside of the main window.
They would also allow to implement list pickers like :
As stated in the description provided by apple the Level Indicator should implement user interaction. Clicking on a bar or sliding over the bar should adjust the value.
However, as you can see in the following GIF clicking on a bar does not correspond to the correct selected value.
As far as I can tell the element you tap on should be selected.
The sliding is fine but the first click of the slide is registered as tap thus the value changes before the sliding applies. This should be avoided
We define the as properties but they aren't returned.
See #30
Description
Currently the inputs we have (PushButtons, Checkbox, RadioButton, HelpButton) doesn't change the mouse cursor on hover.
Expected behavior
The mouse cursor should change to SystemMouseCursors.click
. This can be done using the widget MouseRegion
.
Implementing gradient button
There are some icons in the Figma kit that do not seem to be part of Flutter's cupertino_icons
package.
We can either implement them as MacosIcon
s, or PR them to cupertino_icons
, or both.
https://www.figma.com/file/M6K5L3GK0WJh6pnsASyVeE/macOS-Big-Sur-UI-Kit?node-id=26%3A5
https://flutter.dev/docs/development/packages-and-plugins/favorites#metrics
Per requirements, can only happen once we reach a full stable release with feature completeness.
Implement text and label fields:
-ordered by priority-
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.
A combo box combines a text field with a pull-down button in a single control. The user can enter a custom value into the field or click the button to choose from a list of predefined values. When the user enters a custom value, it’s not added to the list of choices.
A search field is a style of text field optimized for performing text-based searches in a large collection of values. Many windows include a search field in the toolbar, but a search field can also be displayed in the body area of a window. A search field displays a magnifying glass icon, and can also include placeholder text and a cancellation button.
A token field is a type of text field that includes tokens, blocks of text that can be easily selected and manipulated.
A label is a static text field that describes an onscreen interface element or provides a short message. Although people can’t edit labels, they can sometimes copy label contents.
A structure needs to be established within /src
. I'm leaning towards the structure that Apple uses in their Human Interface Guidelines. If anyone has any thoughts on this, please share. Thanks!
CONTRIBUTING.md
(branch structure, etc)analysis_options.yaml
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.