Why advanced UI creates polished apps in Flutter - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

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

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text([1]),
        ),
      ),
    );
  }
}

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

AHello, Flutter!

BText

CText('Hello, Flutter!')

D"Hello, Flutter!"

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the string

Passing a widget instead of a string

The Text widget requires a string inside quotes. So, "Hello, Flutter!" is correct.

2fill in blank

medium

Complete the code to add a floating action button with an icon.

Flutter

Scaffold(
  appBar: AppBar(title: const Text('Demo')),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon([1]),
  ),
);

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

Aadd

BIcons.add

CIcon.add

DIcons()

Attempts:

3 left

💡 Hint

Common Mistakes

Using icon name without Icons prefix

Trying to call Icons as a function

Icons.add is the correct way to specify the add icon in Flutter.

3fill in blank

hard

Fix the error in the code to create a Column with two Text widgets.

Flutter

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

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

AText

Btext

CTextWidget

DWidget

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'text' instead of 'Text'

Using undefined widget names

The correct widget name is Text with capital T.

4fill in blank

hard

Fill both blanks to create a Container with padding and a blue background color.

Flutter

Container(
  padding: EdgeInsets.[1](16),
  decoration: BoxDecoration(
    color: Colors.[2],
  ),
);

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

Aall

Bsymmetric

Cblue

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Using EdgeInsets.symmetric instead of all

Choosing wrong color name

EdgeInsets.all(16) adds padding on all sides. Colors.blue sets the background color to blue.

5fill in blank

hard

Fill all three blanks to create a ListView with three Text items.

Flutter

ListView(
  children: [
    Text([1]),
    Text([2]),
    Text([3]),
  ],
);

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

A"Item 1"

B"Item 2"

C"Item 3"

D"Item"

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around strings

Using same text for all items

Each Text widget needs a string in quotes to display the item text.