Skip to content

Commit d601ff9

Browse files
GroovinChipGroovinChip
authored
feat: Sliver toolbar (#368)
* 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
1 parent e9cc18e commit d601ff9

23 files changed

+1058
-338
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
## [1.12.0]
2+
✨ New widget: `SliverToolBar`
3+
14
## [1.11.1]
25
* Fixed an issue where the `MacosSearchField` would not perform an action when an item was selected.
36

‎README.md‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ should avoid allowing your application window to be resized below the height of
5757
- [MacosScaffold](#macosscaffold)
5858
- [Modern Window Look](#modern-window-look)
5959
- [ToolBar](#toolbar)
60+
- [SliverToolBar](#SliverToolBar)
6061
- [MacosListTile](#MacosListTile)
6162
- [MacosTabView](#MacosTabView)
6263
</details>
@@ -407,14 +408,41 @@ CustomToolbarItem(
407408
),
408409
```
409410

411+
## `SliverToolBar`
412+
<img src="https://imgur.com/u4LDaxj.gif" width="75%"/>
413+
414+
`SliverToolbar` is a variant of the standard `ToolBar`, with the key difference being that (as the name implies), it
415+
is compatible with scrollable widgets like `CustomScrollView` and `NestedScrollView`. There are three additional
416+
properties on `SliverToolBar`:
417+
* `pinned`, which determines if the toolbar should remain visible while scrolling
418+
* `floating`, which determines if the toolbar should become visible as soon as the use starts scrolling upwards
419+
* `opacity`, which manages the translucency effect of the toolbar
420+
421+
This widget enables developers to achieve the toolbar behaviors seen in Apple's App Store.
422+
423+
Sample usage:
424+
```dart
425+
return CustomScrollView(
426+
controller: scrollController,
427+
slivers: [
428+
SliverToolBar(
429+
title: const Text('SliverToolbar'),
430+
pinned: true,
431+
toolbarOpacity: 0.75,
432+
),
433+
// Other slivers below
434+
],
435+
);
436+
```
437+
410438
## MacosListTile
411439

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

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

417-
Usage:
445+
Sample usage:
418446
```dart
419447
MacosListTile(
420448
leading: const Icon(CupertinoIcons.lightbulb),

‎example/analysis_options.yaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ linter:
2323
# producing the lint.
2424
rules:
2525
- use_super_parameters
26+
- prefer_single_quotes
2627

2728
# Additional information about this file can be found at
2829
# https://dart.dev/guides/language/analysis-options

‎example/assets/sf_symbols/macwindow.on.rectangle_2x.png‎

1.02 KB
Loading

‎example/assets/sf_symbols/menubar.arrow.down.rectangle_2x.png‎

892 Bytes
Loading

‎example/assets/sf_symbols/menubar.arrow.up.rectangle_2x.png‎

869 Bytes
Loading

‎example/assets/sf_symbols/menubar.rectangle_2x.png‎

556 Bytes
Loading

‎example/lib/main.dart‎

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import 'package:example/pages/dialogs_page.dart';
44
import 'package:example/pages/fields_page.dart';
55
import 'package:example/pages/indicators_page.dart';
66
import 'package:example/pages/selectors_page.dart';
7+
import 'package:example/pages/sliver_toolbar_page.dart';
78
import 'package:example/pages/tabview_page.dart';
89
import 'package:example/pages/toolbar_page.dart';
910
import 'package:flutter/cupertino.dart';
@@ -68,8 +69,9 @@ class _WidgetGalleryState extends State<WidgetGallery> {
6869
),
6970
const DialogsPage(),
7071
const ToolbarPage(),
71-
const SelectorsPage(),
72+
const SliverToolbarPage(),
7273
const TabViewPage(),
74+
const SelectorsPage(),
7375
];
7476

7577
@override
@@ -234,8 +236,30 @@ class _WidgetGalleryState extends State<WidgetGallery> {
234236
label: Text('Dialogs & Sheets'),
235237
),
236238
const SidebarItem(
237-
leading: MacosIcon(CupertinoIcons.macwindow),
238-
label: Text('Toolbar'),
239+
leading: MacosImageIcon(
240+
AssetImage(
241+
'assets/sf_symbols/macwindow.on.rectangle_2x.png',
242+
),
243+
),
244+
label: Text('Layout'),
245+
disclosureItems: [
246+
SidebarItem(
247+
leading: MacosIcon(CupertinoIcons.macwindow),
248+
label: Text('Toolbar'),
249+
),
250+
SidebarItem(
251+
leading: MacosImageIcon(
252+
AssetImage(
253+
'assets/sf_symbols/menubar.rectangle_2x.png',
254+
),
255+
),
256+
label: Text('SliverToolbar'),
257+
),
258+
SidebarItem(
259+
leading: MacosIcon(CupertinoIcons.uiwindow_split_2x1),
260+
label: Text('TabView'),
261+
),
262+
],
239263
),
240264
const SidebarItem(
241265
leading: MacosImageIcon(
@@ -245,10 +269,6 @@ class _WidgetGalleryState extends State<WidgetGallery> {
245269
),
246270
label: Text('Selectors'),
247271
),
248-
const SidebarItem(
249-
leading: MacosIcon(CupertinoIcons.uiwindow_split_2x1),
250-
label: Text('TabView'),
251-
),
252272
],
253273
);
254274
},

‎example/lib/pages/buttons_page.dart‎

Lines changed: 52 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -230,52 +230,52 @@ class _ButtonsPageState extends State<ButtonsPage> {
230230
mainAxisAlignment: MainAxisAlignment.center,
231231
children: [
232232
MacosPulldownButton(
233-
title: "PDF",
233+
title: 'PDF',
234234
items: [
235235
MacosPulldownMenuItem(
236236
title: const Text('Open in Preview'),
237237
onTap: () =>
238-
debugPrint("Opening in preview..."),
238+
debugPrint('Opening in preview...'),
239239
),
240240
MacosPulldownMenuItem(
241241
title: const Text('Save as PDF...'),
242-
onTap: () => debugPrint("Saving as PDF..."),
242+
onTap: () => debugPrint('Saving as PDF...'),
243243
),
244244
MacosPulldownMenuItem(
245245
enabled: false,
246246
title: const Text('Save as Postscript'),
247247
onTap: () =>
248-
debugPrint("Saving as Postscript..."),
248+
debugPrint('Saving as Postscript...'),
249249
),
250250
const MacosPulldownMenuDivider(),
251251
MacosPulldownMenuItem(
252252
enabled: false,
253253
title: const Text('Save to iCloud Drive'),
254254
onTap: () =>
255-
debugPrint("Saving to iCloud..."),
255+
debugPrint('Saving to iCloud...'),
256256
),
257257
MacosPulldownMenuItem(
258258
enabled: false,
259259
title: const Text('Save to Web Receipts'),
260260
onTap: () =>
261-
debugPrint("Saving to Web Receipts..."),
261+
debugPrint('Saving to Web Receipts...'),
262262
),
263263
MacosPulldownMenuItem(
264264
title: const Text('Send in Mail...'),
265265
onTap: () =>
266-
debugPrint("Sending via Mail..."),
266+
debugPrint('Sending via Mail...'),
267267
),
268268
const MacosPulldownMenuDivider(),
269269
MacosPulldownMenuItem(
270270
title: const Text('Edit Menu...'),
271-
onTap: () => debugPrint("Editing menu..."),
271+
onTap: () => debugPrint('Editing menu...'),
272272
),
273273
],
274274
),
275275
const SizedBox(width: 20),
276276
const MacosPulldownButton(
277-
title: "PDF",
278-
disabledTitle: "Disabled",
277+
title: 'PDF',
278+
disabledTitle: 'Disabled',
279279
items: [],
280280
),
281281
],
@@ -290,34 +290,34 @@ class _ButtonsPageState extends State<ButtonsPage> {
290290
MacosPulldownMenuItem(
291291
title: const Text('New Folder'),
292292
onTap: () =>
293-
debugPrint("Creating new folder..."),
293+
debugPrint('Creating new folder...'),
294294
),
295295
MacosPulldownMenuItem(
296296
title: const Text('Open'),
297-
onTap: () => debugPrint("Opening..."),
297+
onTap: () => debugPrint('Opening...'),
298298
),
299299
MacosPulldownMenuItem(
300300
title: const Text('Open with...'),
301-
onTap: () => debugPrint("Opening with..."),
301+
onTap: () => debugPrint('Opening with...'),
302302
),
303303
MacosPulldownMenuItem(
304304
title: const Text('Import from iPhone...'),
305-
onTap: () => debugPrint("Importing..."),
305+
onTap: () => debugPrint('Importing...'),
306306
),
307307
const MacosPulldownMenuDivider(),
308308
MacosPulldownMenuItem(
309309
enabled: false,
310310
title: const Text('Remove'),
311-
onTap: () => debugPrint("Deleting..."),
311+
onTap: () => debugPrint('Deleting...'),
312312
),
313313
MacosPulldownMenuItem(
314314
title: const Text('Move to Bin'),
315-
onTap: () => debugPrint("Moving to Bin..."),
315+
onTap: () => debugPrint('Moving to Bin...'),
316316
),
317317
const MacosPulldownMenuDivider(),
318318
MacosPulldownMenuItem(
319319
title: const Text('Tags...'),
320-
onTap: () => debugPrint("Tags..."),
320+
onTap: () => debugPrint('Tags...'),
321321
),
322322
],
323323
),
@@ -353,7 +353,7 @@ class _ButtonsPageState extends State<ButtonsPage> {
353353
),
354354
const SizedBox(width: 20),
355355
MacosPopupButton<String>(
356-
disabledHint: const Text("Disabled"),
356+
disabledHint: const Text('Disabled'),
357357
onChanged: null,
358358
items: null,
359359
),
@@ -474,38 +474,38 @@ class _ButtonsPageState extends State<ButtonsPage> {
474474
}
475475

476476
const languages = [
477-
"Mandarin Chinese",
478-
"Spanish",
479-
"English",
480-
"Hindi/Urdu",
481-
"Arabic",
482-
"Bengali",
483-
"Portuguese",
484-
"Russian",
485-
"Japanese",
486-
"German",
487-
"Thai",
488-
"Greek",
489-
"Nepali",
490-
"Punjabi",
491-
"Wu",
492-
"French",
493-
"Telugu",
494-
"Vietnamese",
495-
"Marathi",
496-
"Korean",
497-
"Tamil",
498-
"Italian",
499-
"Turkish",
500-
"Cantonese/Yue",
501-
"Urdu",
502-
"Javanese",
503-
"Egyptian Arabic",
504-
"Gujarati",
505-
"Iranian Persian",
506-
"Indonesian",
507-
"Polish",
508-
"Ukrainian",
509-
"Romanian",
510-
"Dutch"
477+
'Mandarin Chinese',
478+
'Spanish',
479+
'English',
480+
'Hindi/Urdu',
481+
'Arabic',
482+
'Bengali',
483+
'Portuguese',
484+
'Russian',
485+
'Japanese',
486+
'German',
487+
'Thai',
488+
'Greek',
489+
'Nepali',
490+
'Punjabi',
491+
'Wu',
492+
'French',
493+
'Telugu',
494+
'Vietnamese',
495+
'Marathi',
496+
'Korean',
497+
'Tamil',
498+
'Italian',
499+
'Turkish',
500+
'Cantonese/Yue',
501+
'Urdu',
502+
'Javanese',
503+
'Egyptian Arabic',
504+
'Gujarati',
505+
'Iranian Persian',
506+
'Indonesian',
507+
'Polish',
508+
'Ukrainian',
509+
'Romanian',
510+
'Dutch'
511511
];

0 commit comments

Comments
 (0)