Converted GuessInput to a StatefulWidget in Stateful widgets tutorial - #13653
Converted GuessInput to a StatefulWidget in Stateful widgets tutorial#13653MuthuGCodes wants to merge 9 commits into
Conversation
|
Staged preview of the updated docs.flutter.dev site (updated for commit 8150ada): https://flutter-docs-prod--docs-pr13653-mg-guessinput-issue-3th19sc7.web.app |
|
Staged preview of the updated flutter.dev site (updated for commit 8150ada): https://flutter-dev-230821--www-pr13653-mg-guessinput-issue-hk3zmet1.web.app |
| @@ -0,0 +1,8 @@ | |||
| { | |||
There was a problem hiding this comment.
This file is local to your IDE. You can remove it.
| 1. Implement `dispose()` to clean up `_textEditingController` and `_focusNode`. | ||
|
|
||
| Your modified `GuessInput` widget should look like this: | ||
|
|
There was a problem hiding this comment.
For code excerpts in the tutorial we follow these steps:
- Write the updated code into the corresponding /examples/FWE/lib file.
- Add a tag like the following:
<?code-excerpt "fwe/birdle/lib/step5_main.dart (GuessInput)"?> - Run the following command: dart run dash_site --site=docs refresh-excerpts
Following this flow will ensure the code snippets in our .MD files are always up to date with what is in the /examples dir.
MuthuGCodes
left a comment
There was a problem hiding this comment.
Incorporated review comments
There was a problem hiding this comment.
Code Review
This pull request converts the GuessInput widget from a StatelessWidget to a StatefulWidget in the Birdle example to properly manage the lifecycles of TextEditingController and FocusNode, including their disposal. It also updates the tutorial documentation to explain this transition. Feedback was provided to correct a conceptual explanation in the documentation regarding Flutter's widget recreation lifecycle, clarifying that controllers persist because they are moved to the persistent State object rather than being recreated with the widget instance.
| Because `GuessInput` was originally created as a `StatelessWidget`, | ||
| every rebuild creates a new `GuessInput` instance, | ||
| along with a new `TextEditingController` and `FocusNode`. | ||
| This causes the text input field to lose focus after submitting a guess | ||
| and leaves unused controllers without proper disposal. |
There was a problem hiding this comment.
The explanation states that a new GuessInput instance is created on every rebuild because it was a StatelessWidget. However, in Flutter, widget instances are immutable and are recreated on almost every rebuild regardless of whether they are stateful or stateless.
The actual issue is that the TextEditingController and FocusNode were declared as fields of the GuessInput widget class itself. Because the widget is recreated on every parent rebuild, these controllers were also re-instantiated, causing the loss of focus/state and memory leaks.
By converting to a StatefulWidget, these controllers are moved to the persistent State object (_GuessInputState), which survives widget recreation.
Consider clarifying this distinction to help learners better understand Flutter's widget vs. state lifecycle.
| Because `GuessInput` was originally created as a `StatelessWidget`, | |
| every rebuild creates a new `GuessInput` instance, | |
| along with a new `TextEditingController` and `FocusNode`. | |
| This causes the text input field to lose focus after submitting a guess | |
| and leaves unused controllers without proper disposal. | |
| Because `GuessInput` was originally created as a `StatelessWidget`, | |
| its `TextEditingController` and `FocusNode` were stored directly in the widget class. | |
| Since a new widget instance is created on every rebuild, these controllers | |
| were recreated each time, causing the text input field to lose focus | |
| and leaving unused controllers without proper disposal. |
Rebuilding
GamePage(after converting it toStatefulWidget) recreatesGuessInput(which is currently aStatelessWidget), resetting its internalFocusNodeandTextEditingControllerand breaking focus behavior. The fix is to convertGuessInputto aStatefulWidgetin the "Stateful widgets" tutorial step and the example code.Fixes #13392