Flutter
Summary - Scaffold and AppBar
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),
),
)
Exercise 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)).
Show example 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),
),
),
);
}
}
Test yourself
-
Which parts are used together to make a main screen?
- ListView + ListTile + Separator
- Scaffold + AppBar + FloatingActionButton
- AssetImage + Image.network + BoxFit
- Text + Padding + Center
Show answer
Scaffold + AppBar + FloatingActionButton — For a main screen, Scaffold skeleton, AppBar top title and FloatingActionButton floating action are used together; the other options are not for this purpose.
-
Add the appBar parameter
Scaffold(
____: AppBar(title: Text('Ana')),
body: Center(child: Text('Icerik')),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
)
Show answer
Scaffold(
appBar: AppBar(title: Text('Ana')),
body: Center(child: Text('Icerik')),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
)
-
Scaffold summary
- Scaffold
- Forms the screen skeleton
- AppBar
- Top app bar widget
- FloatingActionButton
- Round floating button
- body
- Main content area
Next lesson: What is Navigator?
