Flutter - Navigating between pages

Question

I'm making a simple app to learn a bit about Flutter but I'm having a problem navigating between my pages.

The app has only three pages (home, search, settings) and I made a simple navigation bar. Right now I'm using:

Navigator.of(context).pushReplacementNamed("/home");

The problem is that I would like to navigate between pages, without creating "new" pages. So for example, if I have a text field on the Search page and then I go to the Home page and back to the Search page, the input in the text field remains.

What is the best way of navigating between pages without pushing or popping "new" pages?

question from:https://stackoverflow.com/questions/66048673/flutter-navigating-between-pages

Answer 1

You can check out this example with bottom navigation bar for changing between widgets to show different views. You can follow this example to be able to create what you need.

import 'package:flutter/material.dart';

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

/// This is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0',
      style: optionStyle,
    ),
    Text(
      'Index 1',
      style: optionStyle,
    ),
    Text(
      'Index 2',
      style: optionStyle,
    ),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Tab 0',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Tab 1',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'Tab 2',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}