Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 29 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@ Implements Apple's macOS Design System in Flutter. Based on the official documen
- [Resources](#resources)
- [Layout](#layout)
- [Scaffold](#scaffold)
- [Buttons](#buttons)
- [Switch](#switch)
- [Indicators](#indicators)
- [ProgressCircle](#progresscircle)
- [ProgressBar](#progressbar)

## Resources

Expand All @@ -16,8 +21,30 @@ Implements Apple's macOS Design System in Flutter. Based on the official documen

# Layout
## Scaffold
`Scaffold` provides a basic structure for laying out widgets in a way you would expect on macOS. You must specify a `body` as the main content area, and you can optionally provide a `sidebar` that will show to the left of `body`. The `sidebar` can be resized by grabbing the split and dragging left or right. See the documentation for all customization options.
`Scaffold` provides a basic structure for laying out widgets in a way you would expect on macOS.
You must specify a `body` as the main content area, and you can optionally provide a `sidebar`
that will show to the left of `body`. The `sidebar` can be resized by grabbing the split and
dragging left or right. See the documentation for all customization options.

<img src="https://imgur.com/e41j2aT.jpg" width="75%"/>

<img src="https://imgur.com/jTPXGuq.gif" width="75%"/>
<img src="https://imgur.com/jTPXGuq.gif" width="75%"/>

# Buttons
## Switch
<img src="https://imgur.com/IBh5jkz.jpg" width="50%" height="50%"/>

<img src="https://imgur.com/qK1VCVr.jpg" width="50%" height="50%"/>

# Indicators
## ProgressCircle
A `ProgressCircle` can be either determinate or indeterminate. If indeterminate, Flutter's
`CupertinoActivityIndicator` will be shown.

<img src="https://imgur.com/hr3dHn9.jpg" width="50%" height="50%"/>

<img src="https://imgur.com/NSbKqLK.gif" width="50%" height="50%"/>

## ProgressBar

<img src="https://imgur.com/tdYgJmB.jpg" width="50%" height="50%"/>