MaterialApp and Scaffold in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this Flutter code snippet?

Consider this Flutter app code:

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

What will the user see on the screen?

Flutter

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

A A screen with a top bar showing 'Hello' and centered text 'Welcome' below it.

B A blank screen with no text or app bar visible.

C Only the text 'Welcome' centered on a white background, no app bar.

D An error because Scaffold cannot be used inside MaterialApp.

💡 Hint

Think about what Scaffold provides inside a MaterialApp.

The Scaffold widget provides the basic visual layout structure including the app bar and body. The MaterialApp sets up the app environment. So the app bar with title 'Hello' appears at the top, and the text 'Welcome' is centered below.

❓ lifecycle

intermediate

What happens if you remove MaterialApp and use Scaffold directly?

Given this Flutter code:

Scaffold(
  appBar: AppBar(title: Text('Hi')),
  body: Center(child: Text('Content')),
)

What is the likely result when running this as the root widget?

A The app crashes because MaterialApp is required for Scaffold.

B The app runs normally with app bar and content displayed correctly.

C The app runs but the app bar and material styles are missing or broken.

D The app shows a blank white screen with no widgets visible.

💡 Hint

MaterialApp provides theme and material design context.

Scaffold depends on MaterialApp to provide material design theme and navigation context. Without MaterialApp, the app bar and other material widgets may not render properly or have default styling.

❓ navigation

advanced

How to navigate to a new screen using MaterialApp routes?

Given this MaterialApp setup:

MaterialApp(
  routes: {
    '/': (context) => HomeScreen(),
    '/second': (context) => SecondScreen(),
  },
)

Which code snippet correctly navigates from HomeScreen to SecondScreen?

A Navigator.pushNamed(context, '/second');

B Navigator.pop(context, '/second');

C Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen()));

D Navigator.pushReplacementNamed(context, '/home');

💡 Hint

Use the named route defined in MaterialApp routes.

Navigator.pushNamed(context, '/second') uses the named route to navigate to SecondScreen as defined in MaterialApp routes.

📝 Syntax

advanced

What error does this Flutter code produce?

Analyze this Flutter snippet:

MaterialApp(
  home: Scaffold(
    appBar: AppBar(title Text('Title')),
    body: Text('Body'),
  ),
)

What error will occur?

A RuntimeError: Scaffold cannot have Text directly as body.

B No error, code runs fine showing app bar and body text.

C TypeError: AppBar title expects a Widget but got a String.

D SyntaxError: Missing colon after 'title' in AppBar constructor.

💡 Hint

Check the AppBar constructor syntax carefully.

The AppBar constructor requires named parameters with colons. 'title Text('Title')' misses the colon ':' after 'title'. This causes a syntax error.

🧠 Conceptual

expert

Why is MaterialApp usually the root widget in Flutter apps?

Choose the best explanation for why MaterialApp is typically the root widget in Flutter apps.

A MaterialApp is required to display any widgets on the screen in Flutter.

B MaterialApp provides material design theme, navigation, localization, and other app-wide features needed by widgets like Scaffold.

C MaterialApp automatically creates all screens and routes without developer input.

D MaterialApp replaces the need for Scaffold and other layout widgets.

💡 Hint

Think about what MaterialApp offers beyond just showing widgets.

MaterialApp sets up the app environment with material design theme, routing, localization, and other features. Widgets like Scaffold rely on this context to render properly.