Widget tree concept in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic Flutter app with a centered text widget.

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp([1]);
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Drag options to blanks, or click blank then click option'

AMaterialApp()

BText('Hello World')

CMyApp()

DCenter()

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a widget that is not the root app widget to runApp.

Forgetting the parentheses after the class name.

The runApp function needs to receive the root widget of the app, which is MyApp().

2fill in blank

medium

Complete the code to add an AppBar with a title inside the Scaffold widget.

Flutter

Scaffold(
  appBar: [1](
    title: Text('My App'),
  ),
  body: Center(child: Text('Content')),
)

Drag options to blanks, or click blank then click option'

AAppBar

BText

CCenter

DContainer

Attempts:

3 left

💡 Hint

Common Mistakes

Using Center or Container instead of AppBar for the appBar property.

Forgetting to wrap the title text in a Text widget.

The appBar property expects an AppBar widget to show a top bar with a title.

3fill in blank

hard

Fix the error in the widget tree by completing the code to wrap multiple children vertically.

Flutter

body: [1](
  children: [
    Text('First'),
    Text('Second'),
  ],
),

Drag options to blanks, or click blank then click option'

AColumn

BRow

CStack

DContainer

Attempts:

3 left

💡 Hint

Common Mistakes

Using Row which arranges children horizontally.

Using Container which does not take multiple children.

Column arranges children vertically, which fits the requirement.

4fill in blank

hard

Fill both blanks to create a widget tree with padding around a centered text.

Flutter

body: [1](
  padding: EdgeInsets.all(16),
  child: [2](
    child: Text('Padded Center'),
  ),
),

Drag options to blanks, or click blank then click option'

APadding

BContainer

CCenter

DAlign

Attempts:

3 left

💡 Hint

Common Mistakes

Using Container instead of Padding for spacing.

Using Align instead of Center for centering.

Padding adds space around its child, and Center centers its child inside.

5fill in blank

hard

Fill all three blanks to build a widget tree with a Scaffold, an AppBar, and a floating action button.

Flutter

return Scaffold(
  appBar: [1](
    title: Text('Home'),
  ),
  body: Center(child: Text('Welcome')),
  floatingActionButton: [2](
    onPressed: () {},
    child: [3](Icons.add),
  ),
);

Drag options to blanks, or click blank then click option'

AAppBar

BFloatingActionButton

CIcon

DRaisedButton

Attempts:

3 left

💡 Hint

Common Mistakes

Using RaisedButton instead of FloatingActionButton.

Forgetting to wrap the icon inside the button.

AppBar creates the top bar, FloatingActionButton is the round button, and Icon shows the plus sign inside it.

Practice

1. What does the widget tree in Flutter represent?

easy

A. The hierarchy of widgets nested inside each other

B. The list of all files in the project

C. The sequence of user taps on the screen

D. The colors used in the app theme

Solution

1. Step 1: Understand the widget tree concept

   The widget tree shows how widgets are arranged inside each other to build the UI.

2. Step 2: Identify what the widget tree is not

   It is not about files, user taps, or colors but about widget hierarchy.

3. Final Answer:

   The hierarchy of widgets nested inside each other -> Option A

4. Quick Check:

   Widget tree = widget hierarchy [OK]

Hint: Widget tree = nested widgets structure [OK]

Common Mistakes:

• Confusing widget tree with project files
• Thinking widget tree tracks user actions
• Mixing widget tree with app colors

2. Which of the following is the correct way to nest widgets in Flutter?

easy

A. Container > Text('Hello') > Icon(Icons.star)

B. Column(children: [Text('Hello'), Icon(Icons.star)])

C. Text('Hello').children = [Icon(Icons.star)]

D. Row(Text('Hello'), Icon(Icons.star))

Solution

1. Step 1: Check Flutter widget nesting syntax

   Widgets like Column accept a children list with widgets inside square brackets.

2. Step 2: Compare options to correct syntax

   Column(children: [Text('Hello'), Icon(Icons.star)]) uses Column with children list correctly; others use invalid syntax.

3. Final Answer:

   Column(children: [Text('Hello'), Icon(Icons.star)]) -> Option B

4. Quick Check:

   Use children: [ ... ] to nest widgets [OK]

Hint: Use children: [widget1, widget2] to nest widgets [OK]

Common Mistakes:

• Trying to assign children directly to Text widget
• Using > symbol for nesting
• Passing widgets as function arguments without children list

3. What will be displayed by this widget tree?

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

medium

A. A horizontal list: A, B, C, D all side by side

B. A vertical list: A, B, C, D all stacked vertically

C. A vertical list: A, then B and C side by side, then D below

D. Only texts A and D displayed vertically, B and C hidden

Solution

1. Step 1: Understand Column and Row layout

   Column arranges children vertically; Row arranges children horizontally.

2. Step 2: Analyze the widget tree

   Text 'A' is first vertically, then Row with 'B' and 'C' side by side, then Text 'D' below.

3. Final Answer:

   A vertical list: A, then B and C side by side, then D below -> Option C

4. Quick Check:

   Column vertical + Row horizontal = A [OK]

Hint: Column stacks vertically, Row stacks horizontally [OK]

Common Mistakes:

• Assuming all texts are horizontal
• Thinking Row children stack vertically
• Ignoring nesting of Row inside Column

4. Identify the error in this widget tree code:

Column(
  children: [
    Text('Hello'),
    Icon(Icons.star),
    Text('World')
  ]
  mainAxisAlignment: MainAxisAlignment.center,
)

medium

A. mainAxisAlignment should be inside children list

B. Text widgets cannot be inside Column

C. Icon widget is not allowed inside children

D. Missing comma after children list before mainAxisAlignment

Solution

1. Step 1: Check syntax for widget properties

   Properties like mainAxisAlignment must be separated by commas from children list.

2. Step 2: Identify missing comma

   There is no comma after the children list before mainAxisAlignment, causing syntax error.

3. Final Answer:

   Missing comma after children list before mainAxisAlignment -> Option D

4. Quick Check:

   Separate properties with commas [OK]

Hint: Add commas between widget properties [OK]

Common Mistakes:

• Putting mainAxisAlignment inside children list
• Thinking Icon can't be child of Column
• Missing commas between widget properties

5. You want to create a screen with a blue background and a centered text 'Welcome'. Which widget tree correctly achieves this?

hard

A. Scaffold(body: Container(color: Colors.blue, child: Center(child: Text('Welcome'))))

B. Container(child: Scaffold(color: Colors.blue, child: Text('Welcome')))

C. Center(child: Scaffold(body: Text('Welcome'), backgroundColor: Colors.blue))

D. Scaffold(backgroundColor: Colors.blue, child: Text('Welcome', alignment: Alignment.center))

Solution

1. Step 1: Understand Scaffold and Container roles

   Scaffold provides the basic screen structure; Container can set background color.

2. Step 2: Check widget nesting for centering text

   Container with color wraps Center widget which centers Text inside Scaffold's body.

3. Step 3: Verify other options

   Options A, C, D misuse Scaffold or color properties causing errors or wrong layout.

4. Final Answer:

   Scaffold(body: Container(color: Colors.blue, child: Center(child: Text('Welcome')))) -> Option A

5. Quick Check:

   Scaffold + Container color + Center text = B [OK]

Hint: Use Scaffold body with Container color and Center for text [OK]

Common Mistakes:

• Setting color on Scaffold directly (wrong property)
• Placing Scaffold inside Container
• Not wrapping Text with Center widget