Drawer kullanımı

Uygulama içerisinde sol tarafta menü açmak için kullanılır.

Uygulamanıza sol taraftan açılır bir menü eklemek istiyorsanız drawer kullanabilirsiniz.

Kullanım Örneği

import 'package:flutter/material.dart';

class DrawerWidget extends StatefulWidget {
  const DrawerWidget({super.key});

  @override
  State<DrawerWidget> createState() => _DrawerWidgetState();
}

class _DrawerWidgetState extends State<DrawerWidget> {
  String selectedPage = '';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Drawer Kullanımı'),
      ),
      //? Drawer tanımlamamızı yapıyoruz
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            //? DrawerHeader: Drawer'ın en üst kısmını ifade eder.
            const DrawerHeader(
              decoration: BoxDecoration(
                  image: DecorationImage(
                //? Fit: Resmi nasıl ayarlayacağını belirtir. Tamamen kapla, resim boyutunu al vb.
                fit: BoxFit.fill,
                image: NetworkImage("https://avatars.githubusercontent.com/u/48753655?v=4"),
              )),
              child: Text('Umut Ocak', style: TextStyle(color: Colors.black, fontSize: 24)),
            ),
            //? Drawer içerisine eklediğimiz menüler
            ListTile(
              leading: const Icon(Icons.star),
              title: const Text('Projelerim'),
              onTap: () {
                //? State yönetimini kullanıyorsanız setState kullanmayınız.
                setState(() {
                  selectedPage = 'Projelerim';
                });
              },
            ),
            ListTile(
              leading: const Icon(Icons.account_circle),
              title: const Text('Profilim'),
              onTap: () {
                setState(() {
                  selectedPage = 'Profilim';
                });
              },
            ),
            ListTile(
              leading: const Icon(Icons.settings),
              title: const Text('Ayarlar'),
              onTap: () {
                setState(() {
                  selectedPage = 'Ayarlar';
                });
              },
            ),
          ],
        ),
      ),
      body: Center(
        child: Text('Seçilen Sayfa: $selectedPage'),
      ),
    );
  }
}

Last updated