Flutter project structure - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Flutter material package.

Flutter

import '[1]';

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

Apackage:flutter/material.dart

Bpackage:flutter/widgets.dart

Cpackage:flutter/cupertino.dart

Dpackage:flutter/foundation.dart

Attempts:

3 left

💡 Hint

Common Mistakes

Using cupertino.dart when building a Material Design app.

Forgetting to include the full package path.

The main Flutter UI components are in the material.dart package, so we import it to use widgets like Scaffold and Text.

2fill in blank

medium

Complete the code to create the main entry point of a Flutter app.

Flutter

void main() => [1](MyApp());

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

AstartApp

BbeginApp

ClaunchApp

DrunApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent function like startApp or launchApp.

Forgetting to call runApp in main.

The runApp() function starts the Flutter app by inflating the given widget and attaching it to the screen.

3fill in blank

hard

Fix the error in the Flutter widget class declaration.

Flutter

class MyApp extends [1]Widget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp();
  }
}

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

AStateful

BInherited

CStateless

DCustom

Attempts:

3 left

💡 Hint

Common Mistakes

Using StatefulWidget without managing state.

Using a non-existent widget class like CustomWidget.

Flutter widgets extend either StatelessWidget or StatefulWidget. Here, since no state is managed, it should extend StatelessWidget.

4fill in blank

hard

Fill both blanks to complete the Flutter widget tree with a Scaffold and AppBar.

Flutter

return MaterialApp(
  home: Scaffold(
    appBar: [1](
      title: [2]('Home'),
    ),
  ),
);

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

AAppBar

BText

CContainer

DColumn

Attempts:

3 left

💡 Hint

Common Mistakes

Using Container or Column instead of AppBar for the appBar property.

Using Container or Column instead of Text for the title.

The Scaffold widget uses an AppBar widget for the top bar, and the AppBar's title is a Text widget displaying 'Home'.

5fill in blank

hard

Fill all three blanks to create a Flutter widget with a Center, Column, and two Text widgets.

Flutter

return Scaffold(
  body: [1](
    child: [2](
      children: [
        [3]('Hello'),
        Text('World'),
      ],
    ),
  ),
);

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

ACenter

BColumn

CText

DRow

Attempts:

3 left

💡 Hint

Common Mistakes

Using Row instead of Column for vertical layout.

Forgetting to wrap children in a Column.

Using Container instead of Center.

The Scaffold body centers its child with Center, which contains a Column to arrange children vertically, including two Text widgets.