StatelessWidget in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic StatelessWidget named MyWidget.

Flutter

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return [1]('Hello World');
  }
}

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

AText

BScaffold

CContainer

DColumn

Attempts:

3 left

💡 Hint

Common Mistakes

Using a layout widget like Container or Column instead of Text.

Forgetting to return a widget from build.

The build method must return a widget. Here, Text displays the string 'Hello World'.

2fill in blank

medium

Complete the code to add a constructor with a required title property to the StatelessWidget.

Flutter

class MyWidget extends StatelessWidget {
  final String title;

  const MyWidget({Key? key, [1]) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(title);
  }
}

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

Athis.key

Brequired this.title

CKey? key

Dthis.title

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the required keyword.

Using this.title without required.

In Flutter, to require a property in a constructor, use required this.title.

3fill in blank

hard

Fix the error in the build method by completing the widget tree with a Scaffold and AppBar.

Flutter

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: [1](
      title: Text(title),
    ),
    body: Center(child: Text('Welcome')),
  );
}

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

AText

BContainer

CColumn

DAppBar

Attempts:

3 left

💡 Hint

Common Mistakes

Using Container or Text instead of AppBar for appBar.

Forgetting to wrap the title in Text.

The appBar property of Scaffold expects an AppBar widget.

4fill in blank

hard

Fill both blanks to create a StatelessWidget that returns a Center widget with a Text child.

Flutter

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return [1](
      child: [2]('Hello'),
    );
  }
}

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

ACenter

BText

CContainer

DColumn

Attempts:

3 left

💡 Hint

Common Mistakes

Using Container instead of Center.

Using Column when only one child is needed.

The Center widget centers its child. The child here is a Text widget showing 'Hello'.

5fill in blank

hard

Fill all three blanks to create a StatelessWidget with a constructor, a title property, and a build method returning a Scaffold with AppBar and body.

Flutter

class MyWidget extends StatelessWidget {
  final String [1];

  const MyWidget({Key? key, required this.[2]) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text([3]),
      ),
      body: Center(child: Text('Body content')),
    );
  }
}

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

Atitle

Dkey

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the property and constructor parameter.

Using key instead of title in the Text widget.

The property name, constructor parameter, and usage in Text must all be title to match.