Constructors and named parameters in Flutter - UI Render Trace

Component - Constructors and named parameters

This Flutter component shows how to create a simple widget using constructors with named parameters. It displays a greeting message that changes based on the name passed to the widget.

Widget Tree

Scaffold
├── AppBar
└── Center
    └── GreetingWidget
        └── Text

The Scaffold provides the basic app structure with an AppBar at the top. The Center widget centers its child GreetingWidget on the screen. GreetingWidget uses a Text widget to display a greeting message that includes the name passed via named parameters in its constructor.

Render Trace - 3 Steps

Step 1: Scaffold

Step 2: GreetingWidget

Step 3: Text

State Change - Re-render

Trigger:User taps a button to change the name to 'Bob' (not shown in this example, but imagine a button triggers setState).

Before

GreetingWidget name parameter is 'Alice'.

→

After

GreetingWidget name parameter is 'Bob'.

Re-renders:GreetingWidget subtree including the Text widget re-renders to show 'Hello, Bob!'.

UI Quiz - 3 Questions

What does the named parameter 'name' in GreetingWidget constructor do?

A It allows passing a specific name to display in the greeting.

B It sets the font size of the greeting text.

C It creates a button on the screen.

D It changes the background color of the app.

Key Insight

Using named parameters in constructors makes your Flutter widgets flexible and clear. It helps pass data like user names easily and updates the UI when data changes, keeping your code organized and readable.