Skip to content

Replace ToolBar with PreferredSizeWidget #477

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: dev
Choose a base branch
from
Open

Replace ToolBar with PreferredSizeWidget #477

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
643b727
Replace ToolBar with PreferredSizeWidget
Otacon Aug 20, 2023
3ffecc2
Improved docs
Otacon Aug 20, 2023
e850aaf
Updated CHANGELOG.md
Otacon Aug 20, 2023
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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
### 🔄 Updated 🔄
* `PushButton` has received a facelift. It now mimics the look and feel of native macOS buttons more closely.
* **Note:** As a result, its `pressedOpacity` property and the `PushButtonTheme` class have been deprecated.
* The type of `MacosScaffold`'s `ToolBar` is now `PreferredSizeWidget`.

## [2.0.0]
### 🚨 Breaking Changes 🚨
Expand Down
24 changes: 12 additions & 12 deletions example/lib/pages/buttons_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,8 +93,8 @@ class _ButtonsPageState extends State<ButtonsPage> {
MaterialPageRoute(
builder: (_) {
return MacosScaffold(
toolBar: const ToolBar(
title: Text('New page'),
toolBar: ToolBar(
title: const Text('New page'),
),
children: [
ContentArea(
Expand Down Expand Up @@ -137,8 +137,8 @@ class _ButtonsPageState extends State<ButtonsPage> {
MaterialPageRoute(
builder: (_) {
return MacosScaffold(
toolBar: const ToolBar(
title: Text('New page'),
toolBar: ToolBar(
title: const Text('New page'),
),
children: [
ContentArea(
Expand Down Expand Up @@ -181,8 +181,8 @@ class _ButtonsPageState extends State<ButtonsPage> {
MaterialPageRoute(
builder: (_) {
return MacosScaffold(
toolBar: const ToolBar(
title: Text('New page'),
toolBar: ToolBar(
title: const Text('New page'),
),
children: [
ContentArea(
Expand Down Expand Up @@ -271,8 +271,8 @@ class _ButtonsPageState extends State<ButtonsPage> {
MaterialPageRoute(
builder: (_) {
return MacosScaffold(
toolBar: const ToolBar(
title: Text('New page'),
toolBar: ToolBar(
title: const Text('New page'),
),
children: [
ContentArea(
Expand Down Expand Up @@ -316,8 +316,8 @@ class _ButtonsPageState extends State<ButtonsPage> {
MaterialPageRoute(
builder: (_) {
return MacosScaffold(
toolBar: const ToolBar(
title: Text('New page'),
toolBar: ToolBar(
title: const Text('New page'),
),
children: [
ContentArea(
Expand Down Expand Up @@ -361,8 +361,8 @@ class _ButtonsPageState extends State<ButtonsPage> {
MaterialPageRoute(
builder: (_) {
return MacosScaffold(
toolBar: const ToolBar(
title: Text('New page'),
toolBar: ToolBar(
title: const Text('New page'),
),
children: [
ContentArea(
Expand Down
4 changes: 2 additions & 2 deletions example/lib/pages/typography_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ class TypographyPage extends StatelessWidget {
);

return MacosScaffold(
toolBar: const ToolBar(
title: Text('Typography'),
toolBar: ToolBar(
title: const Text('Typography'),
),
children: [
ContentArea(
Expand Down
6 changes: 3 additions & 3 deletions lib/src/layout/scaffold.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ class MacosScaffold extends StatefulWidget {
final List<Widget> children;

/// The [Toolbar] to use at the top of the layout scaffold.
final ToolBar? toolBar;
final PreferredSizeWidget? toolBar;

@override
State<MacosScaffold> createState() => _MacosScaffoldState();
Expand Down Expand Up @@ -73,7 +73,7 @@ class _MacosScaffoldState extends State<MacosScaffold> {
final mediaQuery = MediaQuery.of(context);
final children = widget.children;
double topPadding = 0;
if (widget.toolBar != null) topPadding += widget.toolBar!.height;
if (widget.toolBar != null) topPadding += widget.toolBar!.preferredSize.height;

return Stack(
children: [
Expand Down Expand Up @@ -118,7 +118,7 @@ class _MacosScaffoldState extends State<MacosScaffold> {
if (widget.toolBar != null)
Positioned(
width: width,
height: widget.toolBar!.height,
height: widget.toolBar!.preferredSize.height,
child: widget.toolBar!,
),
],
Expand Down
23 changes: 18 additions & 5 deletions lib/src/layout/toolbar/toolbar.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import 'package:macos_ui/src/layout/wallpaper_tinting_settings/wallpaper_tinting
import 'package:macos_ui/src/library.dart';

/// Defines the height of a regular-sized [ToolBar]
const _kToolbarHeight = 52.0;
const kToolbarHeight = 52.0;

/// Defines the width of the leading widget in the [ToolBar]
const _kLeadingWidth = 20.0;
Expand All @@ -16,7 +16,7 @@ const _kLeadingWidth = 20.0;
const _kTitleWidth = 150.0;

/// A toolbar to use in a [MacosScaffold].
class ToolBar extends StatefulWidget with Diagnosticable {
class ToolBar extends StatefulWidget with Diagnosticable implements PreferredSizeWidget {
/// Creates a toolbar in the [MacosScaffold]. The toolbar appears below the
/// title bar (if present) of the macOS app or integrates with it.
///
Expand All @@ -31,9 +31,9 @@ class ToolBar extends StatefulWidget with Diagnosticable {
/// command of your app.
///
/// The height of the ToolBar can be changed with [height].
const ToolBar({
ToolBar({
super.key,
this.height = _kToolbarHeight,
this.height = kToolbarHeight,
this.alignment = Alignment.center,
this.title,
this.titleWidth = _kTitleWidth,
Expand All @@ -46,7 +46,7 @@ class ToolBar extends StatefulWidget with Diagnosticable {
this.dividerColor,
this.allowWallpaperTintingOverrides = true,
this.enableBlur = false,
});
}) : preferredSize = _PreferredToolbarSize(height);

/// Specifies the height of this [ToolBar].
///
Expand Down Expand Up @@ -152,6 +152,12 @@ class ToolBar extends StatefulWidget with Diagnosticable {
/// Whether this [ToolBar] should have a blur backdrop filter applied to it.
final bool enableBlur;

/// Preferred [TooBar]'s [height].
///
/// [MacosScaffold] uses this size to set its [ToolBar]'s height.
@override
final Size preferredSize;

@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
Expand Down Expand Up @@ -181,6 +187,13 @@ class ToolBar extends StatefulWidget with Diagnosticable {
State<ToolBar> createState() => _ToolBarState();
}

class _PreferredToolbarSize extends Size {
_PreferredToolbarSize(this.toolbarHeight)
: super.fromHeight((toolbarHeight ?? kToolbarHeight));

final double? toolbarHeight;
}

class _ToolBarState extends State<ToolBar> {
int overflowedActionsCount = 0;

Expand Down
2 changes: 1 addition & 1 deletion test/buttons/back_button_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ void main() {
navigatorObservers: [
navigatorObserver,
],
home: const MacosWindow(
home: MacosWindow(
child: MacosScaffold(
toolBar: ToolBar(
leading: MacosBackButton(),
Expand Down