Mention visualDensity impact on ButtonStyle.padding documentation #147048

bleroux · 2024-04-19T12:43:46Z

Description

This PR adds some information about how the Material buttons padding is impacted by visual density.

Related Issue

Fixes #137411

Tests

Documentation only.

HansMuller · 2024-04-22T16:34:48Z

packages/flutter/lib/src/material/button_style.dart

Is the default padding based on visualDensity or is the specified padding changed based on visualDensity?

The padding is first resolved (the one specified if set, otherwhise the default one) then changed based on visual density.
Here is where this logic is located:

flutter/packages/flutter/lib/src/material/button_style_button.dart

Lines 396 to 400 in 4c46030

final double dy = densityAdjustment.dy;

final double dx = math.max(0, densityAdjustment.dx);

final EdgeInsetsGeometry padding = resolvedPadding!

.add(EdgeInsets.fromLTRB(dx, dy, dx, dy))

.clamp(EdgeInsets.zero, EdgeInsetsGeometry.infinity);

Thanks for clarifying that. Since this is somewhat unusual, it might be good to emphasize it a little. For example:

The vertical aspect of the default or user-specified padding is adjusted automatically based on visualDensity.

Thanks a lot for this great rewording and for all the other suggestions (today I learned a new english word: wordsmithing 🎉)

HansMuller

This looks like a nice improvement. Just some minor wordsmithing.

HansMuller · 2024-04-22T17:30:10Z

packages/flutter/lib/src/material/button_style.dart

Suggested change

/// When the visual density is [VisualDensity.compact], the top and bottom paddings

/// When the visual density is [VisualDensity.compact], the top and bottom insets

HansMuller · 2024-04-22T17:31:26Z

packages/flutter/lib/src/material/button_style.dart

Suggested change

/// are reduced by 8.0 pixels or set to 0 pixels if the result of the reduced padding

/// are reduced by 8 pixels or set to 0 pixels if the result of the reduced padding

HansMuller · 2024-04-22T17:31:56Z

packages/flutter/lib/src/material/button_style.dart

Suggested change

/// is negative. E.g. The visual density defaults to [VisualDensity.compact] on desktop

/// is negative. For example: the visual density defaults to [VisualDensity.compact] on desktop

HansMuller · 2024-04-22T17:32:38Z

packages/flutter/lib/src/material/button_style.dart

Suggested change

/// and web, if the provided padding is 16 pixels on the top and bottom, it will be

/// and web, so if the provided padding is 16 pixels on the top and bottom, it will be

HansMuller · 2024-04-22T17:33:02Z

packages/flutter/lib/src/material/button_style.dart

Suggested change

/// it will result to no padding on the top and bottom.

/// the result will be no padding on the top and bottom.

HansMuller · 2024-04-22T17:33:32Z

packages/flutter/lib/src/material/button_style.dart

Suggested change

/// are reduced by 4.0 pixels or set to 0 pixels if the result of the reduced padding

/// are reduced by 4 pixels or set to 0 pixels if the result of the reduced padding

HansMuller · 2024-04-22T17:33:46Z

packages/flutter/lib/src/material/button_style.dart

Suggested change

/// When the visual density is [VisualDensity.standard] the top and bottom paddings

/// When the visual density is [VisualDensity.standard] the top and bottom insets

HansMuller · 2024-04-22T17:34:48Z

packages/flutter/lib/src/material/button_style.dart

Suggested change

/// are not changed. E.g. The visual density defaults to [VisualDensity.standard]

/// are not changed. The visual density defaults to [VisualDensity.standard]

HansMuller · 2024-04-22T17:35:03Z

packages/flutter/lib/src/material/button_style.dart

Suggested change

/// on mobile,

/// on mobile.

HansMuller · 2024-04-22T17:36:12Z

packages/flutter/lib/src/material/button_style.dart

Suggested change

/// reduced to 8 pixels on the top and bottom, if the provided padding is 4 pixels,

/// reduced to 8 pixels on the top and bottom. If the provided padding is 4 pixels,

…tion (flutter/flutter#147048)

flutter/flutter@140edb9...77043ba 2024-04-23 [email protected] Roll Flutter Engine from ffd3911b1ff7 to 79f49954cce8 (2 revisions) (flutter/flutter#147235) 2024-04-23 [email protected] Roll Flutter Engine from c7d9deb66bf7 to ffd3911b1ff7 (1 revision) (flutter/flutter#147227) 2024-04-23 [email protected] Roll pub packages (flutter/flutter#147220) 2024-04-23 [email protected] Roll Flutter Engine from 075d834489d0 to c7d9deb66bf7 (2 revisions) (flutter/flutter#147215) 2024-04-23 [email protected] Mention visualDensity impact on ButtonStyle.padding documentation (flutter/flutter#147048) 2024-04-23 [email protected] Roll Flutter Engine from 9c0d24ff1cb6 to 075d834489d0 (1 revision) (flutter/flutter#147214) 2024-04-23 [email protected] Fix memory leaks in `CupertinoTextMagnifier` (flutter/flutter#147208) 2024-04-23 [email protected] Roll Flutter Engine from 004e98839ed7 to 9c0d24ff1cb6 (1 revision) (flutter/flutter#147211) 2024-04-23 [email protected] Roll Flutter Engine from 79f753650c6e to 004e98839ed7 (1 revision) (flutter/flutter#147209) 2024-04-23 [email protected] Roll Flutter Engine from f8e373da5227 to 79f753650c6e (1 revision) (flutter/flutter#147206) 2024-04-23 [email protected] fixes cupertino page transition leak (flutter/flutter#147133) 2024-04-23 [email protected] Fix memory leaks in `PopupMenu` (flutter/flutter#147174) 2024-04-23 [email protected] Roll Flutter Engine from 62c9f17169cf to f8e373da5227 (2 revisions) (flutter/flutter#147205) 2024-04-23 [email protected] Roll Flutter Engine from 33c828fb3ff5 to 62c9f17169cf (4 revisions) (flutter/flutter#147203) 2024-04-23 49699333+dependabot[bot]@users.noreply.github.com Bump actions/upload-artifact from 4.3.2 to 4.3.3 (flutter/flutter#147192) 2024-04-23 49699333+dependabot[bot]@users.noreply.github.com Bump github/codeql-action from 3.25.1 to 3.25.2 (flutter/flutter#147193) 2024-04-23 [email protected] Roll Flutter Engine from a4b71f02a1c7 to 33c828fb3ff5 (9 revisions) (flutter/flutter#147190) 2024-04-22 [email protected] Roll pub packages (flutter/flutter#147094) 2024-04-22 [email protected] Re-land fix for not disposed TabController (flutter/flutter#146745) 2024-04-22 [email protected] Roll Flutter Engine from 75ca2195c936 to a4b71f02a1c7 (1 revision) (flutter/flutter#147175) 2024-04-22 [email protected] Update `examples/api` for android platform (flutter/flutter#147102) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

…tion (flutter/flutter#147048)

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Apr 19, 2024

bleroux requested review from HansMuller and gspencergoog and removed request for gspencergoog April 19, 2024 13:21

HansMuller reviewed Apr 22, 2024

View reviewed changes

HansMuller approved these changes Apr 22, 2024

View reviewed changes

bleroux added 2 commits April 23, 2024 09:11

Mention visualDensity impact on ButtonStyle.padding documentation

29e7f2d

Apply review comments

f7bce71

bleroux force-pushed the add_button_style_doc_mentionning_visualDensity_impact_on_padding branch from 9465fd1 to f7bce71 Compare April 23, 2024 07:33

bleroux added the autosubmit Merge PR when tree becomes green via auto submit App label Apr 23, 2024

auto-submit bot merged commit e9926c4 into flutter:master Apr 23, 2024

bleroux deleted the add_button_style_doc_mentionning_visualDensity_impact_on_padding branch April 23, 2024 09:13

engine-flutter-autoroll mentioned this pull request Apr 23, 2024

Roll Flutter from 140edb988312 to 77043bae1a5e (21 revisions) flutter/packages#6599

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 23, 2024

e9926c4 Mention visualDensity impact on ButtonStyle.padding documenta…

b10bd40

…tion (flutter/flutter#147048)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 6, 2024

e9926c4 Mention visualDensity impact on ButtonStyle.padding documenta…

b0216c5

…tion (flutter/flutter#147048)

	final double dy = densityAdjustment.dy;
	final double dx = math.max(0, densityAdjustment.dx);
	final EdgeInsetsGeometry padding = resolvedPadding!
	.add(EdgeInsets.fromLTRB(dx, dy, dx, dy))
	.clamp(EdgeInsets.zero, EdgeInsetsGeometry.infinity);

	/// When the visual density is [VisualDensity.compact], the top and bottom paddings
	/// When the visual density is [VisualDensity.compact], the top and bottom insets

	/// are reduced by 8.0 pixels or set to 0 pixels if the result of the reduced padding
	/// are reduced by 8 pixels or set to 0 pixels if the result of the reduced padding

	/// is negative. E.g. The visual density defaults to [VisualDensity.compact] on desktop
	/// is negative. For example: the visual density defaults to [VisualDensity.compact] on desktop

	/// and web, if the provided padding is 16 pixels on the top and bottom, it will be
	/// and web, so if the provided padding is 16 pixels on the top and bottom, it will be

	/// it will result to no padding on the top and bottom.
	/// the result will be no padding on the top and bottom.

	/// are reduced by 4.0 pixels or set to 0 pixels if the result of the reduced padding
	/// are reduced by 4 pixels or set to 0 pixels if the result of the reduced padding

	/// are not changed. E.g. The visual density defaults to [VisualDensity.standard]
	/// are not changed. The visual density defaults to [VisualDensity.standard]

	/// reduced to 8 pixels on the top and bottom, if the provided padding is 4 pixels,
	/// reduced to 8 pixels on the top and bottom. If the provided padding is 4 pixels,

Mention visualDensity impact on ButtonStyle.padding documentation #147048

Mention visualDensity impact on ButtonStyle.padding documentation #147048

Uh oh!

Conversation

bleroux commented Apr 19, 2024

Description

Related Issue

Tests

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HansMuller left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants