AppBar
- Flutter course
- Beginner
- Lesson 82/99
- 4 min
Build a top header bar with AppBar.
What is AppBar?
AppBar is the title bar widget shown at the top of a Scaffold. The title parameter holds the title text, and the actions parameter holds the action icons on the right side. AppBar is usually given to the appBar parameter of Scaffold.
AppBar(
title: Text('App'),
actions: [
Icon(Icons.search),
],
)The actions list
actions is a list of widgets holding the action icons on the right side of AppBar. It usually contains IconButton or Icon widgets. Multiple actions can be added; they are laid out from left to right.
AppBar(
title: Text('Search'),
actions: [
IconButton(onPressed: () {}, icon: Icon(Icons.search)),
],
)Practice Add a title to AppBar
Write a function showTitle that prints Baslik. In main call showTitle. Give an AppBar to the appBar parameter of Scaffold and set its title to Text('Uygulama').
Starter code
import 'package:flutter/material.dart';
// baslikGoster fonksiyonu yaz: "Baslik" yazdirsin
void main() {
// baslikGoster'i cagir
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
// appBar'a title ekle
),
);
}
}Sample solution
import 'package:flutter/material.dart';
void baslikGoster() {
print('Baslik');
}
void main() {
baslikGoster();
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Uygulama'),
),
),
);
}
}Expected output
Baslik
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What kind of widget does AppBar's title parameter take?
- Takes only Icon
- Takes only SizedBox
- Takes a widget, usually Text Correct answer
- Takes only String
Explanation: The title parameter takes a widget; the most common choice is the Text widget. It does not accept only String, Icon or SizedBox.
2 Add the title parameter
AppBar(
____: Text('Uygulama'),
actions: [Icon(Icons.search)],
)AppBar(
title: Text('Uygulama'),
actions: [Icon(Icons.search)],
)Explanation: AppBar's title text is given with the title parameter; name, header or label are not valid parameter names.
3 AppBar parts
| Term | Meaning |
|---|---|
AppBar |
Top app bar widget |
title |
Title text widget |
actions |
Right side action list |
appBar |
Scaffold's AppBar parameter |