Skip to content

Commit

Permalink
docs: update readme
Browse files Browse the repository at this point in the history
* Addresses macosui#237
* Adds MacosColorWell to selectors section
* Adds code snippets for date & time pickers
  • Loading branch information
GroovinChip committed Jul 11, 2022
1 parent 285c398 commit 6c90a36
Showing 1 changed file with 42 additions and 1 deletion.
43 changes: 42 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,15 @@ Guides, codelabs, and other documentation can be found at https://macosui.dev

<img src="https://imgur.com/5mFQKBU.png" width="75%"/>

## 🚨 Usage notes
pub.dev shows that `macos_ui` only supports macOS. This is because `macos_ui` calls some native code, and therefore
specifies macOS as a plugin platform in the `pubspec.yaml` file. `macos_ui` _will_ work on any platform that
Flutter supports, **but you will get best results on macOS**.

The features of `macos_ui` that will _not_ work on platforms other than macOS due to calling native code are:
* The `MacosColors.controlAccentColor()` function
* The `MacosColorWell` widget

## Contents

<details>
Expand Down Expand Up @@ -96,6 +105,7 @@ Guides, codelabs, and other documentation can be found at https://macosui.dev
- [Selectors](#selectors)
- [MacosDatePicker](#macosdatepicker)
- [MacosTimePicker](#macostimepicker)
- [MacosColorWell](#macoscolorwell)
</details>

---
Expand Down Expand Up @@ -894,6 +904,13 @@ There are three styles of `MacosDatePickers`:
calendar-like interface to select a date.
* `combined`: provides both `textual` and `graphical` interfaces.

Example usage:
```dart
MacosDatePicker(
onDateChanged: (date) => debugPrint('$date'),
),
```

## MacosTimePicker

<img src="https://imgur.com/RtPbRo2.png" width="50%"/>
Expand All @@ -906,4 +923,28 @@ There are three styles of `MacosTimePickers`:
This is useful when space in your app is constrained.
* `graphical`: a visual time picker where the user can move the hands of a
clock-like interface to select a time.
* `combined`: provides both `textual` and `graphical` interfaces.
* `combined`: provides both `textual` and `graphical` interfaces.

Example usage:
```dart
MacosTimePicker(
onTimeChanged: (time) => debugPrint('$time'),
),
```

## MacosColorWell

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

Lets the user choose a color via the native macOS color picker.

You can choose which mode to launch the picker in using the `ColorPickerMode` enum. The default is `ColorPickerMode.wheel`

🚨 This widget will not work on platforms other than macOS!

Example usage:
```dart
MacosColorWell(
onColorSelected: (color) => debugPrint('$color'),
),
```

0 comments on commit 6c90a36

Please sign in to comment.