Flutter
ModalBottomSheet
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.
Örnek çözümü göster
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');
}
Kendini test et
-
showModalBottomSheet pencereyi nereden açar?
- Ekranın üstünden
- Yan menüden
- Ekranın ortasından
- Ekranın altından
Cevabı göster
Ekranın altından — 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.
-
showModalBottomSheet fonksiyonu
____(
context: context,
builder: (_) => SizedBox(height: 200, child: Text('Alt')),
);
Cevabı göster
showModalBottomSheet(
context: context,
builder: (_) => SizedBox(height: 200, child: Text('Alt')),
);
-
ModalBottomSheet parçaları
- showModalBottomSheet
- alt sayfa açma fonksiyonu
- context
- bağlam
- builder
- içerik üreten fonksiyon
- SizedBox
- yükseklik sarmalayıcısı
Sıradaki ders: Özet - Dialoglar
