Flutter Widget Listesi&BottomNavigationBar

Bu yazımızda neler yapacağız hemen ondan bahsetmek istiyorum. Flutter ile çok basit düzeyde bir uygulama yapacağız. Bu uygulamada BottomNavigationBar kullanarak küçük bir menü yapmanın yanı sıra widget tipinde liste oluşturacağız. Oluşturacağımız bu listenin içine bir kaç widget atayıp, oluşturduğumuz alt menü yani BottomNavigationBar'da kullanacağız.

Uygulama Oluşturun.

Öncelikle kullanacağınız editörde yeni bir uygulama açıp uygulama adını belirleyin. Uygulamayı oluşturduğunuzu varsayarak devam ediyorum

Uygulamayı ilk oluşturduğumuzda "main.dart" isimli dosyamızda bizi örnek bir flutter uygulaması karşılıyor. Öncelikle bu sayfanın tamamını silin.

Sildikten sonra aşağıdaki adımları takip edin

• Main.dart dosyamızda ki tüm içeriği sildik ve bomboş bir ekran ile baş başa kaldık.
• Eklememiz gereken ilk yapı; import yapısı. Aşağıda ki kodu çalıştığınız editörün üst kısmına yazın.

import 'package:flutter/material.dart';

• Bu kod satırının açıklamasını yapmayacağım. Zira bu kavramlarla ilgileniyorsak biraz aşinayız demektir.
• İkinci adım olarak aşağıdaki kodları ekleyelim.

void main() => runApp(MyApp());

• Burada MyApp yerine az sonra oluşturacağımız StatelessWidget adını yazmanız gerekmekte. Eğer StatelessWidget'e MyApp adını verirseniz değiştirmenize gerek kalmaz.
• Üçüncü adımda yukarıda ki kod bloğunun altına "stl" yazıyoruz. Burada kod editörümüzün yardımıyla, açılan sekmeden StatelessWidget seçeneğini seçiyoruz. Dilerseniz kendiniz oluşturmak yerine aşağıdaki kod bloklarını kullanabilirsiniz.

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { 
return MaterialApp( 
debugShowCheckedModeBanner: false, 
title: 'Projem', 
theme: ThemeData( primarySwatch: Colors.green, ), 
home: AnaSayfa(), 
); 
}
 }

• Tüm bunları yaptığımızda aşağıdaki görünümü elde etmiş olmalıyız. home:Anasayfa() yapısını aşağıda tanımlıyor olacağız.

import 'package:flutter/material.dart'; 
void main() => runApp(MyApp()); 
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { 
return MaterialApp( 
debugShowCheckedModeBanner: false, 
title: 'Projem', 
theme: ThemeData( primarySwatch: Colors.green, ), 
home: AnaSayfa(), 
); 
} 
}

• Şimdi sırada StatefulWidget oluşturma var. Kod editörümüz "stf" yazınca çıkar. Ben çok uzatmadan kod bloğunun tamamını paylaşıyorum ve anlatıma bu kod bloğu üzerinden devam ediyorum.

class AnaSayfa extends StatefulWidget { @override _AnaSayfaState createState() => _AnaSayfaState(); } 
class _AnaSayfaState extends State<AnaSayfa> { 
int _aktifIcerikNo = 0; 
List<Widget> _icerikler; 
@override void initState() { 
super.initState(); 
_icerikler = [ 
Text("BURADA ANASAYFA İÇERİKLERİ YER ALIR"), 
Text("BURADA SEPET İÇERİKLERİ YER ALIR"), ]; }
 @override Widget build(BuildContext context) { 
return Scaffold( 
backgroundColor: Colors.white, 
appBar: AppBar( 
iconTheme: IconThemeData(color: Colors.red[400]),
 elevation: 0.0,
 backgroundColor: Colors.white,
 centerTitle: true, 
title: Text( "widget Listesi ve BottomNavigationBar", 
style: TextStyle( fontSize: 20.0, fontWeight: FontWeight.bold, color: Colors.grey), 
), 
), 
body: _icerikler[_aktifIcerikNo], 
bottomNavigationBar: BottomNavigationBar( 
currentIndex: _aktifIcerikNo, 
selectedItemColor: Colors.red[400],
 unselectedItemColor: Colors.grey[600], 
items: [ BottomNavigationBarItem(
 // ignore: deprecated_member_use 
icon: Icon(Icons.home), title: Text("ANASAYFA")), BottomNavigationBarItem( // ignore: deprecated_member_use icon: Icon(Icons.shopping_cart), 
title: Text("SEPET")) 
], 
onTap: (int tiklananButonPozisyonNo) { 
setState(() { 
_aktifIcerikNo = tiklananButonPozisyonNo; });
 }, 
), 
); 
}
 }

List<Widget> _icerikler;

• Bu yapı ile içerisinde widget tutan ve yalnızca tanımlandığı sayfadan erişilebilen bir liste oluşturmuş olduk.

@override void initState() { 
super.initState();
 _icerikler = [ 
Text("BURADA ANASAYFA İÇERİKLERİ YER ALIR"),
Text("BURADA SEPET İÇERİKLERİ YER ALIR"), 
];
 }

• Bu kod bloğu ile icerikler adlı widget listemize iki adet Text widgeti göndermiş olduk. initState içinde değilde direkt olarak listeyi tanımladığımız yerde de bu widgetleri atayabilirdik. Bu uygulama içerisinde initState içinde veya dışında bir tanımlama yapmak farkettirmeyecektir.

bottomNavigationBar: BottomNavigationBar( 
currentIndex: _aktifIcerikNo, 
selectedItemColor: Colors.red[400], 
unselectedItemColor: Colors.grey[600],
items: [ 
BottomNavigationBarItem( // ignore: deprecated_member_use icon: 
Icon(Icons.home), 
title: Text("ANASAYFA")),
 BottomNavigationBarItem( // ignore: deprecated_member_use icon: Icon(Icons.shopping_cart), 
title: Text("SEPET")) 
], 
onTap: (int tiklananButonPozisyonNo) {
 setState(() { 
_aktifIcerikNo = tiklananButonPozisyonNo; 
});
 },
 ),

• BottomNavigationBar oluşturmak için yukarıdaki kod bloğunu kullandık.

bottomNavigationBar: BottomNavigationBar()

• BottomNavigationBar widget tanımlamasını yaptık.

selectedItemColor: Colors.red[400],

• Seçili menü iteminin rengini belirledik

unselectedItemColor: Colors.grey[600],

• Bir menü itemi seçili iken seçili olmayan menü iteminin/itemlerinin rengini belirledik

items: [ 
BottomNavigationBarItem( // ignore: deprecated_member_use icon: Icon(Icons.home), 
title: Text(“ANASAYFA”),
),

• items liste tipinde menü itemlerini tutar. Bu yüzden items yazdıktan hemen sonra köşeli parantezleri kullanıyoruz. BottomNavigationBarItem ile de alt menüye icon ve text atıyoruz. BottomNavigationBar tek bir BottomNavigationBarItem’den oluşamaz. Aynı kod bloğunu kopyalayıp bir sonraki satıra yapıştırıyoruz.

onTap: (int tiklananButonPozisyonNo) { 
setState(() { 
_aktifIcerikNo = tiklananButonPozisyonNo; 
});

• onTap BottomNavigationBarItem’lere tıklanma özelliği kazandırıyor. onTap için anonim bir fonksiyon tanımlayıp, onTap’ın bizden istediği int tipindeki parametreyi bu fonksiyona atıyoruz. Anonim fonksiyon nedir diye düşünüyor ya da bilgi sahibi olmak istiyorsanız buradan ilgili yazıma ulaşabilirsiniz.
• setState ise bildiğiniz gibi StatefulWidget’lerde yapılan,değişen durumları programa haber vermek için kullanıyoruz. İçerisinde yer alan _aktifIcerikNo adlı değişkene onTap metodu için oluşturduğumuz anonim fonksiyonunun tiklananButonPozisyonNo parametresini gönderiyoruz. tiklananButonPozisyonNo parametresi veri tipinden de anlaşılacağı üzre int yani sayısal bir değer tutuyor. BottomNavigationBarItem’lere tıkladığımızda geriye dönen değer 0,1,2 gibi sayılardır.

int _aktifIcerikNo = 0;

• Sayfanın hemen başlarında bu tanımlamayı yapmıştık. Yukarıda ki kod bloğunun açıklamasını okuduysanız şimdi neden bu değişkeni oluşturduğumuzu biraz daha anlamışsınızdır.

body: _icerikler[_aktifIcerikNo],

• body kısmında yer alan bu kod blokları ise bize normalde _icerikler[liste_index_no] tipinde bir değer dönderir. Yani oluşturulan listedeki widgetlerin index numaralarını verirsek o widgetleri ekrana getirir. Ancak biz burada BottomNavigationBarItem’lerine tıkladığımızda farklı içerikler,sayfalar görmek istediğimizden bu liste_index_no yazan kısma _aktifIcerikNo yazdık. Böylece BottomNavigationBarItem’lerine tıklanınca dönen değeri alıp liste_index_no yaptık. Bu şekilde yaparak tıkladığımız itemlere göre içerik getirme işlemini tamamlamış olduk.

EKRAN GÖRÜNTÜLERİ

Bir yazının daha sonuna geldik umarım sizler için bilgilendirici ve faydalı olmuştur.Eksik ya da hatalı olarak gördüğünüz yerleri tarafıma lütfen bildirin!

www.abdullahtas.net

info@abdullahtas.net

İyi çalışmalar =)

Bu uygulamanın tüm kodlarına aşağıdaki linkten ulaşabilirsiniz.

gistcode: https://gist.github.com/abdullah017/45d135fb3e583adc49b522463655d1e9