FWE pt 1 #12035

ericwindmill · 2025-05-19T17:49:00Z

Description of what this PR is changing or adding, and why:

This silently adds the "UI 101" pages of the upcoming FWE tutorial. This PR does not include any changes the side nav.

Part of #12063

Pages

Presubmit checklist

This PR is marked as draft with an explanation if not meant to land until a future stable release.
This PR doesn’t contain automatically generated corrections (Grammarly or similar).
This PR follows the Google Developer Documentation Style Guidelines — for example, it doesn’t use i.e. or e.g., and it avoids I and we (first person).
This PR uses semantic line breaks of 80 characters or fewer.

flutter-website-bot · 2025-05-19T17:52:06Z

Visit the preview URL for this PR (updated for commit 346fd6d):

https://flutter-docs-prod--pr12035-flutter-tutorial-p25mm14a.web.app

ericwindmill · 2025-05-19T17:55:30Z

@Sfshaza @antfitch @parlough

For now, my goal is to get reviews on the text, and thus I haven't included images or diagrams, nor have I added the full code to CI. I think all of those things will need to be considered holistically once we know what the page is going to look like.

…r-tutorial

ericwindmill · 2025-05-28T17:34:07Z

@Sfshaza @parlough @antfitch I just finished the text on this PR, and it's ready for review. I'm holding off on making images until we know what the page layout will look like.

sfshaza2

This tutorial feels realllly loooong. Do we want it this long? I don't know the answer, but some newbies to Flutter should test it out.

sfshaza2 · 2025-05-28T23:59:04Z

src/content/tutorial/index.md

+If you prefer to run Flutter apps on Android, 
+iOS, MacOS, or any other supported platform, you’ll have no problem following the tutorial. 
+But some features, like resizing a window to see how UI renders 
+on different screen sizes, aren’t available on mobile simulators.


There's a lot of words here and it's rather confusing. At the end, you mention a limitation of simulators, but the earlier text doesn't even mention simulators. I'd tighten this up, hence the more opinionated. ;)

sfshaza2 · 2025-05-29T00:01:45Z

src/content/tutorial/ui/1-create-an-app.md

+
+**Stateful hot reload**, if you haven't heard of it, allows a running Flutter
+app to re-render updated business logic or UI code in less than a second - all
+without losing your place in the app. This is the part that hooks most Flutter


Suggested change

without losing your place in the app. This is the part that hooks most Flutter

without losing your place in the app. This is the feature that hooks most Flutter

sfshaza2 · 2025-05-29T00:04:29Z

src/content/tutorial/ui/2-widget-fundamentals.md

+
+### Constructor
+
+It has a [`constructor`][], which defines


Suggested change

It has a [`constructor`][], which defines

The `Tile` class has a [`constructor`][] that defines

sfshaza2 · 2025-05-29T00:04:48Z

src/content/tutorial/ui/2-widget-fundamentals.md

+### Constructor
+
+It has a [`constructor`][], which defines
+what data needs to be passed into the widget to render the widget.  Here,a


Suggested change

what data needs to be passed into the widget to render the widget. Here,a

what data needs to be passed into the widget to render the widget. Here, a

sfshaza2 · 2025-05-29T00:05:52Z

src/content/tutorial/ui/2-widget-fundamentals.md

+### `Build` method
+
+Finally, there’s the all important `build` method, which must be defined on
+every widget, and will always return another widget. 


Suggested change

every widget, and will always return another widget.

every visible widget, and will always return another widget.

??

sfshaza2 · 2025-05-29T01:13:25Z

src/content/tutorial/ui/6-stateful-widget.md

+
+:::tip Quick assists
+
+The Flutter plugin for VSCode and Intellij provides ["quick assists"][], which will do this conversion for you.


A HA! Why not just use THIS???

sfshaza2 · 2025-05-29T01:15:19Z

src/content/tutorial/ui/6-stateful-widget.md

+To implement this, update the callback function passed to the
+`GuessInput`. The function needs to call `setState`, and within
+`setState` it needs to execute the logic to determin if the users
+guess was correct. 


Suggested change

To implement this, update the callback function passed to the

`GuessInput`. The function needs to call `setState`, and within

`setState` it needs to execute the logic to determin if the users

guess was correct.

To implement this, update the callback function passed to

`GuessInput`. The function needs to call `setState` and, within

`setState`, it needs to execute the logic to determine whether the users

guess was correct.

sfshaza2 · 2025-05-29T01:16:25Z

src/content/tutorial/ui/7-implicit-animations.md

+title: Simple animations
+description: Learn the simplest way to implement animations in Flutter.
+permalink: /tutorial/animations/
+---


How long should this lesson take? Cause it feels SOOOO LOOONG.

sfshaza2 · 2025-05-29T01:17:32Z

src/content/tutorial/ui/7-implicit-animations.md

+In this lesson, you'll learn about one of the most common and
+versatile implicit animation widgets: [`AnimatedContainer`][]. With
+just two additional lines of code, the background color of each `Tile`
+will change over half a second.


Suggested change

will change over half a second.

animates to a new color in about half a second.

sfshaza2 · 2025-05-29T01:19:43Z

src/content/tutorial/ui/7-implicit-animations.md

+There are many different curves defined by the Flutter SDK, so feel
+free to try them out by passing different types to the
+`AnimatedContainer.curve` property.
+


Do we really need to do this in a beginning lesson?

ericwindmill · 2025-05-29T18:40:09Z

This tutorial feels realllly loooong. Do we want it this long? I don't know the answer, but some newbies to Flutter should test it out.

It's definitely long, and its going to get longer! There are going to be 2 more sections :) (edit: I think this section is going to be the longest by a fair amount.)

But really, Andrew called this project "first week experience" because it was supposed to be all-encompassing and take a week. But I'm very interested in cutting it down where it makes sense. I'm happy to cut out any fluff.

start adding part one content

cc88be2

ericwindmill requested review from sfshaza2, antfitch, parlough and a team as code owners May 19, 2025 17:49

ericwindmill changed the title ~~start adding part one content~~ FWE part 1 May 19, 2025

ericwindmill changed the title ~~FWE part 1~~ FWE May 19, 2025

ericwindmill marked this pull request as draft May 19, 2025 17:50

ericwindmill added 5 commits May 23, 2025 12:52

add next lesson markdown

a7c6eb6

fix codeblock

877f053

format

49c09ae

Merge branch 'main' of https://github.com/flutter/website into flutte…

9537045

…r-tutorial

adds layout lesson

bb49d0d

ericwindmill marked this pull request as ready for review May 23, 2025 21:35

ericwindmill added 6 commits May 27, 2025 10:37

adds devtools lesson

0e6747e

Merge branch 'main' of https://github.com/flutter/website into flutte…

43f94e0

…r-tutorial

fixes docs links

714972a

fixes docs links

f1114eb

add user input

16c8df1

cleanup

2d47d4f

ericwindmill changed the title ~~FWE~~ FWE pt 1 May 27, 2025

ericwindmill added 3 commits May 27, 2025 12:36

cleanup

5b0895d

add stateful widget lesson

e7f4d03

add implicit animations

346fd6d

sfshaza2 reviewed May 29, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

FWE pt 1 #12035

FWE pt 1 #12035

Uh oh!

ericwindmill commented May 19, 2025 •

edited

Loading

Uh oh!

flutter-website-bot commented May 19, 2025 •

edited

Loading

Uh oh!

ericwindmill commented May 19, 2025

Uh oh!

ericwindmill commented May 28, 2025

Uh oh!

sfshaza2 left a comment

Uh oh!

sfshaza2 May 28, 2025

Uh oh!

sfshaza2 May 29, 2025

Uh oh!

sfshaza2 May 29, 2025

Uh oh!

sfshaza2 May 29, 2025

Uh oh!

sfshaza2 May 29, 2025

Uh oh!

sfshaza2 May 29, 2025

Uh oh!

sfshaza2 May 29, 2025

Uh oh!

sfshaza2 May 29, 2025

Uh oh!

sfshaza2 May 29, 2025

Uh oh!

sfshaza2 May 29, 2025

Uh oh!

ericwindmill commented May 29, 2025 •

edited

Loading

Uh oh!

Uh oh!

	without losing your place in the app. This is the part that hooks most Flutter
	without losing your place in the app. This is the feature that hooks most Flutter

	It has a [`constructor`][], which defines
	The `Tile` class has a [`constructor`][] that defines

	what data needs to be passed into the widget to render the widget. Here,a
	what data needs to be passed into the widget to render the widget. Here, a

	every widget, and will always return another widget.
	every visible widget, and will always return another widget.


		:::tip Quick assists

		The Flutter plugin for VSCode and Intellij provides ["quick assists"][], which will do this conversion for you.

	will change over half a second.
	animates to a new color in about half a second.

FWE pt 1 #12035

Are you sure you want to change the base?

FWE pt 1 #12035

Uh oh!

Conversation

ericwindmill commented May 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Presubmit checklist

Uh oh!

flutter-website-bot commented May 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ericwindmill commented May 19, 2025

Uh oh!

ericwindmill commented May 28, 2025

Uh oh!

sfshaza2 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!

ericwindmill commented May 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

ericwindmill commented May 19, 2025 •

edited

Loading

flutter-website-bot commented May 19, 2025 •

edited

Loading

ericwindmill commented May 29, 2025 •

edited

Loading