What is Scaffold?

Learn that Scaffold is the skeleton of an app screen.

What is Scaffold?

Scaffold is the widget that forms the skeleton of a Material app screen. It lets you define sections such as the top app bar (appBar), the main content area (body), the floating button (floatingActionButton), and the side menu (drawer). In most screens, Scaffold is used as the root widget.

Scaffold(
  appBar: AppBar(title: Text('Title')),
  body: Center(child: Text('Hello')),
)

appBar and body together

A typical Scaffold takes both appBar and body parameters. appBar shows a fixed top bar; body fills the remaining area. Together they appear as a top bar with content below it on screen.

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

Exercise Add appBar and body with Scaffold

Write a function setup that prints Scaffold kuruldu. In main call setup. Give the Scaffold both appBar and body parameters; let appBar be AppBar(title: Text('Baslik')) and body be Center(child: Text('Merhaba')).

Show example solution

import 'package:flutter/material.dart';

void kur() {
  print('Scaffold kuruldu');
}

void main() {
  kur();
  runApp(const Uygulama());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Baslik')),
        body: Center(child: Text('Merhaba')),
      ),
    );
  }
}

Test yourself

What is Scaffold's body parameter used for?
- Sets the top app bar
- Sets the side menu
- Sets the floating button
- Sets the main content area
Show answer

Sets the main content area — The body parameter sets Scaffold's main content area; the top bar is for appBar, the side menu for drawer, and the floating button for floatingActionButton.

Add the body parameter

Scaffold(
  appBar: AppBar(title: Text('Baslik')),
  ____: Center(child: Text('Merhaba')),
)

Show answer

Scaffold(
  appBar: AppBar(title: Text('Baslik')),
  body: Center(child: Text('Merhaba')),
)

Scaffold parts

Scaffold

Forms the screen skeleton
appBar

Top app bar
body

Main content area
MaterialApp

Root widget wrapping Scaffold

Next lesson: AppBar

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies