Flutter Drawer Kullanımı
Bu örnek, Scaffold widget’ında drawer parametresi kullanılarak bir Drawer ekler. Drawer widget’ı, ListView içerir ve ListView çocukları olarak ListTile’lar ve DrawerHeader bulunur. ListTile’lar, yan menüdeki farklı öğeleri temsil eder. DrawerHeader, yan menünün üst kısmında başlık olarak görünen bir widget’tır. Her bir ListTile, leading parametresiyle bir ikon veya resim, title parametresiyle...
Bu örnek, Scaffold widget’ında drawer parametresi kullanılarak bir Drawer ekler. Drawer widget’ı, ListView içerir ve ListView çocukları olarak ListTile’lar ve DrawerHeader bulunur. ListTile’lar, yan menüdeki farklı öğeleri temsil eder. DrawerHeader, yan menünün üst kısmında başlık olarak görünen bir widget’tır.
Her bir ListTile, leading parametresiyle bir ikon veya resim, title parametresiyle metin ve onTap parametresiyle tıklama işlevi alır. onTap içinde, belirli bir öğeye tıklandığında gerçekleştirilecek işlemleri tanımlayabilirsiniz. Örnekte, Ana Sayfa ve Ayarlar öğeleri için yönlendirme işlemleri yerine konulmuştur.
Drawer widget’ı, kullanıcının uygulamanın yan menüsünü açmasını sağlayan kaydırılabilir bir yan panele dönüşür. Kullanıcı ana içeriğin üzerine kaydırarak Drawer’ı görüntüleyebilir ve ardından öğelere tıklayarak ilgili işlemleri gerçekleştirebilir.
Bu örnekteki Drawer, temel bir yapı sağlar ve özelleştirilebilir. İhtiyaçlarınıza göre Drawer’ı özelleştirerek ikonlar, resimler veya ek öğeler ekleyebilirsiniz. Ayrıca Drawer’ın açılması ve kapanması gibi etkileşimler için Scaffold widget’
import ‘package:flutter/material.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(‘Drawer Örneği’),
),
body: Center(
child: Text(‘Ana İçerik’),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children:
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
‘Drawer Başlık’,
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
leading: Icon(Icons.home),
title: Text(‘Ana Sayfa’),
onTap: () {
// Ana Sayfa’ya yönlendirme işlemleri burada gerçekleştirilebilir
},
),
ListTile(
leading: Icon(Icons.settings),
title: Text(‘Ayarlar’),
onTap: () {
// Ayarlar sayfasına yönlendirme işlemleri burada gerçekleştirilebilir
},
),
],
),
),
),
);
}
}
