How to Handle Multiple Pages in Flutter? | Handling Multiple Pages in Flutter: Best Approaches

There are different approaches to handle multiple pages in Flutter, and the best one depends on the specific requirements of your application. Here are a few options you can consider:

Navigator Widget:

The Navigator widget is a built-in widget in Flutter that allows you to manage a stack of pages. You can use the Navigator to push a new page onto the stack, pop the current page off the stack, or replace the current page with a new one. You can also use named routes to navigate between pages.

Navigator Widget Example:
To use the Navigator widget, you need to wrap your application’s root widget with a MaterialApp widget and create a list of routes. Each route corresponds to a different page in your application. Here’s an example:

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/second': (context) => SecondPage(),
        '/third': (context) => ThirdPage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Welcome to my app!',
              style: TextStyle(fontSize: 24.0),
            ),
            RaisedButton(
              child: Text('Go to Second Page'),
              onPressed: () {
                Navigator.pushNamed(context, '/second');
              },
            ),
          ],
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'This is the second page.',
              style: TextStyle(fontSize: 24.0),
            ),
            RaisedButton(
              child: Text('Go to Third Page'),
              onPressed: () {
                Navigator.pushNamed(context, '/third');
              },
            ),
            RaisedButton(
              child: Text('Go back'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

class ThirdPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Third Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'This is the third page.',
              style: TextStyle(fontSize: 24.0),
            ),
            RaisedButton(
              child: Text('Go back'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

In this example, we create three pages: HomePage, SecondPage, and ThirdPage. We define them as routes in the MaterialApp widget, and we use the Navigator.pushNamed() method to navigate between them. We also use the Navigator.pop() method to go back to the previous page.

TabBar Widget:

The TabBar widget allows you to display multiple pages as tabs. Each tab represents a different page, and the user can switch between pages by tapping on the corresponding tab.

TabBar Widget Example

To use the TabBar widget, you need to create a TabBar widget and a TabBarView widget. The TabBar widget contains the tabs, and the TabBarView widget contains the pages that correspond to each tab. Here’s an example:

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  TabController _tabController;

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

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(icon: Icon(Icons.home)),
            Tab(icon: Icon(Icons.email)),
            Tab(icon: Icon(Icons.settings)),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          HomePage(),
          EmailPage(),
          SettingsPage(),
        ],
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Home Page',
        style: TextStyle(fontSize: 24.0),
      ),
    );
  }
}

class EmailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Email Page',
        style: TextStyle(fontSize: 24.0),
      ),
    );
  }
}

class SettingsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Settings Page',
        style: TextStyle(fontSize: 24.0),
      ),
    );
  }
}

In this example, we create a TabBar widget with three tabs: Home, Notifications, and Profile. We also create a TabBarView widget that contains the pages that correspond to each tab. When the user taps a tab, the TabBarView widget displays the corresponding page. We use the TabController to manage the state of the tabs and synchronize the TabBar and TabBarView widgets.

Drawer Widget:

The Drawer widget allows you to display a menu of options that the user can select to navigate to different pages. You can customize the appearance of the Drawer and the options it contains.

To use the Drawer widget, you need to create a Scaffold widget and set its drawer property to a Drawer widget. Here’s an example:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            DrawerHeader(
              child: Text('My App'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: Text('Home'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Notifications'),
              onTap: () {
                Navigator.pop(context);
                Navigator.push(context, MaterialPageRoute(builder: (context) => NotificationsPage()));
              },
            ),
            ListTile(
              title: Text('Profile'),
              onTap: () {
                Navigator.pop(context);
                Navigator.push(context, MaterialPageRoute(builder: (context) => ProfilePage()));
              },
            ),
          ],
        ),
      ),
      body: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('This is the home page.'),
    );
  }
}

class NotificationsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('These are your notifications.'),
    );
  }
}

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('This is your profile.'),
    );
  }
}

In this example, we create a Drawer widget that contains a ListView with three items: Home, Notifications, and Profile. When the user taps an item, we use the Navigator widget to push the corresponding page onto the stack and display it.

PageView Widget:

The PageView widget allows you to display a series of pages that the user can swipe between. You can use the PageView widget to create a carousel of pages or a gallery of images.

To use the PageView widget, you need to create a PageController and pass it to the PageView widget. Here’s an example:

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

class _MyHomePageState extends State<MyHomePage> {
  PageController _pageController = PageController(initialPage: 0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: PageView(
        controller: _pageController,
        children: [
          HomePage(),
          NotificationsPage(),
          ProfilePage(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _pageController.page.round(),
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.notifications), label: 'Notifications'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
        ],
        onTap: (index) {
          _pageController.animateToPage(
            index,
            duration: Duration(milliseconds: 500),
            curve: Curves.easeInOut,
          );
        },
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('This is the home page.'),
    );
  }
}

class NotificationsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('These are your notifications.'),
    );
  }
}

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('This is your profile.'),
    );
  }
}

In this example, we create a PageView widget that contains three pages: HomePage, NotificationsPage, and ProfilePage. We also create a BottomNavigationBar widget that allows the user to switch between pages. When the user taps a navigation item, we use the PageController widget to animate to the corresponding page.

Depending on the complexity of your application, you may also want to consider using state management tools like Provider or Bloc to manage the state of your pages and ensure that they are updated correctly.