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

Add screenshots in step 2-5 on 'Building Layouts' page #2108

Closed
Tracked by #9738
galeyang opened this issue Dec 21, 2018 · 3 comments · Fixed by #9893 or #9937
Closed
Tracked by #9738

Add screenshots in step 2-5 on 'Building Layouts' page #2108

galeyang opened this issue Dec 21, 2018 · 3 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 fix.screenshot Needs new or update to screenshot from.study Reported in a UX study p2-medium Necessary but not urgent concern. Resolve when possible. t.ui.general Relates to general Flutter app UI topics t.ui.layout Relates to layout of UI components

Comments

@galeyang
Copy link
Contributor

galeyang commented Dec 21, 2018 •
edited by atsansone
Loading

Page URL: https://docs.flutter.dev/ui/layout/tutorial
Page source: https://github.com/flutter/website/blob/master/src/docs/development/ui/layout/tutorial.md

Description:
In a recent study, participants had to scroll up and down to compare the image on the top of the page and the code samples in each step. One participant suggested putting relevant screenshots close to (above) the UI code samples to set the context.

For example --

Step 2: Implement the title row

image
First, you’ll build the left column [...]

Step 3: Implement the button row

image
The button section contains 3 columns [...]

cc: @jayoung-lee @sfshaza2
@galeyang galeyang added the ux.research Relates to UX research need label Dec 21, 2018
@chalin chalin added e0-minutes Effort: < 60 min e1-hours Effort: < 8 hrs p2-medium Necessary but not urgent concern. Resolve when possible. labels Dec 21, 2018
@chalin
Copy link
Contributor

chalin commented Jan 28, 2019

The tutorial is now setup so that each step is a full app, so it should be easy to get the screenshots once we have the basic screen capture tooling in place. cc @RedBrogdon

@chalin chalin removed the e0-minutes Effort: < 60 min label Jan 28, 2019
@InMatrix InMatrix added from.study Reported in a UX study and removed ux.research Relates to UX research need labels Aug 8, 2019
@atsansone atsansone added t.ui.general Relates to general Flutter app UI topics t.ui.layout Relates to layout of UI components a.tut.tutorial Relates to the Tutorial section of docs.flutter.dev fix.screenshot Needs new or update to screenshot ltw-triage labels May 25, 2023
@atsansone atsansone changed the title 'Building Layouts' page: add screenshots in step 2-5 Add screenshots in step 2-5 on 'Building Layouts' page Jun 1, 2023
@atsansone
Copy link
Contributor

Related to #8922 and #3056.

@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 4, 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

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 fix.screenshot Needs new or update to screenshot from.study Reported in a UX study p2-medium Necessary but not urgent concern. Resolve when possible. 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
5 participants
@InMatrix @atsansone @chalin @galeyang @parlough