Drawer
- Flutter kursu
- Başlangıç
- Ders 84/99
- 4 dk
Drawer ile yan menü eklemeyi öğrenirsin.
Drawer nedir?
Drawer, Scaffold'ın solundan açılan yan menü widget'ıdır. İçinde genellikle bir ListView bulunur; listenin başında DrawerHeader ile bir başlık gösterilir, ardından menü öğeleri gelir. Scaffold'ın drawer parametresine verilir.
Scaffold(
drawer: Drawer(
child: ListView(
children: [
DrawerHeader(child: Text('Menu')),
],
),
),
)DrawerHeader
DrawerHeader, Drawer'ın üstünde görünen başlık alanıdır. İçine child olarak bir widget alır; genellikle uygulama adını gösteren bir Text verilir. DrawerHeader, ListView'ın children listesinin ilk öğesi olarak yerleştirilir.
DrawerHeader(
child: Text('Uygulama Menu'),
)Uygulama Drawer ekle
menuAc adında bir fonksiyon yaz; çağrılınca Menu yazdırsın. main içinde menuAc'ı çağır. Scaffold'a appBar ve drawer ekle; drawer içinde bir ListView ve onun children listesinde bir DrawerHeader olsun.
Başlangıç kodu
import 'package:flutter/material.dart';
// menuAc fonksiyonu yaz: "Menu" yazdirsin
void main() {
// menuAc'i cagir
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')),
// drawer ekle
),
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
void menuAc() {
print('Menu');
}
void main() {
menuAc();
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')),
drawer: Drawer(
child: ListView(
children: [
DrawerHeader(child: Text('Menu')),
],
),
),
),
);
}
}Beklenen çıktı
Menu
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Drawer içinde menü öğelerini listelemek için hangi widget kullanılır?
- Center
- Padding
- SizedBox
- ListView Doğru cevap
Açıklama: Drawer içinde menü öğeleri genellikle ListView ile listelenir; Padding, SizedBox ve Center liste için uygun değildir.
2 drawer parametresini ekle
Scaffold(
appBar: AppBar(title: Text('Uygulama')),
____: Drawer(
child: ListView(
children: [DrawerHeader(child: Text('Menu'))],
),
),
)Scaffold(
appBar: AppBar(title: Text('Uygulama')),
drawer: Drawer(
child: ListView(
children: [DrawerHeader(child: Text('Menu'))],
),
),
)Açıklama: Drawer'ı Scaffold'a bağlamak için drawer parametresi kullanılır; menu, sidebar veya navigation geçerli parametre adları değildir.
3 Drawer parçaları
| Kavram | Anlamı |
|---|---|
Drawer |
Yan menü widget'ı |
ListView |
Menü öğelerini listeler |
DrawerHeader |
Menünün başlık alanı |
drawer |
Scaffold'ın yan menü parametresi |