Flutter 8: Navigation - Simple Guide with Examples

Flutter 8: Navigation - Simple Guide with Examples

Flutter offers powerful navigation widgets to help users move between views and sections seamlessly. This guide covers the essentials of Flutter navigation, providing clear examples for each widget.

1. NavigationBar - Bottom App Navigation

A modern Material-style bottom navigation bar. Use inside a Scaffold as bottomNavigationBar.

NavigationBar(
 selectedIndex: 0,
 onDestinationSelected: (int index) {},
 destinations: [
 NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
 NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
 NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
 ],
)

2. TabBar - Tab Navigation (Top Tabs)

Used for switching between different views using tabs. The following example demonstrates a basic TabBar implementation.

DefaultTabController(
 length: 3,
 child: Scaffold(
 appBar: AppBar(
 title: Text('Tab Example'),
 bottom: TabBar(
 tabs: [
 Tab(icon: Icon(Icons.directions_car)),
 Tab(icon: Icon(Icons.directions_transit)),
 Tab(icon: Icon(Icons.directions_bike)),
 ],
 ),
 ),
 body: TabBarView(
 children: [
 Center(child: Text('Car')),
 Center(child: Text('Transit')),
 Center(child: Text('Bike')),
 ],
 ),
 ),
)

3. TabPageSelector - Dot Indicator for TabBarView

Gives visual feedback for the currently selected tab (usually with dots). This is often used in conjunction with TabBarView.

DefaultTabController(
 length: 3,
 child: Column(
 children: [
 TabPageSelector(),
 Expanded(
 child: TabBarView(
 children: [
 Center(child: Text('Page 1')),
 Center(child: Text('Page 2')),
 Center(child: Text('Page 3')),
 ],
 ),
 ),
 ],
 ),
)

Pro Tip

Combine NavigationBar for global navigation and TabBar for local screen navigation – perfect for apps with multiple layers.

• NavigationBar: For app-level navigation.
• TabBar: For screen-level navigation.
• TabPageSelector: Provides visual feedback.