Widget tree concept in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Understanding Widget Tree Rendering

Given the Flutter widget tree below, what will be the color of the text displayed on the screen?

Flutter

MaterialApp(
  home: Scaffold(
    body: Container(
      color: Colors.blue,
      child: Center(
        child: Text('Hello', style: TextStyle(color: Colors.white)),
      ),
    ),
  ),
)

A The text will be black on a white background.

B The text will be black on a blue background.

C The text will be white on a blue background.

D The text will be white on a white background.

💡 Hint

Look at the Container's color and the TextStyle color.

The Container sets the background color to blue. The Text widget has its color set to white, so the text appears white on blue.

❓ navigation

intermediate

Widget Tree and Navigation Stack

In a Flutter app, if you push a new route onto the Navigator stack, how does it affect the widget tree?

A A new widget subtree is added on top of the existing widget tree representing the new route.

B The entire widget tree is replaced by the new route's widget tree.

C The widget tree remains unchanged; only the state changes.

D The previous route's widgets are removed from the tree immediately.

💡 Hint

Think about how Flutter shows new screens without losing the old ones.

When a new route is pushed, Flutter adds a new widget subtree on top of the existing tree to represent the new screen, preserving the previous routes below.

❓ lifecycle

advanced

Widget Tree and State Lifecycle

Which lifecycle method is called when a StatefulWidget is removed from the widget tree permanently?

A build()

B initState()

C didUpdateWidget()

D dispose()

💡 Hint

This method is used to clean up resources.

The dispose() method is called when the StatefulWidget is permanently removed from the widget tree to release resources.

📝 Syntax

advanced

Correct Widget Tree Syntax

Which of the following Flutter widget trees is syntactically correct?

A Column(child: [Text('A'), Text('B')])

B Column(children: [Text('A'), Text('B')])

C Column(children: Text('A'), Text('B'))

D Column(children = [Text('A'), Text('B')])

💡 Hint

Check the property name and value types for Column.

The Column widget expects a 'children' property with a list of widgets. Option B uses the correct syntax.

🔧 Debug

expert

Diagnosing Widget Tree Build Errors

You have this widget tree snippet: Container( child: Text('Hello'), color: Colors.red, child: Icon(Icons.star), ) What error will this cause?

A A syntax error because 'child' is specified twice in Container.

B The Container will show both Text and Icon widgets stacked.

C The Container will only show the Text widget, ignoring the Icon.

D The Container will only show the Icon widget, ignoring the Text.

💡 Hint

Check the Container properties carefully.

A widget property cannot be specified twice. Having two 'child' properties causes a syntax error.