Flutter: Keep BottomNavigationBar When Push to New Screen with Navigator

Flutter: Keep BottomNavigationBar When Push to New Screen with Navigator

To keep the BottomNavigationBar visible when pushing to a new screen with Navigator in Flutter, you can structure your app using a Scaffold that remains constant across different pages. Here's a simple example:

import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: HomeScreen(), ); } } class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Home Screen'), ), body: Center( child: ElevatedButton( onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) => SecondScreen(), ), ); }, child: Text('Go to Second Screen'), ), ), bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Icon(Icons.home), label: 'Home', ), BottomNavigationBarItem( icon: Icon(Icons.settings), label: 'Settings', ), ], ), ); } } class SecondScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Second Screen'), ), body: Center( child: Text('Content of Second Screen'), ), ); } }

In this example:

  • The HomeScreen is a Scaffold containing the BottomNavigationBar. When the button is pressed, it navigates to the SecondScreen.
  • The SecondScreen is another Scaffold with its own AppBar and body content.
  • The BottomNavigationBar remains constant across both screens because it is part of the HomeScreen's Scaffold.

Examples

  1. "Flutter keep BottomNavigationBar on new screen"

    • Code:
      Navigator.push( context, MaterialPageRoute( builder: (context) => YourNewScreen(), ), );
    • Description: Uses Navigator.push to navigate to a new screen without affecting the existing BottomNavigationBar.

  2. "Flutter pushReplacement to keep BottomNavigationBar"

    • Code:
      Navigator.pushReplacement( context, MaterialPageRoute( builder: (context) => YourNewScreen(), ), );
    • Description: Uses Navigator.pushReplacement to replace the current screen with a new one, maintaining the BottomNavigationBar.

  3. "Flutter persist BottomNavigationBar state on new screen"

    • Code:
      Navigator.push( context, MaterialPageRoute( builder: (context) => YourNewScreen(), ), ).then((value) { // Code to handle when the new screen is popped });
    • Description: Uses the then method to execute code when the new screen is popped, allowing you to handle state changes.

  4. "Flutter nested Navigator for BottomNavigationBar"

    • Code:
      Navigator( onGenerateRoute: (settings) { if (settings.name == '/') { return MaterialPageRoute(builder: (context) => YourHomePage()); } else if (settings.name == '/newScreen') { return MaterialPageRoute(builder: (context) => YourNewScreen()); } }, );
    • Description: Uses a nested Navigator with different routes to manage navigation, enabling you to keep the BottomNavigationBar.

  5. "Flutter BottomNavigationBar with IndexedStack"

    • Code:
      int _currentIndex = 0; IndexedStack( index: _currentIndex, children: [ YourHomePage(), YourNewScreen(), // Add more screens as needed ], );
    • Description: Uses an IndexedStack to maintain the state of multiple pages while showing only one at a time, preserving the BottomNavigationBar.

  6. "Flutter pushNamed to keep BottomNavigationBar"

    • Code:
      Navigator.pushNamed( context, '/newScreen', );
    • Description: Uses Navigator.pushNamed to navigate to a new screen defined in the named routes while keeping the BottomNavigationBar.

  7. "Flutter TabBar with BottomNavigationBar"

    • Code:
      DefaultTabController( length: 2, // Set the number of tabs child: Scaffold( appBar: AppBar( bottom: TabBar( tabs: [ Tab(icon: Icon(Icons.home)), Tab(icon: Icon(Icons.settings)), ], ), ), body: TabBarView( children: [ YourHomePage(), YourNewScreen(), ], ), ), );
    • Description: Uses a combination of DefaultTabController, AppBar with TabBar, and TabBarView to create a tab-based navigation with a BottomNavigationBar feel.

  8. "Flutter keep BottomNavigationBar with CupertinoTabScaffold"

    • Code:
      CupertinoTabScaffold( tabBar: CupertinoTabBar( items: [ // Define your tab items // ... ], ), tabBuilder: (context, index) { return CupertinoTabView( builder: (context) { switch (index) { case 0: return YourHomePage(); case 1: return YourNewScreen(); // Add more cases as needed } }, ); }, );
    • Description: Uses CupertinoTabScaffold along with CupertinoTabBar and CupertinoTabView to create a bottom navigation bar with tabs.

  9. "Flutter Navigator with BottomNavigationBarItem onTap"

    • Code:
      BottomNavigationBar( items: [ // Define your BottomNavigationBarItems // ... ], onTap: (index) { // Handle navigation based on index switch (index) { case 0: Navigator.push( context, MaterialPageRoute( builder: (context) => YourHomePage(), ), ); break; case 1: Navigator.push( context, MaterialPageRoute( builder: (context) => YourNewScreen(), ), ); break; // Add more cases as needed } }, );
    • Description: Uses the onTap property of BottomNavigationBar to handle navigation based on the selected index.

  10. "Flutter keep BottomNavigationBar with named routes"

    • Code:
      Navigator.pushNamed( context, '/newScreen', );
    • Description: Uses Navigator.pushNamed with named routes defined in the app's route table, maintaining the BottomNavigationBar.

More Tags

java.util.scanner odbc m2m android-contacts lapply screen-resolution indexing pdf constructor file-read

More Programming Questions

More General chemistry Calculators

More Entertainment Anecdotes Calculators

More Pregnancy Calculators

More Everyday Utility Calculators