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.