Flutter the bottom navigation bar with routes Example Code

In today’s fast-paced world, mobile app development requires a seamless user experience to stay ahead of the competition. One crucial aspect of creating a user-friendly app is the navigation system. Flutter, a popular cross-platform framework, offers a versatile solution with its Bottom Navigation Bar and Routes.

In this comprehensive guide, we will explore how to implement and utilize Flutter’s Bottom Navigation Bar with routes, along with practical examples to help you understand its potential.

Know About Flutter’s Bottom Navigation Bar

The Bottom Navigation Bar in Flutter is a user interface component placed at the bottom of the screen, allowing users to navigate between different sections or pages of the app with just a tap. It typically consists of multiple navigation items, each represented by an icon and an optional label.

Example Code: Implementing the Bottom Navigation Bar with Routes:

Below is an example code snippet demonstrating the implementation of a Bottom Navigation Bar with routes in Flutter:

// Import required packages and files

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedIndex = 0;

  static List<Widget> _widgetOptions = <Widget>[
    HomeScreen(),
    ExploreScreen(),
    ProfileScreen(),
  ];

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Bottom Navigation Bar',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: {
        '/home': (context) => HomeScreen(),
        '/explore': (context) => ExploreScreen(),
        '/profile': (context) => ProfileScreen(),
      },
      home: Scaffold(
        appBar: AppBar(
          title: Text('Bottom Navigation Bar Example'),
        ),
        body: _widgetOptions.elementAt(_selectedIndex),
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.explore),
              label: 'Explore',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'Profile',
            ),
          ],
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
        ),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text('Home Screen'),
      ),
    );
  }
}

class ExploreScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text('Explore Screen'),
      ),
    );
  }
}

class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text('Profile Screen'),
      ),
    );
  }
}

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

Conclusion:

By incorporating Flutter’s Bottom Navigation Bar with routes into your app, you can provide a seamless navigation experience to your users. The ability to switch between screens effortlessly enhances usability and ensures a modern, intuitive app design. With the comprehensive guide and practical example provided, you now have the knowledge to implement this powerful feature in your Flutter projects. Embrace the potential of Flutter’s Bottom Navigation Bar and routes to take your mobile app development to the next level.