Named routes in Flutter - UI Render Trace

Component - Named routes

This Flutter example shows how to use named routes to navigate between two screens. Named routes let you give each screen a simple name, so you can move between them easily without writing the full widget code every time.

Widget Tree

MaterialApp
├── Scaffold (HomeScreen)
│   ├── AppBar
│   └── Center
│       └── ElevatedButton
└── Scaffold (SecondScreen)
    ├── AppBar
    └── Center
        └── Text

The root widget is MaterialApp which manages named routes. It shows HomeScreen first, which has a Scaffold with an AppBar and a centered button. When the button is pressed, it navigates to SecondScreen, which also has a Scaffold with an AppBar and centered text.

Render Trace - 5 Steps

Step 1: MaterialApp

Step 2: HomeScreen Scaffold

Step 3: ElevatedButton

Step 4: Navigation pushNamed('/second')

Step 5: SecondScreen Scaffold

State Change - Re-render

Trigger:User taps the 'Go to Second Screen' button

Before

HomeScreen is displayed with button visible

→

After

SecondScreen is displayed with welcome text

Re-renders:The entire screen changes from HomeScreen Scaffold to SecondScreen Scaffold

UI Quiz - 3 Questions

What does the named route '/' represent in this app?

A The SecondScreen widget

B The HomeScreen widget

C A button widget

D The MaterialApp widget

Key Insight

Using named routes in Flutter helps keep navigation simple and organized. Instead of creating new widget instances everywhere, you just call Navigator.pushNamed with a route name. This makes your code cleaner and easier to maintain, especially as your app grows.