Bottom Navigation bar with back feature-CodePudding

I'm a beginner,

I want to use the Bottom Navigation bar to move between pages the Bottom Navigation bar is exist on every page, and clicking the back button directs me to the home page

My main

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  int selectedPage = 2;
  final _pageOptions = [const PageOne(),const  PageTwo(),const PageThree()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pageOptions[selectedPage],
      bottomNavigationBar: BottomNavigationBar(
        items:const  [
          BottomNavigationBarItem(icon: Icon(Icons.add), label: ""),
          BottomNavigationBarItem(icon: Icon(Icons.abc), label: ""),
          BottomNavigationBarItem(icon: Icon(Icons.access_alarm), label: ""),
        ],
        onTap: (int index) {
          setState(() {
            selectedPage = index;
          });
        },
      ),
    );
  }
}

by using This code I can move between pages but when clicking The back button I get out of the program.

Thanks in advance.

by using This code I can move between pages but when clicking The back button I get out of the program.

CodePudding user response：

Wrap your Scaffold with a WillPopScope as shown below;

class _MyHomePageState extends State<MyHomePage> {
  int selectedPage = 2;
  final _pageOptions = [const PageOne(),const  PageTwo(),const PageThree()];

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
             setState(() {
              selectedPage = 0;
            });
        return false;
      },
      child: Scaffold(
        body: _pageOptions[selectedPage],
        bottomNavigationBar: BottomNavigationBar(
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.add), label: ""),
            BottomNavigationBarItem(icon: Icon(Icons.abc), label: ""),
            BottomNavigationBarItem(icon: Icon(Icons.access_alarm), label: ""),
          ],
          onTap: (int index) {
            setState(() {
              selectedPage = index;
            });
          },
        ),
      ),
    );
  }
}

CodePudding user response：

The above answer will stop the back button exiting the app. However if you’d like to have the ability to return to the homepage / previous page you’ll need to implement routing.

Use the GoRouter package & follow the documentation to get it setup. You’ll need this for navigating & maintaining the navigation stack so you can go back and forth between pages properly.