skills/flutter/references/widgets-tabs.md

name	description
widgets-tabs	Flutter TabBar and TabController - tab navigation, tab views, and tab management

TabBar and TabController

Flutter provides TabBar and TabController for tab navigation.

Basic TabBar

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      title: Text('Tabs'),
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.home), text: 'Home'),
          Tab(icon: Icon(Icons.search), text: 'Search'),
          Tab(icon: Icon(Icons.person), text: 'Profile'),
        ],
      ),
    ),
    body: TabBarView(
      children: [
        HomeScreen(),
        SearchScreen(),
        ProfileScreen(),
      ],
    ),
  ),
)

TabController

Control tabs programmatically.

class TabExample extends StatefulWidget {
  const TabExample({super.key});

  @override
  State<TabExample> createState() => _TabExampleState();
}

class _TabExampleState extends State<TabExample>
    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: [
          Container(color: Colors.red),
          Container(color: Colors.green),
          Container(color: Colors.blue),
        ],
      ),
    );
  }
}

TabBar Properties

TabBar(
  controller: _tabController,
  tabs: [...],
  isScrollable: false, // Allow scrolling if tabs overflow
  indicatorColor: Colors.blue, // Indicator color
  indicatorWeight: 2.0, // Indicator thickness
  indicatorSize: TabBarIndicatorSize.tab, // tab, label
  labelColor: Colors.blue, // Selected tab label color
  unselectedLabelColor: Colors.grey, // Unselected tab label color
  labelStyle: TextStyle(fontSize: 16), // Selected tab label style
  unselectedLabelStyle: TextStyle(fontSize: 14), // Unselected tab label style
  onTap: (index) {
    print('Tab $index tapped');
  },
)

TabBarView

TabBarView(
  controller: _tabController,
  children: [
    HomeScreen(),
    SearchScreen(),
    ProfileScreen(),
  ],
  physics: BouncingScrollPhysics(), // Scroll physics
)

TabController Methods

// Animate to tab
_tabController.animateTo(2);

// Listen to tab changes
_tabController.addListener(() {
  if (!_tabController.indexIsChanging) {
    print('Tab changed to ${_tabController.index}');
  }
});

// Get current index
final currentIndex = _tabController.index;

// Get previous index
final previousIndex = _tabController.previousIndex;

Key Points

• Use DefaultTabController for simple cases
• Use TabController for programmatic control
• Implement SingleTickerProviderStateMixin for TabController
• Always dispose TabController
• Use TabBar in AppBar bottom
• Use TabBarView for tab content
• Customize appearance with TabBar properties
• Listen to tab changes with addListener()