Drawer menü, material dizayn kullanılan uygulamalarda, uygulama içinde gezinmek için iki temel widgetdan birisidir. Dİğeri ise sekmelerdir. Drawer menü kullanıcının bilgileriyle ilgilerini ve işlemlerini kapsayan bölüm için ideal bir kullanım alanıdır.
Drawer menü yapımı aşamaları;
- Bir Scaffold Oluşturma.
- Drawer menu Ekleme.
- Drawer’ı, itemlerle Doldurma
- Drawer’ı Sayfalarla Bağlama
Github: Drawer Tutorial
- Bir Scaffold Oluşturma
İlk olarak bir proje açalım. Proje açmak için Android Studio veya Visual Studio Code kullanabilirsiniz. İlk projeyi açtıktan sonra, demo bir uygulama kodu çıkacak onu silelim ve aşağıdaki hale getirelim.
import ‘package:flutter/material.dart’;
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
theme: new ThemeData(
primarySwatch: Colors.blue),
home: new HomePage(),
);
}
}
class HomePage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: Center(child: new Text(“Flutter Drawer Tutorial”)),
), //AppBar
); Scaffold
}
}
Şimdi bir Scaffold yarattık. İçinde de drawer widgetı yaratıyoruz.
return new Scaffold(
appBar: new AppBar(
title: Center(child: new Text(“Flutter Drawer Tutorial”)),
),
drawer: new Drawer(),
2. Drawer Menu Ekleme
Drawer içine “Child: new Listview” nesnesiyle menüyü oluşturuyoruz.
drawer: new Drawer(
child: new ListView(
children: <Widget>[
],
),
),
Uygulamadaki Görüntü
Drawer Menü
3. Drawer Menü Itemlerini Ekleme
Şimdi drawer header içinde kullanıcının bilgileri olduğu profil alanı ve bazı itemlerin olduğu header oluşturacağız. İlk olarak profil bilgilerini gösteren üst kısmı yapıyoruz.
children: <Widget>[
new UserAccountsDrawerHeader(accountName: new Text(‘Mert Toptas’),
accountEmail: new Text(‘[email protected]’),
currentAccountPicture: new CircleAvatar(
backgroundColor: Colors.black,
child: new Text(“MT”),
),
)
],
UserAccountsDrawerHeader sınıfı, kullanıcı etkilişimli bir uygulamada, kullanıcı tanımlayan bir drawer başlığıdır. CircleAvatar ile dairesel olarak profil fotoğrafını belirledik. Default olarak yazı yazdırdım. Çıktısı;
Şimdi ise ListTitle ile itemleri ekliyorum. Burada uygulamada istediğiniz itemlere göre genişletebilirsiniz. List ekledikten sonra header bölümün backgroundunu değiştirdim.
new ListTile(
title: new Text(“Photo”),
trailing: new Icon(Icons.photo),
onTap: (){
Navigator.push(context, new MaterialPageRoute(builder: (context) => new PagePhoto()));
},
),
//Section Line
new Divider(),
new ListTile(
title: new Text(“About”),
trailing: new Icon(Icons.info),
),
new ListTile(
title: new Text(“Exit”),
trailing: new Icon(Icons.exit_to_app),
),
new Divider(),
4. Drawer’ı Sayfalarla Bağlama
Son olarak, uygulamada drawerı sayfalar üzerinde kullanabilir hale getirmek kaldı. İlk olarak bir sınıf yazıp daha sonradan bu sınıfı onTap(); methoduyla class ismini çağırarak kullanabilir hale getirebiliriz. Home ve Photo için bu işlemi yapacağım. Bunun için iki farklı class oluşturuyorum.
class PageHome extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(title: new Text(“Home Page”),),
body: new Text(” You are on this Home Page”),
);
}
class PagePhoto extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(title: new Text(“Photo Page”),),
body: new Text(“You are on this Photo Page”, textAlign: TextAlign.center,),
);
}
}
Home ve Photo sayfaları için classları oluşturduk. Şimdi PagePhoto ve HomePhoto claslarını çağırıp, sayfaya gitmek kaldı. OnTap() içine Navigator nesnesiyle bağlıyoruz.
new ListTile(
trailing: new Icon(Icons.home),
title: new Text (“Home”),
onTap: (){
Navigator.push(context,
new MaterialPageRoute(builder: (context) => new PageHome()));
},
),
new ListTile(
title: new Text(“Photo”),
trailing: new Icon(Icons.photo),
onTap: (){
Navigator.push(context, new MaterialPageRoute(builder: (context) => new PagePhoto()));
},
),
Hepsi bu kadar. Flutter’da drawer menüyü oluşturmayı, itemleri eklemeyi ve son olarak da sayfalarla bağlantısını gördük. Umarım faydası olmuştur. Projenin son hali gifteki gibidir.
Github linkinden ulaşabilirsiniz.
