Skip to content

Commit

Permalink
feat: Sliver toolbar (#368)
Browse files Browse the repository at this point in the history 
* feat: `SliverToolBar`

* chore(example): address lints

* docs(SliverToolbar): update `floating` doc

* feat(example): add page for SliverToolbar

* chore: dart format

* docs(SliverToolBar): slight change to `pinned` docs

* docs(SliverToolBar): add section to readme

* docs(SliverToolBar): tweak sample

* test(SliverAppBar): add initial tests

* chore: update version & changelog

* chore: pub upgrade

* chore: remove unused imports

* test: remove ignore lint
  • Loading branch information
@GroovinChip
GroovinChip authored Feb 28, 2023
1 parent e9cc18e commit d601ff9
Show file tree
Hide file tree
Showing 23 changed files with 1,058 additions and 338 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
## [1.12.0]
✨ New widget: `SliverToolBar`

## [1.11.1]
* Fixed an issue where the `MacosSearchField` would not perform an action when an item was selected.

Expand Down
30 changes: 29 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ should avoid allowing your application window to be resized below the height of
- [MacosScaffold](#macosscaffold)
- [Modern Window Look](#modern-window-look)
- [ToolBar](#toolbar)
- [SliverToolBar](#SliverToolBar)
- [MacosListTile](#MacosListTile)
- [MacosTabView](#MacosTabView)
</details>
Expand Down Expand Up @@ -407,14 +408,41 @@ CustomToolbarItem(
),
```

## `SliverToolBar`
<img src="https://imgur.com/u4LDaxj.gif" width="75%"/>

`SliverToolbar` is a variant of the standard `ToolBar`, with the key difference being that (as the name implies), it
is compatible with scrollable widgets like `CustomScrollView` and `NestedScrollView`. There are three additional
properties on `SliverToolBar`:
* `pinned`, which determines if the toolbar should remain visible while scrolling
* `floating`, which determines if the toolbar should become visible as soon as the use starts scrolling upwards
* `opacity`, which manages the translucency effect of the toolbar

This widget enables developers to achieve the toolbar behaviors seen in Apple's App Store.

Sample usage:
```dart
return CustomScrollView(
controller: scrollController,
slivers: [
SliverToolBar(
title: const Text('SliverToolbar'),
pinned: true,
toolbarOpacity: 0.75,
),
// Other slivers below
],
);
```

## MacosListTile

A widget that aims to approximate the [`ListTile`](https://api.flutter.dev/flutter/material/ListTile-class.html) widget found in
Flutter's material library.

![MacosListTile](https://imgur.com/pQB99M2.png)

Usage:
Sample usage:
```dart
MacosListTile(
leading: const Icon(CupertinoIcons.lightbulb),
Expand Down
1 change: 1 addition & 0 deletions example/analysis_options.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ linter:
# producing the lint.
rules:
- use_super_parameters
- prefer_single_quotes

# Additional information about this file can be found at
# https://dart.dev/guides/language/analysis-options
Binary file added example/assets/sf_symbols/macwindow.on.rectangle_2x.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added example/assets/sf_symbols/menubar.arrow.down.rectangle_2x.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added example/assets/sf_symbols/menubar.arrow.up.rectangle_2x.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added example/assets/sf_symbols/menubar.rectangle_2x.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 27 additions & 7 deletions example/lib/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import 'package:example/pages/dialogs_page.dart';
import 'package:example/pages/fields_page.dart';
import 'package:example/pages/indicators_page.dart';
import 'package:example/pages/selectors_page.dart';
import 'package:example/pages/sliver_toolbar_page.dart';
import 'package:example/pages/tabview_page.dart';
import 'package:example/pages/toolbar_page.dart';
import 'package:flutter/cupertino.dart';
Expand Down Expand Up @@ -68,8 +69,9 @@ class _WidgetGalleryState extends State<WidgetGallery> {
),
const DialogsPage(),
const ToolbarPage(),
const SelectorsPage(),
const SliverToolbarPage(),
const TabViewPage(),
const SelectorsPage(),
];

@override
Expand Down Expand Up @@ -234,8 +236,30 @@ class _WidgetGalleryState extends State<WidgetGallery> {
label: Text('Dialogs & Sheets'),
),
const SidebarItem(
leading: MacosIcon(CupertinoIcons.macwindow),
label: Text('Toolbar'),
leading: MacosImageIcon(
AssetImage(
'assets/sf_symbols/macwindow.on.rectangle_2x.png',
),
),
label: Text('Layout'),
disclosureItems: [
SidebarItem(
leading: MacosIcon(CupertinoIcons.macwindow),
label: Text('Toolbar'),
),
SidebarItem(
leading: MacosImageIcon(
AssetImage(
'assets/sf_symbols/menubar.rectangle_2x.png',
),
),
label: Text('SliverToolbar'),
),
SidebarItem(
leading: MacosIcon(CupertinoIcons.uiwindow_split_2x1),
label: Text('TabView'),
),
],
),
const SidebarItem(
leading: MacosImageIcon(
Expand All @@ -245,10 +269,6 @@ class _WidgetGalleryState extends State<WidgetGallery> {
),
label: Text('Selectors'),
),
const SidebarItem(
leading: MacosIcon(CupertinoIcons.uiwindow_split_2x1),
label: Text('TabView'),
),
],
);
},
Expand Down
104 changes: 52 additions & 52 deletions example/lib/pages/buttons_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,52 +230,52 @@ class _ButtonsPageState extends State<ButtonsPage> {
mainAxisAlignment: MainAxisAlignment.center,
children: [
MacosPulldownButton(
title: "PDF",
title: 'PDF',
items: [
MacosPulldownMenuItem(
title: const Text('Open in Preview'),
onTap: () =>
debugPrint("Opening in preview..."),
debugPrint('Opening in preview...'),
),
MacosPulldownMenuItem(
title: const Text('Save as PDF...'),
onTap: () => debugPrint("Saving as PDF..."),
onTap: () => debugPrint('Saving as PDF...'),
),
MacosPulldownMenuItem(
enabled: false,
title: const Text('Save as Postscript'),
onTap: () =>
debugPrint("Saving as Postscript..."),
debugPrint('Saving as Postscript...'),
),
const MacosPulldownMenuDivider(),
MacosPulldownMenuItem(
enabled: false,
title: const Text('Save to iCloud Drive'),
onTap: () =>
debugPrint("Saving to iCloud..."),
debugPrint('Saving to iCloud...'),
),
MacosPulldownMenuItem(
enabled: false,
title: const Text('Save to Web Receipts'),
onTap: () =>
debugPrint("Saving to Web Receipts..."),
debugPrint('Saving to Web Receipts...'),
),
MacosPulldownMenuItem(
title: const Text('Send in Mail...'),
onTap: () =>
debugPrint("Sending via Mail..."),
debugPrint('Sending via Mail...'),
),
const MacosPulldownMenuDivider(),
MacosPulldownMenuItem(
title: const Text('Edit Menu...'),
onTap: () => debugPrint("Editing menu..."),
onTap: () => debugPrint('Editing menu...'),
),
],
),
const SizedBox(width: 20),
const MacosPulldownButton(
title: "PDF",
disabledTitle: "Disabled",
title: 'PDF',
disabledTitle: 'Disabled',
items: [],
),
],
Expand All @@ -290,34 +290,34 @@ class _ButtonsPageState extends State<ButtonsPage> {
MacosPulldownMenuItem(
title: const Text('New Folder'),
onTap: () =>
debugPrint("Creating new folder..."),
debugPrint('Creating new folder...'),
),
MacosPulldownMenuItem(
title: const Text('Open'),
onTap: () => debugPrint("Opening..."),
onTap: () => debugPrint('Opening...'),
),
MacosPulldownMenuItem(
title: const Text('Open with...'),
onTap: () => debugPrint("Opening with..."),
onTap: () => debugPrint('Opening with...'),
),
MacosPulldownMenuItem(
title: const Text('Import from iPhone...'),
onTap: () => debugPrint("Importing..."),
onTap: () => debugPrint('Importing...'),
),
const MacosPulldownMenuDivider(),
MacosPulldownMenuItem(
enabled: false,
title: const Text('Remove'),
onTap: () => debugPrint("Deleting..."),
onTap: () => debugPrint('Deleting...'),
),
MacosPulldownMenuItem(
title: const Text('Move to Bin'),
onTap: () => debugPrint("Moving to Bin..."),
onTap: () => debugPrint('Moving to Bin...'),
),
const MacosPulldownMenuDivider(),
MacosPulldownMenuItem(
title: const Text('Tags...'),
onTap: () => debugPrint("Tags..."),
onTap: () => debugPrint('Tags...'),
),
],
),
Expand Down Expand Up @@ -353,7 +353,7 @@ class _ButtonsPageState extends State<ButtonsPage> {
),
const SizedBox(width: 20),
MacosPopupButton<String>(
disabledHint: const Text("Disabled"),
disabledHint: const Text('Disabled'),
onChanged: null,
items: null,
),
Expand Down Expand Up @@ -474,38 +474,38 @@ class _ButtonsPageState extends State<ButtonsPage> {
}

const languages = [
"Mandarin Chinese",
"Spanish",
"English",
"Hindi/Urdu",
"Arabic",
"Bengali",
"Portuguese",
"Russian",
"Japanese",
"German",
"Thai",
"Greek",
"Nepali",
"Punjabi",
"Wu",
"French",
"Telugu",
"Vietnamese",
"Marathi",
"Korean",
"Tamil",
"Italian",
"Turkish",
"Cantonese/Yue",
"Urdu",
"Javanese",
"Egyptian Arabic",
"Gujarati",
"Iranian Persian",
"Indonesian",
"Polish",
"Ukrainian",
"Romanian",
"Dutch"
'Mandarin Chinese',
'Spanish',
'English',
'Hindi/Urdu',
'Arabic',
'Bengali',
'Portuguese',
'Russian',
'Japanese',
'German',
'Thai',
'Greek',
'Nepali',
'Punjabi',
'Wu',
'French',
'Telugu',
'Vietnamese',
'Marathi',
'Korean',
'Tamil',
'Italian',
'Turkish',
'Cantonese/Yue',
'Urdu',
'Javanese',
'Egyptian Arabic',
'Gujarati',
'Iranian Persian',
'Indonesian',
'Polish',
'Ukrainian',
'Romanian',
'Dutch'
];
Loading

0 comments on commit d601ff9

Please sign in to comment.