Flutter Drawer Widgeti Kullanımı

Herkese merhaba, Flutter yazılarımıza kaldığımız yerden devam ediyoruz. Bu yazımızda Drawer widgetini ve kullanımını anlatacağım. Hadi başlayalım !

Flutter, mobil uygulama geliştiricileri tarafından oldukça tercih edilen bir çerçeve (framework)dir. Flutter’da Drawer Widgeti, kullanıcının bir menüyü kaydırarak açabileceği bir widgettir. Bu menü, uygulama içinde gezinmeyi kolaylaştıran seçenekleri içerir.

Bu makalede, Flutter’da Drawer Widgeti’nin özellikleri ve kullanımı hakkında bilgi vereceğim ve ayrıca kullanımı için örnek bir kod paylaşacağım.

Drawer Widgeti’nin Özellikleri

Flutter’da Drawer Widgeti’nin bazı özellikleri şunlardır:

• drawer: Drawer Widgeti’nin içeriği belirlenir. Bu özellik zorunludur.
• child: Drawer Widgeti’nin ana widgetidir. Genellikle Scaffold widgetinin içine yerleştirilir.
• elevation: Drawer Widgeti’nin gölge boyutunu belirler.
• semanticLabel: Drawer Widgeti’nin etkileşimli öğesi için bir etiket belirler.

Drawer Widgeti’nin Kullanımı

Drawer Widgeti, Scaffold Widgeti içinde kullanılır. Scaffold Widgeti, uygulama çerçevesinin temelini oluşturur ve birçok materyal tasarımı bileşeni içerir. Drawer Widgeti, Scaffold Widgeti’nin appBar özelliği altında yer alır ve genellikle menü açma/kapama düğmesi olarak tasarlanmıştır.

Aşağıdaki örnek kod, bir Drawer Widgeti içeren basit bir Flutter uygulaması oluşturur:

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('Flutter Drawer Örneği'),
        ),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
                child: Text(
                  'Flutter Drawer Örneği',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 24,
                  ),
                ),
              ),
              ListTile(
                leading: Icon(Icons.home),
                title: Text('Ana Sayfa'),
                onTap: () {
                  // Ana Sayfa'ya gitmek için kod yazılabilir.
                },
              ),
              ListTile(
                leading: Icon(Icons.settings),
                title: Text('Ayarlar'),
                onTap: () {
                  // Ayarlar sayfasına gitmek için kod yazılabilir.
                },
              ),
            ],
          ),
        ),
        body: Center(
          child: Text('Flutter Drawer Örneği'),
        ),
      ),
    );
  }
}

Bu kod, bir Drawer Widgeti içeren bir Scaffold Widgeti oluşturur. Drawer Widgeti, ListView Widgeti içindeki bir dizi ListTile Widgetiyle birlikte kullanılır. Bu listeleme öğeleri, kullanıcının menüdeki seçeneklere tıklaması durumunda gerçekleştirilecek işlevler içerir. Ayrıca DrawerHeader Widgeti de içerir ve bu widget, menünün üst kısmındaki başlık kısmını oluşturur.

Drawer Widgeti’nin child özelliği, içeriği belirler. Bu örnekte, ListView Widgeti kullanılarak menü öğeleri belirlenir. padding özelliği, ListView Widgeti’nin kenar boşluklarını belirler.

ListTile Widgetleri, menü seçenekleri olarak kullanılır ve onTap özelliği ile tıklanma durumunda gerçekleştirilecek işlevler belirlenir. Ayrıca, leading özelliği ile menü öğesinin sol tarafında yer alan bir simge belirlenebilir.

Sonuç

Bu makalede, Flutter’da Drawer Widgeti’nin özellikleri ve kullanımı hakkında bilgi verdik. Örneğimizde, Scaffold Widgeti içinde Drawer Widgeti kullanarak menü oluşturduk. Ayrıca ListView Widgeti ve ListTile Widgeti kullanarak menü öğelerini oluşturduk.

Flutter, kullanımı kolay araçlar sunan bir mobil uygulama geliştirme çerçevesidir. Drawer Widgeti, uygulamanızda kullanıcıların kolayca gezinmesini sağlayacak bir seçenektir. Bu makaledeki örneği kullanarak, kendi uygulamanızda Drawer Widgeti’ni kullanabilirsiniz.

Evet Drawer widgeti ve kullanımı bu şekilde olmakta. Tüm Flutter yazılarımıza buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.