MaterialApp and Scaffold in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic Flutter app with Material design.

Flutter

void main() {
  runApp([1](
    home: Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(child: Text('Welcome')),
    ),
  ));
}

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

ACupertinoApp

BMaterialApp

CWidgetsApp

DStatelessWidget

Attempts:

3 left

💡 Hint

Common Mistakes

Using CupertinoApp instead of MaterialApp for Material Design apps.

Forgetting to wrap Scaffold inside MaterialApp.

The MaterialApp widget sets up the app with Material Design styling and navigation.

2fill in blank

medium

Complete the code to add a Scaffold with an app bar and a centered text.

Flutter

MaterialApp(
  home: [1](
    appBar: AppBar(title: Text('My App')),
    body: Center(child: Text('Hello World')),
  ),
);

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

AScaffold

BContainer

CColumn

DSafeArea

Attempts:

3 left

💡 Hint

Common Mistakes

Using Container or Column instead of Scaffold for app layout.

Not including an appBar inside Scaffold.

The Scaffold widget provides the basic visual layout structure for Material apps, including app bars and body content.

3fill in blank

hard

Fix the error in the code by completing the missing widget that provides the app's theme and navigation.

Flutter

void main() {
  runApp([1](
    title: 'Demo',
    home: Scaffold(
      appBar: AppBar(title: Text('Demo')),
      body: Center(child: Text('Content')),
    ),
  ));
}

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

AStatelessWidget

BCupertinoApp

CWidgetsApp

DMaterialApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using WidgetsApp which lacks Material Design styling.

Using StatelessWidget directly instead of MaterialApp.

MaterialApp is needed to provide Material Design theme and navigation support.

4fill in blank

hard

Fill both blanks to create a Material app with a Scaffold that has an app bar and a floating action button.

Flutter

MaterialApp(
  home: [1](
    appBar: AppBar(title: Text('Demo')),
    body: Center(child: Text('Press the button')),
    floatingActionButton: [2](
      onPressed: () {},
      child: Icon(Icons.add),
    ),
  ),
);

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

AScaffold

BContainer

CFloatingActionButton

DRaisedButton

Attempts:

3 left

💡 Hint

Common Mistakes

Using Container instead of Scaffold for layout.

Using RaisedButton instead of FloatingActionButton.

The Scaffold provides the app structure, and FloatingActionButton adds a button floating above the content.

5fill in blank

hard

Fill all three blanks to create a MaterialApp with a Scaffold that has an app bar title, a centered text, and a bottom navigation bar.

Flutter

MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text([1])),
    body: Center(child: Text([2])),
    bottomNavigationBar: BottomNavigationBar(
      items: [
        BottomNavigationBarItem(icon: Icon(Icons.home), label: [3]),
        BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
      ],
    ),
  ),
);

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

A'Home'

B'Welcome to the app!'

D'Dashboard'

Attempts:

3 left

💡 Hint

Common Mistakes

Using mismatched strings for app bar title and navigation label.

Forgetting quotes around string literals.

The app bar title is 'Home', the centered text is 'Welcome to the app!', and the bottom navigation label for home is 'Home'.