BottomNavigationBar ile alt kısımda sekmeler oluşturmayı gördük. Bu kez de TabBar ile üst kısımda aşağıdaki resimde gösterildiği gibi sekmeler oluşturmayı öğreneceğiz.
Tıpkı BottomNavigationBar başlığı altında yaptığımız gibi ilk iş olarak “gonderiler.dart”, “mesajlar.dart” ve “profil.dart” dosyaları içinde, sadece ekranın ortasında birer adet Text widget’ı içeren üç adet sayfa (StatelessWidget) oluşturacağız.
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, yine BottomNavigationBar‘da yaptığımız gibi, “AnaSayfa” içinde “Gonderiler”, “Mesajlar” ve “Profil” sayfalarını içeren bir “_sayfalar” listesi oluşturacağı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 StatelessWidget{
List<Widget> _sayfalar = [
Gonderiler(),
Mesajlar(),
Profil(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: _buildAppBar(),
body: _buildBody(),
);
}
Widget _buildAppBar() {
return AppBar(
title: Text("Ana Sayfa"),
);
}
Widget _buildBody() {
return Container();
}
}
Sayfalarımız hazır. Dikkatinizi çektiyse BottomNavigationBar‘ın aksine bu kez “AnaSayfa”yı StatelessWidget olarak oluşturduk. Çünkü TabBar‘ı uygularken state güncellemesine ihtiyacımız olmayacak, ekran görüntüsü otomatik olarak güncellenecek. Şimdi TabBar‘ı oluşturmaya başlayabiliriz.
Drawer ve BottomNavigationBar‘ın aksine, TabBar‘ı Scaffold‘un hazır bir parametresine değer vererek oluşturmayacağız, çünkü Scaffold‘un böyle bir parametresi bulunmuyor. Ancak bu sebeple zorlanacağımızı düşünmeyin, aksine daha kolay bir şekilde işimizi halledeceğiz.
İlk olarak bir “Tab Controller”a ihtiyacımız var. Biz varsayılan “controller”ı kullanacağız ve bunun için de Scaffold‘u DefaultTabController widget’ıyla sarmalayacağız.
ana_sayfa.dart
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: _sayfalar.length,
child: Scaffold(
appBar: _buildAppBar(),
body: _buildBody(),
),
);
}
DefaultTabController, “length” isminde bir parametre alıyor. Bu parametre ile kaç adet sekme oluşturacağımızı belirliyoruz. Sayıyı elle girmek yerine “_sayfalar” listesinin uzunluğunu değer olarak vermeyi tercih ettik. Böylece “controller”ımızı oluşturmuş olduk.
Ardından, TabBar‘ımızı oluşturacağız. AppBar‘ın içinde “bottom” şeklinde bir parametre bulunuyor. TabBar‘ı o parametreye değer olarak vereceğiz.
ana_sayfa.dart
Widget _buildAppBar() {
return AppBar(
title: Text("Ana Sayfa"),
bottom: TabBar(
tabs: [
Tab(
text: "Gönderiler",
icon: Icon(Icons.web),
),
Tab(
text: "Mesajlar",
icon: Icon(Icons.message),
),
Tab(
text: "Profil",
icon: Icon(Icons.person),
),
],
),
);
}
TabBar‘ın “tabs” ismindeki parametresi ise değer olarak bir widget listesi alıyor. Listeyi açtık ve her bir sekme için birer tane Tab widget’ı oluşturduk. Tab widget’ının “text” parametresi sekmedeki başlığı, “icon” parametresi ise sekmedeki ikonu oluşturmamızı sağlıyor. Dilersek “child” parametresi ile kendi oluşturduğumuz bir widget’ı da sekme görseli olarak ayarlayabiliriz. Ancak bu durumda “text” parametresini kullanmamamız gerekiyor, aksi halde hata alırız.
TabBar‘ı oluşturmak için gerekli olan tüm kodları yazmış olduk. Aşağıdaki resimde görüldüğü gibi TabBar oluşacaktır ve artık sekmelere tıklayarak değiştirebiliriz.
Geriye sadece TabBar‘ı body ile bağlamak kaldı. Bu adım fazlasıyla kolay bir adım olacaktır.
ana_sayfa.dart
Widget _buildBody() {
return TabBarView(
children: _sayfalar,
);
}
“_buildBody” fonksiyonundan TabBarView isminde bir widget döndürüyoruz. Bu widget, “children” parametresinde bir widget listesi alıyor. Bu listeye de basitçe “_sayfalar” listemizi veriyoruz ve hepsi bu kadar. Uygulamanın ulaşmaya çalıştığımız son haline ulaşmış olduk. “AnaSayfa” kodlarının tamamlanmış halini aşağıda görebilirsiniz.
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 StatelessWidget {
List<Widget> _sayfalar = [
Gonderiler(),
Mesajlar(),
Profil(),
];
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: _sayfalar.length,
child: Scaffold(
appBar: _buildAppBar(),
body: _buildBody(),
),
);
}
Widget _buildAppBar() {
return AppBar(
title: Text("Ana Sayfa"),
bottom: TabBar(
tabs: [
Tab(
text: "Gönderiler",
icon: Icon(Icons.web),
),
Tab(
text: "Mesajlar",
icon: Icon(Icons.message),
),
Tab(
text: "Profil",
icon: Icon(Icons.person),
),
],
),
);
}
Widget _buildBody() {
return TabBarView(
children: _sayfalar,
);
}
}
Ufak bir ara bilgi ekleyelim. Uygulama açıldığında “AnaSayfa”da varsayılan olarak sıfırıncı indeksteki sayfa, yani “Gonderiler” sayfası gösterilir. Varsayılan sayfayı değiştirmek istiyorsanız DefaultTabController‘ın “initialIndex” parametresine istediğiniz indeksi aşağıdaki gibi verebilirsiniz.
ana_sayfa.dart
@override
Widget build(BuildContext context) {
return DefaultTabController(
initialIndex: 1,
length: _sayfalar.length,
child: Scaffold(
appBar: _buildAppBar(),
body: _buildBody(),
),
);
}
“initialIndex” parametresine 1 değerini verdik, yani artık uygulama açıldığında ilk olarak birinci indeksteki ekran (Mesajlar) açılacaktır.
Son olarak, TabBar‘ı özelleştirebilmemizi sağlayan bazı parametrelere bakalım.
indicator: Seçili sekmeyi belli eden, bu sekmeyi ön plana çıkaran dekorasyona “indicator” denir. Varsayılan olarak, şu ana kadarki ekran görüntülerinde gördüğümüz gibi sekmenin altında beyaz bir çubuk şeklindedir. Dilerseniz ve bu parametreye değer atayarak “indicator”ı özelleştirebilirsiniz. “indicator” parametresi “Decoration” türünden bir nesne alır. Aşağıdaki örnekte “BoxDecoration” türünden bir nesne verdik ve “indicator”ı gri renkte, köşeleri yuvarlatılmış bir dikdörtgen şeklinde tanımladık. Bu tanımlamanın nasıl yapıldığını aşağıda, tüm parametrelerin kullanımının yer aldığı kod parçasında görebilirsiniz.
indicatorWeight: Indicator’ın kalınlığını belirler. Örneğin aşağıdaki resimde, varsayılan indicator’ın kalınlaştırılmış halini görebilirsiniz.
indicatorSize: İki farklı değer alır. Varsayılan değeri “TabBarIndicatorSize.tab”dir. Bu değer “indicator”ın genişliğinin her tab için o tab’in genişliği kadar olmasını sağlar. Eğer diğer değer olan “TabBarIndicatorSize.label” değeri verilirse, bu sefer aşağıdaki resimde olduğu gibi indicator’ın genişliği, her tab için o tab’deki yazının uzunluğu kadar olacaktır.
indicatorColor: Indicator’a renk verebilmemizi sağlar.
labelColor: İkonların ve yazıların rengini değiştirebilmemizi sağlar.
labelStyle: Sekmelerdeki yazıların stilini ayarlayabilmemizi sağlar ve değer olarak “TextStyle” türünde bir nesne alır. Örneğin, aşağıdaki resimde yazıları italik yaptık.
unselectedLabelColor: Seçili olmayan sekmelerdeki ikonların ve yazıların rengini değiştirebilmemizi sağlar.
unselectedLabelStyle: Seçili olmayan sekmelerdeki yazıların stilini ayarlayabilmemizi sağlar ve değer olarak “TextStyle” türünde bir nesne alır.
Tüm bu parametrelerin kullanımını aşağıdaki kod parçasında görebilirsiniz.
ana_sayfa.dart
Widget _buildAppBar() {
return AppBar(
title: Text("Ana Sayfa"),
bottom: TabBar(
tabs: [
Tab(
text: "Gönderiler",
icon: Icon(Icons.web),
),
Tab(
text: "Mesajlar",
icon: Icon(Icons.message),
),
Tab(
text: "Profil",
icon: Icon(Icons.person),
),
],
indicator: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(10),
),
indicatorWeight: 10,
indicatorSize: TabBarIndicatorSize.tab,
indicatorColor: Colors.grey,
labelColor: Colors.black,
labelStyle: TextStyle(fontStyle: FontStyle.italic),
unselectedLabelColor: Colors.red,
unselectedLabelStyle: TextStyle(fontStyle: FontStyle.normal),
),
);
}
Bir diğer navigasyon widget’ı olan TabBar‘ın nasıl kullanılacağını da ayrıntılı olarak görmüş olduk.
