Uygulamalarda yaygın olarak gördüğümüz bir başka öğe de uygulamanın en alt kısmında bulunan ve sekmeler arasında geçiş yapmamızı sağlayan butonlardır.
Aşağıda, ekranın en alt kısmında bu butonların kullanımına dair bir örnek görebilirsiniz.
Bu sekmelere her tıklandığında, ortadaki (yani ‘body’ kısmındaki) içerik değişir ve başka bir sayfa açılır. Örneğin, “Mesajlar” sekmesine tıkladığımızda aşağıdaki gibi “Mesajlar” sayfası açılır.
Şimdi adım adım bu görseli nasıl uygulayacağımızı görelim.
Öncelikle ‘body’ kısmında göstereceğimiz sayfaları “gonderiler.dart”, “mesajlar.dart” ve “profil.dart” olmak üzere ayrı dosyalar içinde oluşturalım. Sayfalarda kapsamlı bir tasarım yapmayacağız, sadece ortalarına birer Text widget’ı yerleştireceğiz.
gonderiler.dart
import 'package:flutter/material.dart';
class Gonderiler extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(
"Gönderiler",
style: TextStyle(fontSize: 36),
),
);
}
}
mesajlar.dart
import 'package:flutter/material.dart';
class Mesajlar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(
"Mesajlar",
style: TextStyle(fontSize: 36),
),
);
}
}
profil.dart
import 'package:flutter/material.dart';
class Profil extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(
"Profil",
style: TextStyle(fontSize: 36),
),
);
}
}
Şimdi “AnaSayfa”yı kodlamaya başlayabiliriz. BottomNavigationBar‘ın kullanımına geçmeden önce verilerimizi hazırlayalım. İlk olarak, sayfalarımızı “_sayfalar” isminde bir widget listesinde (List<Widget>) tutacağız. Bir de seçili sayfanın indeksini tutması için “_seciliSayfaIndeksi” isminde int türünde bir değişken oluşturacağız ve varsayılan olarak 0 değerini atayacağız.
ana_sayfa.dart
import 'package:flutter/material.dart';
import 'package:ilk_flutter_projem/gonderiler.dart';
import 'package:ilk_flutter_projem/mesajlar.dart';
import 'package:ilk_flutter_projem/profil.dart';
class AnaSayfa extends StatefulWidget {
@override
_AnaSayfaState createState() => _AnaSayfaState();
}
class _AnaSayfaState extends State<AnaSayfa> {
List<Widget> _sayfalar = [
Gonderiler(),
Mesajlar(),
Profil(),
];
int _seciliSayfaIndeksi = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: _buildAppBar(),
body: _buildBody(),
);
}
Widget _buildAppBar() {
return AppBar(
title: Text("Ana Sayfa"),
);
}
Widget _buildBody() {
return _sayfalar[_seciliSayfaIndeksi];
}
}
Şu ana kadar belirttiğimiz işlemleri tamamlamış olduk, listemizi ve int değişkenimizi oluşturduk. Scaffold‘un ‘body’ kısmına ise “_sayfalar” listesi içinden o anda seçili olan sayfayı belirleyerek değer olarak atadık. Ekran görüntümüz aşağıdaki gibi olacaktır.
“_seciliSayfaIndeksi”ne varsayılan olarak 0 değerini verdiğimiz için ‘body’ kısmında bizim oluşturduğumuz, “_sayfalar” listesinin sıfırıncı elemanı olan Gonderiler widget’ını görüyoruz.
Verilerimiz hazır olduğuna göre artık BottomNavigationBar‘ın kullanımına geçebiliriz. Şanslıyız ki Scaffold, bunun için de bir parametre içeriyor. Tek yapmamız gereken, Scaffold‘un “bottomNavigationBar” parametresine değer atamak.
ana_sayfa.dart
import 'package:flutter/material.dart';
import 'package:ilk_flutter_projem/gonderiler.dart';
import 'package:ilk_flutter_projem/mesajlar.dart';
import 'package:ilk_flutter_projem/profil.dart';
class AnaSayfa extends StatefulWidget {
@override
_AnaSayfaState createState() => _AnaSayfaState();
}
class _AnaSayfaState extends State<AnaSayfa> {
List<Widget> _sayfalar = [
Gonderiler(),
Mesajlar(),
Profil(),
];
int _seciliSayfaIndeksi = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: _buildAppBar(),
body: _buildBody(),
bottomNavigationBar: _buildBottomNavigationBar(),
);
}
Widget _buildAppBar() {
return AppBar(
title: Text("Ana Sayfa"),
);
}
Widget _buildBody() {
return _sayfalar[_seciliSayfaIndeksi];
}
Widget _buildBottomNavigationBar() {
return BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.web),
label: 'Gönderiler',
),
BottomNavigationBarItem(
icon: Icon(Icons.message),
label: 'Mesajlar',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profil',
),
],
currentIndex: _seciliSayfaIndeksi,
onTap: _sayfaDegistir,
);
}
void _sayfaDegistir(int yeniIndeks) {
setState(() {
_seciliSayfaIndeksi = yeniIndeks;
});
}
}
“_buildBottomNavigationBar” isminde bir fonksiyon oluşturduk ve Scaffold‘un “bottomNavigationBar” parametresine bu fonksiyonun döndürdüğü widget’ı değer olarak atadık. Şimdi “_buildBottomNavigationBar” fonksiyonunu adım adım inceleyelim. Fonksiyon, BottomNavigationBar türünde bir widget döndürüyor. Bu widget’ın değer alması gereken bazı önemli parametreleri var ve en önemlisi de “items” parametresidir. “items” parametresi değer olarak BottomNavigationBarItem türünde nesnelerden oluşan bir liste alır (List<BottomNavigationBarItem>). Bu listenin içine de her bir sekme için bir BottomNavigationBarItem yerleştiririz. Biz de örneğimizde “Gönderiler”, “Mesajlar” ve “Profil” sekmeleri için toplamda üç adet BottomNavigationBarItem yerleştirdik.
BottomNavigationBarItem üzerinde gösterilecek ikonu “icon” parametresiyle, ikonun altındaki yazıyı da “label” parametresiyle belirliyoruz. Eğer sekme aktif olduğunda başka ikon gösterilsin istiyorsak, “activeIcon” parametresine de değer atayabiliriz.
BottomNavigationBarItem‘ların hepsini ekledikten sonra diğer önemli parametrelere geçebiliriz. BottomNavigationBar‘ın hangi sekmesinin aktif olacağını belirlemek için “currentIndex” parametresine değer atıyoruz. Biz de örneğimizde bu parametreye “_seciliSayfaIndeksi” değişkenimizin değerini atadık.
Bir diğer önemli parametre “onTap” parametresidir. Bu parametre değer olarak bir fonksiyon alır. Biz de “_sayfaDegistir” isminde bir fonksiyon oluşturup “onTap” parametresine değer olarak atadık. Bir sekmeye tıklandığında bu fonksiyon çalışacak ve tıklanan sekmenin indeksi “yeniIndeks” parametresinde tutulacaktır. Fonksiyonun gövdesi içinde “yeniIndeks” parametresinin değerini setState aracılığıyla “_seciliSayfaIndeksi” değişkenine atıyoruz. Böylece hem BottomNavigationBar üzerinde aktif olan sayfa güncelleniyor, hem de “_buildBody” içinde ‘body’yi aşağıdaki gibi “_seciliSayfaIndeksi”ne bağlı olarak oluşturduğumuz için ‘body’ komple güncelleniyor.
ana_sayfa.dart
Widget _buildBody() {
return _sayfalar[_seciliSayfaIndeksi];
}
Böylece başarılı bir şekilde BottomNavigationBar‘ımızı oluşturmuş olduk. Şimdi BottomNavigationBar‘ı görsel olarak özelleştirmemizi sağlayan parametrelere bir göz atalım.
elevation: Diğer birçok widget’ta olduğu gibi BottomNavigationBar’a sanki bir yükseklik değeri varmış gibi gölgelendirme efekti uygulamamızı sağlar.
backgroundColor: BottomNavigationBar’a bir arka plan rengi verebilmemizi sağlar.
selectedItemColor: Seçili olan öğenin ne renk olacağını belirlememizi sağlar.
unselectedItemColor: Seçili olmayan öğelerin ne renk olacağını belirlememizi sağlar.
iconSize: Sekmelerde gösterilen ikonların boyutunu ayarlamamızı sağlar.
showSelectedLabels: Sekmelerde istersek “label” gösterebilir, istersek de sadece ikon gösterebiliriz. Bu parametre, seçili olan öğede “label” gösterilip gösterilmeyeceğini ayarlamamızı sağlar. Eğer değerini “false” yaparsak aşağıdaki resimde olduğu gibi seçili öğede “label” gösterilmez.
showUnselectedLabels: Bu parametre de seçili olmayan öğelerde “label” gösterilip gösterilmeyeceğini ayarlamamızı sağlar. Eğer değerini “false” yaparsak aşağıdaki resimde olduğu gibi seçili olmayan öğelerde “label” gösterilmez.
Eğer hiçbir şekilde “label” gösterilmesini istemiyorsak hem “showSelectedLabels” parametresini hem de “showUnselectedLabels” parametresini “false” olarak ayarlayabiliriz. Böylece ikonlar ortalanacak ve aynı hizaya geleceklerdir.
selectedFontSize: Eğer “label” gösteriliyorsa, seçili olan öğenin üzerinde yer alan “label”ın yazı boyutunu ayarlayabilmemizi sağlar.
unselectedFontSize: Eğer “label” gösteriliyorsa, seçili olmayan öğelerin üzerinde yer alan “label”ın yazı boyutunu ayarlayabilmemizi sağlar.
type: BottomNavigationBar’ın tipini ayarlayabilmemizi sağlar. Alabileceği iki değer vardır: “BottomNavigationBarType.fixed” veya “BottomNavigationBarType.shifting”. Eğer “fixed” değeri verilirse, sekmeler tıklandıklarında yerlerinde sabit dururlar. “shifting” değeri verildiğinde ise her tıklamada sekmeler kayar ve seçili olan sekme animasyonlu bir şekilde öne çıkar. Diğerleri de aşağıdaki resimde görüldüğü gibi öne çıkan bu sekmeye daha fazla yer açarak kapladıkları alanı biraz küçültürler.
Önemli Not: “type” parametresini “shifting” olarak ayarladığınızda ikonların varsayılan rengi beyaza dönüyor ve varsayılan arka plan rengi de aynı renk olduğu için butonlar görünmüyor. Bu durumda butonlar kayboldu diye endişelenmeyin, “selectedItemColor” ve “unselectedItemColor” parametrelerine elle değer vererek butonların tekrar görünmesini sağlayabilirsiniz.
Parametrelerin kullanımını aşağıdaki kod parçasında görebilirsiniz.
ana_sayfa.dart
Widget _buildBottomNavigationBar() {
return BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.web),
label: 'Gönderiler',
),
BottomNavigationBarItem(
icon: Icon(Icons.message),
label: 'Mesajlar',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profil',
),
],
currentIndex: _seciliSayfaIndeksi,
onTap: _sayfaDegistir,
elevation: 20,
backgroundColor: Colors.grey,
selectedItemColor: Colors.grey[900],
unselectedItemColor: Colors.grey,
iconSize: 24,
showSelectedLabels: true,
showUnselectedLabels: true,
selectedFontSize: 16,
unselectedFontSize: 12,
type: BottomNavigationBarType.shifting,
);
}
Sadece BottomNavigationBar‘ı nasıl kullanacağımızı öğrenmekle kalmadık, nasıl özelleştireceğimizi de ayrıntılı olarak öğrenmiş olduk.
