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'.

Practice

1. What is the main purpose of the MaterialApp widget in a Flutter app?

easy

A. It sets up the app's theme, routes, and basic navigation structure.

B. It creates the main content area of the screen.

C. It displays a button on the screen.

D. It manages the app's database connections.

Solution

1. Step 1: Understand MaterialApp role

   The MaterialApp widget is designed to provide app-wide settings like theme, navigation routes, and localization.

2. Step 2: Differentiate from Scaffold

   Scaffold handles screen layout, not app-wide settings.

3. Final Answer:

   It sets up the app's theme, routes, and basic navigation structure. -> Option A

4. Quick Check:

   MaterialApp = app-wide setup [OK]

Hint: MaterialApp wraps the whole app, setting theme and navigation [OK]

Common Mistakes:

• Confusing Scaffold with MaterialApp
• Thinking MaterialApp creates screen content
• Assuming MaterialApp manages buttons directly

2. Which of the following is the correct way to create a basic Scaffold with an AppBar titled "Home"?

easy

A. Scaffold(appBar: AppBar(title: Text('Home')))

B. Scaffold(AppBar: Text('Home'))

C. Scaffold(appBar: Text('Home'))

D. Scaffold(title: AppBar('Home'))

Solution

1. Step 1: Check Scaffold syntax

   The Scaffold widget requires an appBar property set to an AppBar widget.

2. Step 2: Verify AppBar usage

   AppBar takes a title property which is a Text widget.

3. Final Answer:

   Scaffold(appBar: AppBar(title: Text('Home'))) -> Option A

4. Quick Check:

   Scaffold appBar needs AppBar widget with title [OK]

Hint: Scaffold's appBar expects an AppBar widget with a Text title [OK]

Common Mistakes:

• Using capitalized property names incorrectly
• Passing Text directly to appBar
• Confusing property names like title vs appBar

3. What will be displayed when running this Flutter code?

MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text('Welcome')),
    body: Center(child: Text('Hello World')),
  ),
)

medium

A. A blank screen with no content.

B. Only the text 'Hello World' without an app bar.

C. An error because MaterialApp needs a title property.

D. A screen with an app bar titled 'Welcome' and centered text 'Hello World'.

Solution

1. Step 1: Analyze MaterialApp and Scaffold usage

   The MaterialApp wraps the app and sets home to a Scaffold widget.

2. Step 2: Check Scaffold content

   The Scaffold has an AppBar with title 'Welcome' and a body with centered text 'Hello World'.

3. Final Answer:

   A screen with an app bar titled 'Welcome' and centered text 'Hello World'. -> Option D

4. Quick Check:

   MaterialApp + Scaffold shows app bar and body [OK]

Hint: MaterialApp home shows Scaffold with app bar and body [OK]

Common Mistakes:

• Thinking MaterialApp requires a title property
• Ignoring Scaffold's appBar and body
• Assuming no UI appears without explicit runApp

4. Identify the error in this Flutter code snippet:

MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text('My App')),
    body: Text('Hello'),
  ),
)

medium

A. Missing a comma after the Scaffold widget.

B. AppBar title must be a String, not a Text widget.

C. The body should be wrapped in a widget like Center or Padding for proper layout.

D. MaterialApp cannot have a Scaffold as home.

Solution

1. Step 1: Check Scaffold body usage

   The body is a Text widget directly, which works but may cause layout issues without padding or centering.

2. Step 2: Identify best practice

   Wrapping Text in Center or Padding improves UI and avoids layout warnings.

3. Final Answer:

   The body should be wrapped in a widget like Center or Padding for proper layout. -> Option C

4. Quick Check:

   Scaffold body needs layout widget for good UI [OK]

Hint: Wrap body Text in Center or Padding to avoid layout issues [OK]

Common Mistakes:

• Thinking AppBar title must be String, not Text
• Believing MaterialApp can't have Scaffold as home
• Ignoring layout best practices for body content

5. You want to create a Flutter app with a blue app bar titled "Dashboard" and a body showing a centered button labeled "Click Me". Which code snippet correctly achieves this?

hard

A. MaterialApp(home: Scaffold(appBar: AppBar(title: 'Dashboard', backgroundColor: Colors.blue), body: Center(child: Button('Click Me'))))

B. MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Dashboard'), backgroundColor: Colors.blue), body: Center(child: ElevatedButton(onPressed: () {}, child: Text('Click Me')))))

C. MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Dashboard'), color: Colors.blue), body: Button('Click Me')))

D. MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Dashboard'), backgroundColor: Colors.blue), body: Center(child: ElevatedButton(child: Text('Click Me')))))

Solution

1. Step 1: Set AppBar title and color correctly

   The AppBar title must be a Text widget and background color set with backgroundColor.

2. Step 2: Use ElevatedButton with onPressed and child

   The button must be an ElevatedButton with an onPressed callback and a Text child.

3. Step 3: Wrap button in Center for alignment

   Center widget ensures the button is centered in the body.

4. Final Answer:

   MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Dashboard'), backgroundColor: Colors.blue), body: Center(child: ElevatedButton(onPressed: () {}, child: Text('Click Me'))))) -> Option B

5. Quick Check:

   AppBar color + ElevatedButton with onPressed + Center [OK]

Hint: Use backgroundColor for AppBar and ElevatedButton with onPressed [OK]

Common Mistakes:

• Using 'color' instead of 'backgroundColor' for AppBar
• Omitting onPressed in ElevatedButton
• Passing title as String instead of Text widget