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.