Flutter - Navigating between pages - flutter

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?

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,
),
);
}
}

Answer 2

Have an external TextEditingController.
class MyApp extends StatelessWidget {
final searchController = TextEditingController();
#override
Widget build(BuildContext context) {
return MaterialApp(
...
routes: {
'/search': (_) => SearchPage(searchController),
...
},
);
}
}
In SearchPage, use the passed searchController for the search field.
TextField(
...
controller: searchController,
)
If you literally don't want to create a new page.
SearchPage searchPage;
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
...
routes: {
'/search': (_) => searchPage ??= SearchPage(),
...
},
);
}
}

Answer 3

in flutter pushReplacementNamed will replace and dispose the current UI so what you need is just push.
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),
);
So, I Recommend you read some of the following and I recommend using Get Plugin.
https://pub.dev/packages/get
https://medium.com/flutter/learning-flutters-new-navigation-and-routing-system-7c9068155ade
https://flutter.dev/docs/cookbook/navigation/navigation-basics