Why everything in Flutter is a widget - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple 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 Flutter!'),
        ),
      ),
    );
  }
}

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

AScaffold()

BMyApp()

CMaterialApp()

DText('Hello')

Attempts:

3 left

💡 Hint

Common Mistakes

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

Forgetting to wrap widgets inside MaterialApp.

The runApp function requires a widget to start the app. Here, MyApp() is the root widget.

2fill in blank

medium

Complete the code to add a blue background color to the Scaffold widget.

Flutter

Scaffold(
  backgroundColor: [1],
  body: Center(child: Text('Blue background')),
)

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

AColors.blue

BColors.green

CColors.red

DColors.yellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string like 'blue' instead of Colors.blue.

Forgetting to set backgroundColor property.

The backgroundColor property accepts a Color. Colors.blue sets a blue background.

3fill in blank

hard

Fix the error in the code by completing the widget tree with the correct widget type.

Flutter

return [1](
  children: [
    Text('Item 1'),
    Text('Item 2'),
  ],
);

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

AContainer

BText

CColumn

DScaffold

Attempts:

3 left

💡 Hint

Common Mistakes

Using Text widget with children causes error.

Using Container without child property.

Column widget arranges children vertically. Text and Container do not accept children list.

4fill in blank

hard

Fill both blanks to create a button that prints a message when pressed.

Flutter

ElevatedButton(
  onPressed: [1],
  child: [2],
)

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

A() => print('Button pressed')

BText('Press me')

Cprint('Hello')

DRaisedButton()

Attempts:

3 left

💡 Hint

Common Mistakes

Passing print('Hello') directly instead of a function.

Using RaisedButton instead of ElevatedButton.

onPressed needs a function, so a lambda is used. child needs a widget, here Text widget.

5fill in blank

hard

Fill all three blanks to create a Container with padding, a red background, and a child Text widget.

Flutter

Container(
  padding: [1],
  color: [2],
  child: [3],
)

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

AEdgeInsets.all(16)

BColors.red

CText('Hello Container')

DEdgeInsets.zero

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings instead of EdgeInsets for padding.

Using color property with a string instead of Colors.red.

Not wrapping text in a Text widget.

Padding uses EdgeInsets, color uses Colors.red, child is a Text widget.