MaterialApp and Scaffold in Flutter

Introduction

MaterialApp and Scaffold help you build a basic app structure with a nice look and feel. They make your app look like a real mobile app with a title bar, background, and body area.

When you want to create a new app with a standard mobile design.

When you need a top app bar with a title and actions.

When you want to add a floating button or bottom navigation easily.

When you want to organize your app screen with a safe area and background.

When you want to use built-in material design styles and themes.

Syntax

Flutter

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

MaterialApp is the root widget that sets up the app's theme and navigation.

Scaffold provides the basic visual layout structure like app bar and body.

Examples

A minimal app with just a centered text.

Flutter

MaterialApp(
  home: Scaffold(
    body: Center(child: Text('Simple App')),
  ),
)

An app with a title and a top app bar.

Flutter

MaterialApp(
  title: 'My App',
  home: Scaffold(
    appBar: AppBar(title: Text('Home')),
    body: Text('Welcome!'),
  ),
)

An app with a floating action button.

Flutter

MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text('Demo')),
    body: Center(child: Text('Hello')),
    floatingActionButton: FloatingActionButton(
      onPressed: () {},
      child: Icon(Icons.add),
    ),
  ),
)

Sample App

This app shows a home page with a top app bar titled 'Home Page', a centered text 'Hello, Flutter!', and a floating button with a thumbs-up icon.

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Demo App',
    home: Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Text('Hello, Flutter!'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.thumb_up),
      ),
    ),
  ));
}

Important Notes

Always wrap your app with MaterialApp to get material design features.

Scaffold helps organize your screen into appBar, body, and other parts.

You can add buttons, drawers, and bottom bars easily inside Scaffold.

Summary

MaterialApp sets up the app's theme and navigation.

Scaffold creates the basic screen layout with app bar and body.

Use them together to build a clean, standard mobile app UI quickly.