Learn Bottom Navigation and Tabs | Navigation Fundamentals

Definition

The BottomNavigationBar and TabBar are widgets in Flutter that help you organize your app into multiple pages or sections. The BottomNavigationBar is typically used for switching between main sections of an app, while the TabBar is used for navigating between closely related views within a section.

A BottomNavigationBar is a widget placed at the bottom of the screen, allowing users to quickly switch between the main sections of your app. Each item in the bar represents a distinct page or feature, such as Home, Search, or Profile. When a user taps on an item, the corresponding page is displayed. This pattern is common in apps where users need fast access to a few primary destinations.

main.dart


              1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
            
import 'package:flutter/material.dart';

void main() {
  runApp(MyBottomNavApp());
}

class MyBottomNavApp extends StatefulWidget {
  @override
  _MyBottomNavAppState createState() => _MyBottomNavAppState();
}

class _MyBottomNavAppState extends State<MyBottomNavApp> {
  int _currentIndex = 0;

  final List<Widget> _pages = [
    Center(child: Text('Home Page', style: TextStyle(fontSize: 24))),
    Center(child: Text('Settings Page', style: TextStyle(fontSize: 24))),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Bottom Navigation Example')),
        body: _pages[_currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: 'Settings',
            ),
          ],
          onTap: (index) {
            setState(() {
              _currentIndex = index;
            });
          },
        ),
      ),
    );
  }
}

When you want to present multiple related views within a single page or section, you can use a TabBar along with a TabBarView. The TabBar displays a row of tabs, and the TabBarView shows the content for the selected tab. This is useful for organizing content that belongs together, such as different categories or filter options within the same screen.

main.dart


              1234567891011121314151617181920212223242526272829303132333435
            
import 'package:flutter/material.dart';

void main() {
  runApp(MyTabBarApp());
}

class MyTabBarApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text('TabBar Example'),
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car), text: 'Car'),
                Tab(icon: Icon(Icons.directions_transit), text: 'Transit'),
                Tab(icon: Icon(Icons.directions_bike), text: 'Bike'),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('Car Tab', style: TextStyle(fontSize: 24))),
              Center(child: Text('Transit Tab', style: TextStyle(fontSize: 24))),
              Center(child: Text('Bike Tab', style: TextStyle(fontSize: 24))),
            ],
          ),
        ),
      ),
    );
  }
}

Note

Use a BottomNavigationBar when navigating between top-level sections of your app, such as Home, Search, and Profile. Use a TabBar when you want to switch between closely related views within a single section, like categories or modes. Choosing the right navigation pattern helps users move through your app more intuitively.

Everything was clear?

Thanks for your feedback!

Section 4. Chapter 4

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you show me a code example for implementing BottomNavigationBar?

How do I decide when to use BottomNavigationBar versus TabBar in my app?

Can you explain how to use TabController with TabBar and TabBarView?

Swipe to show menu

Definition

main.dart


              1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
            
import 'package:flutter/material.dart';

void main() {
  runApp(MyBottomNavApp());
}

class MyBottomNavApp extends StatefulWidget {
  @override
  _MyBottomNavAppState createState() => _MyBottomNavAppState();
}

class _MyBottomNavAppState extends State<MyBottomNavApp> {
  int _currentIndex = 0;

  final List<Widget> _pages = [
    Center(child: Text('Home Page', style: TextStyle(fontSize: 24))),
    Center(child: Text('Settings Page', style: TextStyle(fontSize: 24))),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Bottom Navigation Example')),
        body: _pages[_currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: 'Settings',
            ),
          ],
          onTap: (index) {
            setState(() {
              _currentIndex = index;
            });
          },
        ),
      ),
    );
  }
}

main.dart


              1234567891011121314151617181920212223242526272829303132333435
            
import 'package:flutter/material.dart';

void main() {
  runApp(MyTabBarApp());
}

class MyTabBarApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text('TabBar Example'),
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car), text: 'Car'),
                Tab(icon: Icon(Icons.directions_transit), text: 'Transit'),
                Tab(icon: Icon(Icons.directions_bike), text: 'Bike'),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('Car Tab', style: TextStyle(fontSize: 24))),
              Center(child: Text('Transit Tab', style: TextStyle(fontSize: 24))),
              Center(child: Text('Bike Tab', style: TextStyle(fontSize: 24))),
            ],
          ),
        ),
      ),
    );
  }
}

Note

Everything was clear?

Thanks for your feedback!

Section 4. Chapter 4