Skip to content

Deprecate Scaffold resizeToAvoidBottomPadding, now resizeToAvoidBottomInset - #26259

Merged
HansMuller merged 4 commits into
flutter:masterfrom
HansMuller:nested_scaffolds
Jan 15, 2019
Merged

HansMuller merged 4 commits into
flutter:masterfrom
HansMuller:nested_scaffolds

Conversation

@HansMuller

@HansMuller HansMuller commented Jan 9, 2019 •

Copy link
Copy Markdown
Contributor

Fixes #23106 per the simplified test case from #20295.
Fixes #25758
Fixes #12084
Fixes #15424

Scaffold Layout

Originally the resizeToAvoidBottomPadding flag referred to MediaQueryData.padding. As of #13437 it refers to MediaQueryData.viewInsets. This has caused confusion among developers (me included). Added a Scaffold property called resizeToAvoidBottomInset and deprecated resizeToAvoidBottomPadding. Hopefully this will make things a little clearer to readers. There's a similar property on CupertinoPageScaffold so perhaps we're incrementally more consistent as well.

Updated the MediaQuery docs to clarify viewInsets and padding. Updated the Scaffold docs to further clarify resizeToAvoidBottomInset and its relationship to MediaQuery. Updated the MediaQuery docs similarly.

Nested Layout

Nested scaffolds are inset within the parent's scaffold's insets by viewInset.bottom, to avoid the keyboard). Previously, when the keyboard appeared, the bottom of the inner scaffold was adjusted upwards by 2x the keyboard's height (2x the MediaQuery's viewInsets.bottom value). This is because the body's MediaQuery (added by the Scaffold) did not clear the viewInsets.bottom property, even when it had resized body by as much.

Scaffold now clears the body's MediaQuery viewInsets.bottom value if the body was resized.

Updated the Scaffold docs to discourage developers from using nested scaffolds.

@xster

xster commented Jan 9, 2019

Copy link
Copy Markdown
Member

Is there a bug number.

Not sure if I understood completely but isn't the bug already 'incurred' higher than the scaffold layout? i.e. the outer scaffold should just remove the media query padding and inset and then put the inner scaffold into the zero media query no?

Otherwise, wouldn't other non-scaffold things inside the scaffold still be wrong?

@zoechi zoechi added framework flutter/packages/flutter repository. See also f: labels. p: material_ui material_ui package in flutter/packages labels Jan 9, 2019
Comment thread packages/flutter/lib/src/material/scaffold.dart Outdated
Comment thread packages/flutter/lib/src/material/scaffold.dart Outdated
@goderbauer

Copy link
Copy Markdown
Member

Should we document this nested behavior in the doc comment of Scaffold?

@HansMuller HansMuller changed the title Nested Scaffolds don not inset the body, viewInsets are unconditional Nested Scaffolds dpmt inset the body, viewInsets are unconditional Jan 10, 2019
@HansMuller HansMuller changed the title Nested Scaffolds dpmt inset the body, viewInsets are unconditional Nested Scaffolds don't inset the body, viewInsets are unconditional Jan 10, 2019
@HansMuller HansMuller changed the title Nested Scaffolds don't inset the body, viewInsets are unconditional Deprecate Scaffold resizeToAvoidBottomPadding, now resizeToAvoidBottomInset Jan 10, 2019
Comment thread packages/flutter/lib/src/material/scaffold.dart Outdated
Comment thread packages/flutter/lib/src/material/scaffold.dart Outdated
Comment thread packages/flutter/lib/src/material/scaffold.dart Outdated
Comment thread packages/flutter/lib/src/material/scaffold.dart Outdated
Comment thread packages/flutter/lib/src/material/scaffold.dart Outdated
Comment thread packages/flutter/lib/src/material/scaffold.dart Outdated
Comment thread packages/flutter/lib/src/widgets/media_query.dart Outdated
Comment thread packages/flutter/lib/src/widgets/media_query.dart Outdated
Comment thread packages/flutter/lib/src/widgets/media_query.dart Outdated
Comment thread packages/flutter/lib/src/widgets/media_query.dart Outdated
Comment thread packages/flutter/lib/src/widgets/media_query.dart Outdated
Comment thread packages/flutter/lib/src/widgets/media_query.dart Outdated
Comment thread packages/flutter/lib/src/widgets/media_query.dart Outdated
@xster

xster commented Jan 11, 2019

Copy link
Copy Markdown
Member

The implementation LGTM. Just some doc comments since it's such a central and tricky part of the framework.

@xster

xster commented Jan 12, 2019

Copy link
Copy Markdown
Member

I have trouble keeping up with the changes. Though general LGTM. Feel free to submit when the comments are addressed.

@goderbauer goderbauer left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Implementation LGTM. Just come comments about dart doc comments...

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

uber-nit: The phrase that starts with Better to... doesn't seem to be a sentence?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this clearify that instead of having a separate app bar in each tab there will only be one global app bar for all tabs in this case?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given the confusion around nested Scaffolds, I am wondering if we should expand this example more so it shows that there is only one AppBar and one Scaffold instantiated.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given the number of potentially worthy scaffold examples we could include here, I'd really prefer to not make a big (bigger) example out of this.

Comment thread packages/flutter/lib/src/material/scaffold.dart Outdated
Comment thread packages/flutter/lib/src/material/scaffold.dart Outdated

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[resizeToAvoidBottomInset] with square brackets to directly link to it?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, done.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 for adding this explanation.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe add a "see also" section that links to the explanation given on the top level of MediaQueryData that illustrates the difference between the two?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea, done.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should the doc for padding somehow also mention its independence from viewInsets and how the two relate (even if it's only in a "see also" bullet)?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added a see also bullet per the previous comment.

///
/// ```dart
/// tabController = TabController(vsync this, length tabCount)..addListener(() {
/// tabController = TabController(vsync tickerProvider, length tabCount)..addListener(() {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this one missing : after vsync and length?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes and oops. Thanks for pointing that out so quickly.

@HansMuller
HansMuller merged commit a152a20 into flutter:master Jan 15, 2019
@HansMuller
HansMuller deleted the nested_scaffolds branch January 15, 2019 16:16
kangwang1988 pushed a commit to XianyuTech/flutter that referenced this pull request Feb 12, 2019
@github-actions github-actions Bot locked as resolved and limited conversation to collaborators Aug 8, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

framework flutter/packages/flutter repository. See also f: labels. p: material_ui material_ui package in flutter/packages

Projects

None yet

5 participants