First Flutter app (Hello World) - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to show the text 'Hello World' in the center of the screen.

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'

AText

BMyApp

CCenter

DMaterialApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using a widget like Text or Center directly in runApp instead of the root widget class.

Forgetting to call the root widget as a function with parentheses.

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

2fill in blank

medium

Complete the code to make the app title appear in the app bar.

Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: [1]('Hello Flutter'),
        ),
        body: Center(
          child: Text('Welcome!'),
        ),
      ),
    );
  }
}

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

ACenter

BScaffold

CText

DAppBar

Attempts:

3 left

💡 Hint

Common Mistakes

Using AppBar or Scaffold instead of Text for the title.

Forgetting to wrap the string in a widget.

The title property of AppBar expects a Text widget to show the title string.

3fill in blank

hard

Fix the error in the code to correctly display 'Hello Flutter' in the center.

Flutter

import 'package:flutter/material.dart';

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

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

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

ACenter

BText

CScaffold

DMaterialApp

Attempts:

3 left

💡 Hint

Common Mistakes

Putting Text directly without Center causes text to align top-left.

Using Scaffold or MaterialApp inside body causes errors.

The body of Scaffold should be wrapped with Center to center the child widget.

4fill in blank

hard

Fill both blanks to create a button that shows 'Click me' and prints a message when pressed.

Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: [1]() {
              print('Button pressed');
            },
            child: [2]('Click me'),
          ),
        ),
      ),
    );
  }
}

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

A()

BText

Cprint

DonPressed

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting parentheses in the function declaration.

Using print instead of Text for the button label.

The onPressed property expects a function, so use () { ... }. The button label is a Text widget.

5fill in blank

hard

Fill all three blanks to create a Scaffold with an AppBar titled 'Home' and a centered text 'Welcome'.

Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: [1]('Home'),
        ),
        body: [2](
          child: [3]('Welcome'),
        ),
      ),
    );
  }
}

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

AText

BCenter

DScaffold

Attempts:

3 left

💡 Hint

Common Mistakes

Using Scaffold inside body instead of Center.

Using wrong widget for title or child.

The AppBar title uses a Text widget. The body uses Center to center its child, which is another Text widget.