BottomNavigationBar in Flutter: solved exercise with IndexedStack

  2 minutes

If you are looking for BottomNavigationBar in Flutter, this solved exercise gives you a practical implementation pattern you can reuse in real projects.

Build a screen with:

  • three tabs: Home, Search, Profile
  • keep tab state when switching
  • simple tab navigation flow
import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: TabsPage()));

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

  @override
  State<TabsPage> createState() => _TabsPageState();
}

class _TabsPageState extends State<TabsPage> {
  int index = 0;

  final pages = const [
    Center(child: Text('Inicio')),
    Center(child: Text('Buscar')),
    Center(child: Text('Perfil')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('BottomNavigationBar')),
      body: IndexedStack(index: index, children: pages),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: index,
        onTap: (i) => setState(() => index = i),
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Inicio'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Buscar'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Perfil'),
        ],
      ),
    );
  }
}

Each tab keeps its state while switching quickly between sections.

  • Rebuilding pages and losing tab state.
  • Not syncing currentIndex.
  • Mixing tab and stack navigation without design.

A common pattern for commerce, media, productivity, and banking-style apps.

Using IndexedStack is one of the most straightforward approaches.

Yes, especially for 3 to 5 primary app sections.

Use a combination of tabs, nested navigation, or a drawer.