Başlıklar
Flutter TabBar Nedir Nasıl Kullanılır?
TabBar widget’ı, gösterilecek sekmeleri tanımlamanıza olanak tanır. tabs
özelliği içinde, her bir sekme için bir Tab
widget’ı listesi sağlarsınız.
TabBarView, her sekmenin içeriğini gösterir. Her bir sekme için bir widget listesi sağlarsınız ve bu widget’lar, kullanıcı sekmeler arasında geçiş yaptığında gösterilir.
DefaultTabController Nedir?
DefaultTabController
Flutter’da, TabBar
ve TabBarView
widget’larını kolayca bir araya getirmek için kullanılan bir üst widget’tır. Kendi başına bir sekme kontrol cihazı (tab controller) sağlar ve bu sayede TabBar
ile TabBarView
arasındaki sekme geçişlerini senkronize eder. DefaultTabController
, TabController
‘ı manuel olarak oluşturma ve yönetme ihtiyacını ortadan kaldırır, bu da özellikle basit tab yapılarında geliştirme sürecini hızlandırır.
DefaultTabController
genellikle bir Scaffold
widget’ının üstünde yer alır ve length
parametresi ile sekme sayısını alır. Bu widget, TabBar
ve TabBarView
widget’larını sarmalayacak şekilde konumlandırılır. length
parametresi, TabBar
ve TabBarView
içindeki sekme sayısını belirtir ve bu widget’lar DefaultTabController
tarafından sağlanan context üzerinden sekme durumunu otomatik olarak yönetirler.
TabController
‘i bir StatefulWidget
içinde oluşturabilir ve dispose
metodunda temizleyebilirsiniz, böylece daha fazla kontrol ve özelleştirme imkanı elde edersiniz.
TabbarView Nedir?
TabBarView
Flutter’da, TabBar
ile birlikte kullanılan bir widget’tır. TabBar
sekmeler arasında geçişi sağlarken, TabBarView
her sekmenin içeriğini göstermek için kullanılır. Kullanıcı, TabBar
üzerindeki sekmeler arasında geçiş yaptığında, TabBarView
içindeki karşılık gelen widget görüntülenir. Bu yapı, kullanıcılara tabanlı bir arayüzde kolayca farklı sayfalar veya görünümler arasında gezinme imkanı tanır.
TabBarView
genellikle TabBar
ile birlikte ve bir TabController
ile senkronize edilerek kullanılır. TabBarView
‘in children
özelliği, her bir sekme için bir widget listesi alır. Bu widget’lar, sekmelerin sırasına göre dizilir ve kullanıcı sekmeler arasında geçiş yaptığında görüntülenir.
Örnek Kullanım:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3, // Sekme sayısı
child: Scaffold(
appBar: AppBar(
title: Text('TabBar Örneği'),
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
),
);
}
}
TabBar’ı kullanabilmek için bir TabController’a ihtiyacınız var. Bu controller, TabBar ve TabBarView arasındaki etkileşimi yönetir. TabController’ı iki şekilde oluşturabilirsiniz:
- DefaultTabController: Uygulamanızda sadece bir tane TabBar ve TabBarView kullanacaksanız, bu widget’ı kullanarak kolayca bir TabController oluşturabilirsiniz.
- TabController ile Manuel Yönetim: Daha kompleks durumlar için, örneğin birden fazla TabBar kullanımı veya dinamik olarak tab eklemek/çıkarmak istiyorsanız, TabController’ı manuel olarak yönetebilirsiniz.
TabBar’ın görünümünü özelleştirmek, Flutter’da uygulamanızın temasına ve kullanıcı deneyimine uygun hale getirmeniz için önemlidir. Flutter, TabBar’ı özelleştirmek için çeşitli özellikler sunar.
TabBar Özellikleri
- indicatorColor: Sekme altındaki gösterge çubuğunun rengini değiştirmek için kullanılır.
- indicatorWeight: Gösterge çubuğunun kalınlığını ayarlar.
- indicatorPadding: Gösterge çubuğunun sol ve sağ kenar boşluklarını ayarlar.
- indicator: Gösterge çubuğunun şeklini ve görünümünü özelleştirmek için kullanılır.
Decoration
türünden bir değer alır. Örneğin,BoxDecoration
ile gösterge çubuğunun köşelerini yuvarlatabilirsiniz. - labelColor: Seçili sekmenin metin rengini belirler.
- unselectedLabelColor: Seçilmemiş sekmelerin metin rengini belirler.
- labelStyle: Seçili sekme metninin stilini belirler (örneğin,
TextStyle(fontSize: 18)
). - unselectedLabelStyle: Seçilmemiş sekme metinlerinin stilini belirler.
- labelPadding: Sekme metinlerinin etrafındaki boşluğu ayarlar.
- tabs: Gösterilecek sekmeleri tanımlar. Her bir
Tab
ögesi için metin, ikon veya her ikisinin birleşimini içerebilir. - isScrollable: Eğer sekme sayısı fazlaysa ve hepsi ekran genişliğine sığmıyorsa, bu özelliği
true
yaparak sekmelerin yatay olarak kaydırılabilir olmasını sağlayabilirsiniz.
Bu Yazıya Tepkin Ne Oldu ?
YORUMLAR