ModalBottomSheet
- Flutter kursu
- Orta seviye
- Ders 94/99
- 4 dk
showModalBottomSheet ile alt sayfa açmayı öğrenirsin.
showModalBottomSheet nedir?
showModalBottomSheet, ekranın altından kayarak açılan bir sayfa gösterir. context ve builder parametreleri alır; tıpkı showDialog gibi modal davranır. Kullanıcı sayfayı aşağı sürükleyerek kapatabilir; bu yüzden dragHandle gibi görsel ipuçları sık kullanılır.
showModalBottomSheet(
context: context,
builder: (context) {
return SizedBox(height: 200, child: Text('Alt sayfa'));
},
);Builder ve boyut
showModalBottomSheet'ın builder'ı döndürdüğü widget, sayfanın içeriğini belirler. Yüksekliği bu widget'ın boyutuna bağlıdır; örneğin SizedBox(height: 200) ile sabit bir yükseklik verirsin. İçeriğin kaydırılabilir olması gerekiyorsa ListView veya SingleChildScrollView kullanırsın.
showModalBottomSheet(
context: context,
builder: (_) => SizedBox(
height: 250,
child: ListView(children: [ListTile(title: Text('A'))]),
),
)Uygulama Alt sayfa aç
AltSayfaButon adında StatelessWidget tanımla. build bir ElevatedButton döndürsün; onPressed içinde showModalBottomSheet çağrısı yapsın. context ve builder parametrelerini ver; builder bir SizedBox(height: 200, child: Text('Alt sayfa')) döndürsün. main içinde 'hazir' yazdır.
Başlangıç kodu
import 'package:flutter/material.dart';
// AltSayfaButon StatelessWidget tanımla
// build ElevatedButton döndürsün
// onPressed alt sayfa açsın
void main() {
// 'hazir' yazdır
}Örnek çözüm
import 'package:flutter/material.dart';
class AltSayfaButon extends StatelessWidget {
const AltSayfaButon({super.key});
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {
showModalBottomSheet(
context: context,
builder: (_) => const SizedBox(
height: 200,
child: Text('Alt sayfa'),
),
);
},
child: const Text('Aç'),
);
}
}
void main() {
print('hazir');
}Beklenen çıktı
hazir
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 showModalBottomSheet pencereyi nereden açar?
- Ekranın üstünden
- Yan menüden
- Ekranın ortasından
- Ekranın altından Doğru cevap
Açıklama: showModalBottomSheet ekranın altından kayarak açılır. Üstten açılma yoktur, yan menü Drawer'ın işidir, orta noktadan açılma showDialog/AlertDialog içindir.
2 showModalBottomSheet fonksiyonu
____(
context: context,
builder: (_) => SizedBox(height: 200, child: Text('Alt')),
);showModalBottomSheet(
context: context,
builder: (_) => SizedBox(height: 200, child: Text('Alt')),
);Açıklama: Alt sayfa açmak için showModalBottomSheet kullanılır. showDialog orta pencere açar, showSnackBar diye bir fonksiyon yoktur (showSnackBar deprecated'tir), showDrawer diye bir fonksiyon yoktur.
3 ModalBottomSheet parçaları
| Kavram | Anlamı |
|---|---|
showModalBottomSheet |
alt sayfa açma fonksiyonu |
context |
bağlam |
builder |
içerik üreten fonksiyon |
SizedBox |
yükseklik sarmalayıcısı |