Build-In Widgets for Navigation in Flutter

Here are some examples of how to use the Build-In in Flutter SDK Widgets that encapsulate some form of Navigation between user interface components.

Drawer

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Drawer Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  final List<Widget> _children = [
    Text('Home'),
    Text('Settings'),
    Text('About'),
  ];

  void _pushDrawer() {
    Scaffold.of(context).openEndDrawer();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      endDrawer: Drawer(
        child: ListView(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('Settings'),
              onTap: () {
                Navigator.of(context).pushReplacementNamed('/settings');
              },
            ),
            ListTile(
              leading: Icon(Icons.info),
              title: Text('About'),
              onTap: () {
                Navigator.of(context).pushReplacementNamed('/about');
              },
            ),
          ],
        ),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _pushDrawer,
          child: Text('Open Drawer'),
        ),
      ),
    );
  }
}

This code creates a simple app with an endDrawer, and a Centered button to open the drawer.

BottomNavigationBar

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bottom Navigation Bar Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  final List<Widget> _children = [
    Text('Home'),
    Text('Settings'),
    Text('About'),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: Text('Tap a button to navigate'),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), label :'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
          BottomNavigationBarItem(icon: Icon(Icons.info), label: 'About'),
        ],
        currentIndex: _currentIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

This code creates a simple app with a BottomNavigationBar, and three buttons to navigate between the tabs. Somehow this navigation bar is prefered navigation widget:

• Because it is Apple Style
• It is located on the bottom – where it is close to the fingers. More about this UX in here: https://programtom.com/dev/2024/10/18/simple-example-of-how-to-use-a-modal-bottom-sheet-in-flutter/

TabBar

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tab Bar Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override State createState() => _MyHomePageState();
}
 class _MyHomePageState extends State with TickerProviderStateMixin {
  final List _children = [
    Text('Home'),
    Text('Settings'),
    Text('About'),
  ];

  int _currentIndex = 0;
  TabController? _tabController;

  void _onItemTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: _children.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
        bottom: 
         TabBar(
                  controller: _tabController,
                  indicatorSize: TabBarIndicatorSize.tab,
                  tabs: List.generate(_children.length, (index) => Text(index == 0 ? 'Home' : index == 1 ? 'Settings' : 'About')),
                ),
              ),
           
      
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: Text('Tap a button to navigate'),
        ),
      ),
    );
  }
}

This code creates a simple app with a TabBar, and three buttons to navigate between the tabs.

NavigationRail

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigation Rail Example',
      home: MyHomePage(),
    );
  }
}

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

  @override
  State createState() => _MyHomePageState();
}

class _MyHomePageState extends State with TickerProviderStateMixin {
  final List _children = [
    const Text('Home'),
    const Text('Settings'),
    const Text('About'),
  ];
  int _selectedIndex = 0;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          NavigationRail(
            selectedIndex: _selectedIndex,
            elevation: 10,
            extended: true,
            onDestinationSelected: (int index) {
              setState(() {
                _selectedIndex = index;
              });
            },
            destinations: const [
              NavigationRailDestination(
                icon: Icon(Icons.favorite_border),
                selectedIcon: Icon(Icons.favorite),
                label: Text('First'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.bookmark_border),
                selectedIcon: Icon(Icons.book),
                label: Text('Second'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.star_border),
                selectedIcon: Icon(Icons.star),
                label: Text('Third'),
              ),
            ],
          ),
          Center(
            child: ElevatedButton(
              onPressed: () {},
              child: const Text('Tap a button to navigate'),
            ),
          ),
        ],
      ),
    );
  }
}

This code creates a simple app with anNavigationRail, and three buttons to navigate between the tabs.

If you need standard routes Navigation, you could check out my previous article: https://programtom.com/dev/2024/10/29/flutter-route-navigation-options/