Explain relationship between Flexible and Expanded widgets on 'Basic Flutter layout concepts' page
#6300
Labels
e0-minutes
Effort: < 60 min
from.page-issue
Reported in a reader-filed concern
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
TahaTesser
added
st.triage.triage-team
|
Hi @gazialankus |
TahaTesser
added
e0-minutes
atsansone
added
from.page-issue
atsansone
changed the title
Flexible and Expanded widgets on 'Basic Flutter layout concepts' page
|
We are removing this codelab as per #9876. |
sfshaza2
pushed a commit
that referenced
this issue
Nov 30, 2023
We currently have three locations introducing or exploring layout basics in Flutter: [Layouts in Flutter](https://docs.flutter.dev/ui/layout), [Building layouts tutorial](https://docs.flutter.dev/ui/layout/tutorial), and this [Basic Flutter layout concepts codelab](https://docs.flutter.dev/codelabs/layout-basics). We need a better and consolidated layout story. I think rather than hobbling along with these three pieces of outdated and overlapping material, we need to start from a cleaner place where users don't have so many unnecessary choices. As a first step, I think we need to just remove one of these, and I think this codelab is a good choice to start with for a few reasons: - The DartPad technology (testing, solutions, etc) it relies on is going away soon - @johnpryan This page is the main user of DartPad testing functionality on the Flutter site. - The many embedded DartPads result in a slow site loading experience and an essential non-functional mobile experience - The code on the page does not have excerpts and has been outdated, broken, or filled with warnings for surprising amounts of time multiple times in the past - The formatting of the page and text is inconsistent with the rest of the site - With little teaching around each layout type, the API docs are likely a better resource and often have runnable snippets This type of learning experience should eventually be replaced by a consolidated interactive step-by-step in-browser learning experience for intro Flutter concepts. Contributes to #9738 Closes #6300
atsansone
pushed a commit
to atsansone/website
that referenced
this issue
Dec 11, 2023
We currently have three locations introducing or exploring layout basics in Flutter: [Layouts in Flutter](https://docs.flutter.dev/ui/layout), [Building layouts tutorial](https://docs.flutter.dev/ui/layout/tutorial), and this [Basic Flutter layout concepts codelab](https://docs.flutter.dev/codelabs/layout-basics). We need a better and consolidated layout story. I think rather than hobbling along with these three pieces of outdated and overlapping material, we need to start from a cleaner place where users don't have so many unnecessary choices. As a first step, I think we need to just remove one of these, and I think this codelab is a good choice to start with for a few reasons: - The DartPad technology (testing, solutions, etc) it relies on is going away soon - @johnpryan This page is the main user of DartPad testing functionality on the Flutter site. - The many embedded DartPads result in a slow site loading experience and an essential non-functional mobile experience - The code on the page does not have excerpts and has been outdated, broken, or filled with warnings for surprising amounts of time multiple times in the past - The formatting of the page and text is inconsistent with the rest of the site - With little teaching around each layout type, the API docs are likely a better resource and often have runnable snippets This type of learning experience should eventually be replaced by a consolidated interactive step-by-step in-browser learning experience for intro Flutter concepts. Contributes to flutter#9738 Closes flutter#6300
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Page URL
https://docs.flutter.dev/codelabs/layout-basics
Page source
https://github.com/flutter/website/tree/main/src/docs/codelabs/layout-basics.md
Describe the problem
Under Expanded widget, its relation to Flexible is not very clear. Right above this, Flexible(fit: FlexFit.tight) is used, but this is exactly the same as Expanded whereas Expanded is introduced as something different without mentioning that it's exactly the same as what we did in the last task. Also "What’s the difference between Flexible and Expanded" green box does not really answer the question but gives some suggestions that is not very clear.
Expected fix
I think Expanded should be introduced as a shorthand for Flexible(fit: FlexFit.tight), which we just saw in the previous example.
Furthermore, some more clarity about FlexFit.loose would be nice, maybe a more intuitive explanation of what it's for. For example we could say "it makes the child squishable but not stretchable". The child is not always at its preferred size, when there's little space it is squished.
Additional context
No response
The text was updated successfully, but these errors were encountered: