Why Dart is built for UI development in Flutter - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

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

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, Dart!'),
        ),
      ),
    );
  }
}

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

AText('Hello, Dart!')

BMaterialApp()

CScaffold()

DMyApp()

Attempts:

3 left

💡 Hint

Common Mistakes

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

Using a widget that does not build the full app structure.

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

2fill in blank

medium

Complete the code to define a widget that updates its UI when a button is pressed.

Flutter

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => [1]();
}

class _CounterState extends State<Counter> {
  int count = 0;

  void increment() {
    setState(() {
      count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $count'),
        ElevatedButton(onPressed: increment, child: Text('Add')),
      ],
    );
  }
}

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

AState<Counter>

BCounterState

C_CounterState

DStatefulWidget

Attempts:

3 left

💡 Hint

Common Mistakes

Returning the widget class instead of the state class.

Using a wrong class name for the state.

The createState method must return an instance of the private state class _CounterState.

3fill in blank

hard

Fix the error in the code to properly update the UI when the button is pressed.

Flutter

class Clicker extends StatefulWidget {
  @override
  _ClickerState createState() => _ClickerState();
}

class _ClickerState extends State<Clicker> {
  int clicks = 0;

  void onClick() {
    [1](() {
      clicks++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Clicks: $clicks'),
        ElevatedButton(onPressed: onClick, child: Text('Click me')),
      ],
    );
  }
}

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

AupdateUI

BsetState

Crefresh

Dbuild

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the state update function without wrapping in setState.

Using a non-existent method to refresh UI.

To notify Flutter to rebuild the UI, you must call setState with a function that updates the state.

4fill in blank

hard

Fill both blanks to create a map of word lengths for words longer than 3 characters.

Flutter

words = ['apple', 'bat', 'carrot', 'dog'];
lengths = { for (var word in words) if (word.[1] [2] 3) word: word.[1] };

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

Alength

B<

C>

Dword

Attempts:

3 left

💡 Hint

Common Mistakes

Using the word itself instead of its length as the value.

Using wrong comparison operators in the condition.

The dictionary comprehension maps each word to its length using word.length. The condition filters words with length greater than 3 using >.

5fill in blank

hard

Fill all three blanks to create a dictionary of uppercase keys and values filtered by value > 0.

Flutter

data = {'a': 1, 'b': 0, 'c': 3};
result = { for (var kv in data.entries) if (kv.value [3] 0) [1]: [2] };

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

Akv.key.toUpperCase()

Bkv.value

C>

Dkv.key

Attempts:

3 left

💡 Hint

Common Mistakes

Using keys without converting to uppercase.

Using wrong comparison operator or filtering condition.

The dictionary comprehension uses kv.key.toUpperCase() as keys, kv.value as values, and filters entries where kv.value > 0.