Flutter: Using BottomNavigationBar with Navigator - Step by Step Guide

Are you looking to implement a BottomNavigationBar with Navigator in your Flutter app? Look no further, as we've got you covered with this step-by-step guide.

├Źndice
  1. Step 1: Add Dependencies
  2. Step 2: Create Pages
  3. Step 3: Create BottomNavigationBar
  4. Step 4: Test It Out!

Step 1: Add Dependencies

To get started, you need to add the dependencies to your pubspec.yaml file:


dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.3

Step 2: Create Pages

You need to create pages for each tab in your BottomNavigationBar. For this example, let's create three pages: Home, Notifications, and Settings.

In your lib folder, create a new folder called pages. Inside this folder, create three new files: home_page.dart, notifications_page.dart, and settings_page.dart.

Inside each file, create a new StatefulWidget with a corresponding State class.


class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('Home Page'),
      ),
    );
  }
}

Repeat this process for the other two pages.

Step 3: Create BottomNavigationBar

Now it's time to create the BottomNavigationBar widget in your main file.

Inside your main file, create a new StatefulWidget with a corresponding State class. In the build method, create a Scaffold widget with a BottomNavigationBar and a Navigator widget.


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

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

  final List<Widget> _children = [
    HomePage(),
    NotificationsPage(),
    SettingsPage()
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped,
        currentIndex: _currentIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.notifications),
            title: Text('Notifications'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text('Settings'),
          ),
        ],
      ),
    );
  }
}

Here, we have created a _currentIndex variable to keep track of the current tab index, a list of _children which contains the three pages we created earlier, and an onTabTapped method to update the current index when a tab is tapped.

The BottomNavigationBar widget has three BottomNavigationBarItems, each with an icon and a title. The currentIndex is set to _currentIndex, and the onTap method is set to onTabTapped method we created.

Step 4: Test It Out!

That's it! You have successfully implemented BottomNavigationBar with Navigator in your Flutter app. Run your app and test it out.

Now you can easily navigate between your pages with the BottomNavigationBar.

Happy coding!

Click to rate this post!
[Total: 0 Average: 0]

Related posts

Leave a Reply

Your email address will not be published. Required fields are marked *

Go up

Below we inform you of the use we make of the data we collect while browsing our pages. You can change your preferences at any time by accessing the link to the Privacy Area that you will find at the bottom of our main page. More Information