MaterialApp and Scaffold in Flutter - Mini App: Build & Ship

Build: Simple Home Screen

Build a basic Flutter app screen using MaterialApp and Scaffold. The screen should have a top app bar with a title and a centered text message in the body.

Target UI

┌─────────────────────────────┐
│       App Bar Title         │
├─────────────────────────────┤
│                             │
│      Welcome to Flutter!    │
│                             │
└─────────────────────────────┘

Use MaterialApp as the root widget

Use Scaffold inside MaterialApp

Add an AppBar with the title 'App Bar Title'

Center the text 'Welcome to Flutter!' in the body

Starter Code

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // TODO: Add Scaffold here
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('App Bar Title'),
        ),
        body: const Center(
          child: Text('Welcome to Flutter!'),
        ),
      ),
    );
  }
}

This Flutter app uses MaterialApp as the root widget to provide material design styling and navigation support. Inside it, Scaffold creates the basic visual layout structure with an AppBar at the top and a Center widget in the body. The AppBar shows the title text, and the Center widget centers the welcome message on the screen. This is a simple and common pattern to start building Flutter apps with material design.

Final Result

Completed Screen

┌─────────────────────────────┐
│       App Bar Title         │
├─────────────────────────────┤
│                             │
│      Welcome to Flutter!    │
│                             │
└─────────────────────────────┘

The app bar stays fixed at the top

The welcome text is centered on the screen

No buttons or gestures yet

Stretch Goal

Add a FloatingActionButton with a '+' icon that shows a SnackBar saying 'Button pressed!' when tapped.

💡 Hint

Use Scaffold's floatingActionButton property and ScaffoldMessenger to show the SnackBar.