Flutter: TabBar ve TabBarView Kullanımı

TabBar ve TabBarView kullanarak aynı ekranda birden fazla sayfa gösterebiliriz. Tablara tıklayarak veya parmak hareketi ile sağa-sola kaydırarak sayfalar arasında geçiş yapabiliriz.

Canlı Demo

Aşağıdaki interaktif örnekte bu widget'ı deneyebilirsiniz:

💡 Eğer yukarıdaki örnek açılmazsa, DartPad linkine tıklayarak yeni sekmede çalıştırabilirsiniz.

Temel Kullanım

TabBar kullanmak için TabController gereklidir:

class MyPage extends StatefulWidget {
  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tabs'),
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(text: 'Tab 1'),
            Tab(text: 'Tab 2'),
            Tab(text: 'Tab 3'),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          Center(child: Text('Sayfa 1')),
          Center(child: Text('Sayfa 2')),
          Center(child: Text('Sayfa 3')),
        ],
      ),
    );
  }
}

DefaultTabController ile Basit Kullanım

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.home)),
          Tab(icon: Icon(Icons.search)),
          Tab(icon: Icon(Icons.person)),
        ],
      ),
    ),
    body: TabBarView(
      children: [
        HomeTab(),
        SearchTab(),
        ProfileTab(),
      ],
    ),
  ),
)

TabBar Özellikleri

Özellik	Açıklama
tabs	Tab widget listesi
controller	TabController
indicatorColor	Alt çizgi rengi
indicatorWeight	Alt çizgi kalınlığı
labelColor	Seçili tab rengi
unselectedLabelColor	Seçili olmayan tab rengi
isScrollable	Kaydırılabilir tabs

İkonlu ve Yazılı Tab

Tab(
  icon: Icon(Icons.home),
  text: 'Ana Sayfa',
)

// Sadece ikon
Tab(icon: Icon(Icons.search))

// Sadece yazı
Tab(text: 'Profil')

Programatik Tab Değiştirme

// Belirli bir tab'a git
_tabController.animateTo(2);

// Mevcut index'i al
int currentIndex = _tabController.index;

// Tab değişikliğini dinle
_tabController.addListener(() {
  print('Aktif tab: ${_tabController.index}');
});

Kaydırılabilir Tabs

Çok sayıda tab olduğunda:

TabBar(
  isScrollable: true, // Yatay kaydırma aktif
  tabs: [
    Tab(text: 'Tab 1'),
    Tab(text: 'Tab 2'),
    Tab(text: 'Tab 3'),
    Tab(text: 'Tab 4'),
    Tab(text: 'Tab 5'),
  ],
)

Özet

• TabBar: Tab butonlarını gösterir
• TabBarView: Tab içeriklerini gösterir
• TabController: Tab durumunu yönetir
• SingleTickerProviderStateMixin: Animasyon için gerekli
• DefaultTabController: Basit kullanım için wrapper

Tabs, aynı ekranda birden fazla içerik göstermek için idealdir.