Skip to content
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

Jump to bottom

Introduce and use Padding instead of Container when it makes sense in 'Building layouts' #9118

Closed
Tracked by #9738
parlough opened this issue Jul 25, 2023 · 2 comments · Fixed by #9893 or #9937
Closed
Tracked by #9738

Introduce and use Padding instead of Container when it makes sense in 'Building layouts' #9118

parlough opened this issue Jul 25, 2023 · 2 comments · Fixed by #9893 or #9937
Assignees
@atsansone
Labels
a.tut.tutorial Relates to the Tutorial section of docs.flutter.dev e1-hours Effort: < 8 hrs from.team Reported by Dash docs team member p3-low Valid but not urgent concern. Resolve when possible. Encourage upvote to surface. t.ui.general Relates to general Flutter app UI topics t.ui.layout Relates to layout of UI components

Comments

@parlough
Copy link
Member

Page URL

https://docs.flutter.dev/ui/layout/tutorial/

Page source

https://github.com/flutter/website/tree/main/src/ui/layout/tutorial.md

Describe the problem

Container is used in the tutorial when Padding would work well.

Expected fix

Add some text to introduce Padding and its relationship to Container then update the following steps to use it.

Additional context

#9088 (comment)
@parlough parlough added a.tut.tutorial Relates to the Tutorial section of docs.flutter.dev p3-low Valid but not urgent concern. Resolve when possible. Encourage upvote to surface. e1-hours Effort: < 8 hrs t.ui.general Relates to general Flutter app UI topics t.ui.layout Relates to layout of UI components labels Jul 25, 2023
@parlough parlough mentioned this issue Jul 25, 2023
Merged
@eshfield
Copy link
Contributor

Just a side note to keep in mind and maybe to note in the tutorial.

As the documentation page Padding class says in the Design discussion section, there is actually no difference between usage of dedicated Padding widget and of Container with .padding prorerty:

Why use a Padding widget rather than a Container with a Container.padding property?
There isn't really any difference between the two. If you supply a Container.padding argument, Container builds a Padding widget for you.

and

If you find Container convenient, feel free to use it. If not, feel free to build these simpler widgets in whatever combination meets your needs.

@atsansone atsansone added the from.team Reported by Dash docs team member label Aug 8, 2023
@atsansone atsansone self-assigned this Oct 31, 2023
@atsansone atsansone mentioned this issue Oct 31, 2023
Open
9 tasks
@atsansone atsansone mentioned this issue Dec 6, 2023
Merged
atsansone added a commit that referenced this issue Dec 13, 2023
@atsansone
Update layout tutorial for current best practices (#9893)
d93a46c 
This refactors the Layout Tutorial for current best practice including
adding screenshots and using Padding where needed.

Fixes #2108
Fixes #1799 
Fixes #9118
@parlough
Copy link
Member Author

Reopening since the change was reverted in #9927

@parlough parlough reopened this Dec 15, 2023
@atsansone atsansone mentioned this issue Dec 15, 2023
Merged
atsansone added a commit that referenced this issue Dec 20, 2023
@atsansone @kenzieschmoll
Restore "Update layout tutorial for current best practices" with upda…
cd09215 
…tes (#9937)

Reverts #9927

Fixes #2108
Fixes #1799 
Fixes #9118 

Based on discussion with @parlough .

- #9925 caused by adding
`width: 100%` to `site-figure-container`. Likely should be `max-width`.
Need to change one line in this.

```css
  .site-figure-container {
    flex: 0 1 auto;
    width: 100%;
    max-width: 100%;
```  

- The code block in the `Update the app to display the button section`
section failed to render.
- Step 4 of the [Interactivity
page](https://docs.flutter.dev/ui/interactivity#step-4-plug-the-stateful-widget-into-the-widget-tree)
was changed so the diff no longer makes sense.

---------

Co-authored-by: Kenzie Davisson <43759233+kenzieschmoll@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@atsansone atsansone

Labels
a.tut.tutorial Relates to the Tutorial section of docs.flutter.dev e1-hours Effort: < 8 hrs from.team Reported by Dash docs team member p3-low Valid but not urgent concern. Resolve when possible. Encourage upvote to surface. t.ui.general Relates to general Flutter app UI topics t.ui.layout Relates to layout of UI components
Projects
None yet
Milestone
No milestone
3 participants
@atsansone @parlough @eshfield