What is Scaffold?
- Flutter course
- Beginner
- Lesson 81/99
- 4 min
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')),
)Practice 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')).
Starter code
import 'package:flutter/material.dart';
// kur fonksiyonu yaz: "Scaffold kuruldu" yazdirsin
void main() {
// kur'u cagir
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
// appBar ve body parametrelerini ekle
),
);
}
}Sample 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')),
),
);
}
}Expected output
Scaffold kuruldu
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 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 Correct answer
Explanation: 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.
2 Add the body parameter
Scaffold(
appBar: AppBar(title: Text('Baslik')),
____: Center(child: Text('Merhaba')),
)Scaffold(
appBar: AppBar(title: Text('Baslik')),
body: Center(child: Text('Merhaba')),
)Explanation: Scaffold's main content area is given with the body parameter; content, main or child are not valid parameter names.
3 Scaffold parts
| Term | Meaning |
|---|---|
Scaffold |
Forms the screen skeleton |
appBar |
Top app bar |
body |
Main content area |
MaterialApp |
Root widget wrapping Scaffold |