AppBar
- Flutter kursu
- Başlangıç
- Ders 82/99
- 4 dk
AppBar ile üst başlık çubuğu yapmayı öğrenirsin.
AppBar nedir?
AppBar, Scaffold'ın üst kısmında görünen başlık çubuğu widget'ıdır. title parametresi başlık metnini, actions parametresi ise sağ taraftaki eylem ikonlarını tutar. AppBar genellikle Scaffold'ın appBar parametresine verilir.
AppBar(
title: Text('Uygulama'),
actions: [
Icon(Icons.search),
],
)actions listesi
actions, AppBar'ın sağ tarafındaki eylem ikonlarını tutan bir widget listesidir. Genellikle IconButton veya Icon widget'ları içerir. Birden fazla eylem eklenebilir; sıra ile soldan sağa dizilirler.AppBar(
title: Text('Ara'),
actions: [
IconButton(onPressed: () {}, icon: Icon(Icons.search)),
],
)Uygulama AppBar'a başlık ekle
baslikGoster adında bir fonksiyon yaz; çağrılınca Baslik yazdırsın. main içinde baslikGoster'i çağır. Scaffold'ın appBar parametresine bir AppBar ver ve title'ı Text('Uygulama') yap.
Başlangıç kodu
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
),
);
}
}Örnek çözüm
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'),
),
),
);
}
}Beklenen çıktı
Baslik
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 AppBar'ın title parametresi hangi tür widget alır?
- Yalnızca Icon alır
- Yalnızca SizedBox alır
- Bir widget alır, genelde Text Doğru cevap
- Yalnızca String alır
Açıklama: title parametresi bir widget alır; en yaygın seçim Text widget'ıdır. Yalnızca String, Icon veya SizedBox kabul etmez.
2 title parametresini ekle
AppBar(
____: Text('Uygulama'),
actions: [Icon(Icons.search)],
)AppBar(
title: Text('Uygulama'),
actions: [Icon(Icons.search)],
)Açıklama: AppBar'ın başlık metni title parametresi ile verilir; name, header veya label geçerli parametre adları değildir.
3 AppBar parçaları
| Kavram | Anlamı |
|---|---|
AppBar |
Üst başlık çubuğu widget'ı |
title |
Başlık metni widget'ı |
actions |
Sağ taraftaki eylem listesi |
appBar |
Scaffold'ın AppBar parametresi |