Flutter: TabBar und TabBarView verwenden

Mit TabBar und TabBarView können wir mehrere Seiten auf demselben Bildschirm anzeigen. Zwischen den Seiten wechseln wir durch Tippen auf einen Tab oder durch Wischen nach links und rechts.

Live-Demo

Sie können dieses Widget im interaktiven Beispiel unten ausprobieren:

💡 Falls das Beispiel oben nicht lädt, klicken Sie auf DartPad, um es in einem neuen Tab auszuführen.

Grundlegende Verwendung

Für die Verwendung der TabBar wird ein TabController benötigt:

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('Page 1')),
          Center(child: Text('Page 2')),
          Center(child: Text('Page 3')),
        ],
      ),
    );
  }
}

Einfache Verwendung mit DefaultTabController

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(),
      ],
    ),
  ),
)

Eigenschaften der TabBar

Eigenschaft	Beschreibung
tabs	Liste der Tab-Widgets
controller	TabController
indicatorColor	Farbe der Unterstreichung
indicatorWeight	Stärke der Unterstreichung
labelColor	Farbe des ausgewählten Tabs
unselectedLabelColor	Farbe nicht ausgewählter Tabs
isScrollable	Scrollbare Tabs

Tab mit Symbol und Text

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

// Icon only
Tab(icon: Icon(Icons.search))

// Text only
Tab(text: 'Profile')

Tabs programmatisch wechseln

// Go to specific tab
_tabController.animateTo(2);

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

// Listen to tab changes
_tabController.addListener(() {
  print('Active tab: ${_tabController.index}');
});

Scrollbare Tabs

Wenn es viele Tabs gibt:

TabBar(
  isScrollable: true, // Horizontal scrolling enabled
  tabs: [
    Tab(text: 'Tab 1'),
    Tab(text: 'Tab 2'),
    Tab(text: 'Tab 3'),
    Tab(text: 'Tab 4'),
    Tab(text: 'Tab 5'),
  ],
)

Zusammenfassung

• TabBar: Zeigt die Tab-Buttons
• TabBarView: Zeigt die Inhalte der Tabs
• TabController: Verwaltet den Zustand der Tabs
• SingleTickerProviderStateMixin: Für die Animation erforderlich
• DefaultTabController: Wrapper für die einfache Verwendung

Tabs eignen sich ideal, um mehrere Inhalte auf einem Bildschirm anzuzeigen.