Summary - Scaffold and AppBar
- Flutter course
- Beginner
- Lesson 85/99
- 4 min
Combine Scaffold, AppBar and FAB to make a home screen.
Combine three parts
To make a main screen, you combine three parts: Scaffold (skeleton), AppBar (top title), and FloatingActionButton (floating button). AppBar is given to the appBar parameter of Scaffold, content to body, and FAB to floatingActionButton.
Scaffold(
appBar: AppBar(title: Text('Main')),
body: Center(child: Text('Content')),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
)Practice Make a main screen
Write a function mainScreen that prints Ana ekran. In main call mainScreen. Add to the Scaffold an appBar (AppBar with title Text('Ana')), a body (Center(child: Text('Merhaba'))), and a floatingActionButton (onPressed mainScreen, child Icon(Icons.add)).
Starter code
import 'package:flutter/material.dart';
// anaEkran fonksiyonu yaz: "Ana ekran" yazdirsin
void main() {
// anaEkran'i cagir
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
// appBar, body ve floatingActionButton ekle
),
);
}
}Sample solution
import 'package:flutter/material.dart';
void anaEkran() {
print('Ana ekran');
}
void main() {
anaEkran();
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Ana')),
body: Center(child: Text('Merhaba')),
floatingActionButton: FloatingActionButton(
onPressed: anaEkran,
child: Icon(Icons.add),
),
),
);
}
}Expected output
Ana ekran
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which parts are used together to make a main screen?
- ListView + ListTile + Separator
- Scaffold + AppBar + FloatingActionButton Correct answer
- AssetImage + Image.network + BoxFit
- Text + Padding + Center
Explanation: For a main screen, Scaffold skeleton, AppBar top title and FloatingActionButton floating action are used together; the other options are not for this purpose.
2 Add the appBar parameter
Scaffold(
____: AppBar(title: Text('Ana')),
body: Center(child: Text('Icerik')),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
)Scaffold(
appBar: AppBar(title: Text('Ana')),
body: Center(child: Text('Icerik')),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
)Explanation: To wire an AppBar to Scaffold, the appBar parameter is used; header, topBar or title are not valid parameter names.
3 Scaffold summary
| Term | Meaning |
|---|---|
Scaffold |
Forms the screen skeleton |
AppBar |
Top app bar widget |
FloatingActionButton |
Round floating button |
body |
Main content area |