Project skeleton
- Flutter course
- Beginner
- Lesson 91/99
- 4 min
Build the counter app skeleton with Scaffold.
Counter skeleton
To set up the skeleton of a counter app, you use a Scaffold. The appBar parameter shows a title in an AppBar, while the body parameter contains a Text widget that will show the counter value. Scaffold forms the skeleton of a Material app screen.
Scaffold(
appBar: AppBar(title: Text('Counter')),
body: Center(child: Text('0')),
)Title with AppBar
An AppBar is given to the appBar parameter of Scaffold. The title parameter of AppBar carries the app's title text. In a counter app, the title is usually a text such as 'Counter'.
Scaffold(
appBar: AppBar(title: Text('Counter')),
)Practice Set up the counter skeleton
Write a function baslat that prints Sayac basladi. In main call baslat. Give the Scaffold the appBar (AppBar(title: Text('Sayac'))) and body (Center(child: Text('0'))) parameters.
Starter code
import 'package:flutter/material.dart';
// baslat fonksiyonu yaz: "Sayac basladi" yazdirsin
void main() {
// baslat'i 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 baslat() {
print('Sayac basladi');
}
void main() {
baslat();
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Sayac')),
body: Center(child: Text('0')),
),
);
}
}Expected output
Sayac basladi
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which widget is given to the body parameter to show the counter value on screen?
- SizedBox
- Padding
- Center containing Text Correct answer
- AppBar
Explanation: To show the counter value, body is usually given a Text widget inside Center; SizedBox, Padding and AppBar are not for this purpose.
2 Add the appBar parameter
Scaffold(
____: AppBar(title: Text('Sayac')),
body: Center(child: Text('0')),
)Scaffold(
appBar: AppBar(title: Text('Sayac')),
body: Center(child: Text('0')),
)Explanation: To wire an AppBar to Scaffold, the appBar parameter is used; header, topBar or title are not valid parameter names.
3 Counter skeleton parts
| Term | Meaning |
|---|---|
Scaffold |
Forms the screen skeleton |
AppBar |
Top app bar |
body |
Main content area |
Text |
Widget showing the counter |