remove back button of app bar when using bottom navigation - flutter

Question

I am using a bottom navigation in my app as follows.

class AppMainPage extends StatefulWidget {
  @override
  _AppMainPageState createState() => _AppMainPageState();
}

class _AppMainPageState extends State<AppMainPage> {
  int _selectedIndex = 1;

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

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

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

  static List<Widget> _widgetOptions = <Widget>[
    PaymentPage(),
    HomePage(),
    ProfilePage()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.money_dollar),
            label: 'Payment',
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: orange_red1,
        unselectedItemColor: Colors.grey,
        onTap: _onItemTapped,
      ),
      body: _widgetOptions.elementAt(_selectedIndex),
    );
  }
}

Each of my pages that I want to go from bottom navigation has an different (some app bars have different icons with different icons and titles.therefore cannot use a common app bar in AppMainPage) AppBar inside Scaffold widget as follows.

Code for homepage appbar

    class HomePage extends StatefulWidget {
    
      @override
      _HomePageState createState() => _HomePageState();
    }
    
    class _HomePageState extends State<HomePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Colors.white,
            appBar: AppBar(
              backgroundColor: orange_red1,
              title: Text('Home'),
              elevation: 0,
            ),
          body: Stack(...))
      }
   }

But each page I get a back button in app bar and when I click it I get a white screen(screen pops).How can I remove this back button and fix the issue?

I am not sure whether my code implementation is correct according to my requirement.I am happy if anyone can help on this.

Answer 1

**Updated**
Note: As I read a line about `WillPopScope` wont work in iOS.



return WillPopScope(
          onWillPop: () async {
            //todo
            return Future.value(false);
          },
          child: Scaffold(
          backgroundColor: Colors.white,
            appBar: AppBar(
              backgroundColor: orange_red1,
              title: Text('Home'),
              elevation: 0,
              leading: SizedBox(),//any one below or SizeBox()
              automaticallyImplyLeading: false,//any one below or SizeBox()
            ),
          body: Stack(...))
         );
      }