-
-
Save HansMuller/0e76c54b1f2d4423efbdc2c185e761ef to your computer and use it in GitHub Desktop.
| import 'package:flutter/material.dart'; | |
| class NavigatorPage extends StatefulWidget { | |
| const NavigatorPage({ Key key, this.child }) : super(key: key); | |
| final Widget child; | |
| @override | |
| _NavigatorPageState createState() => _NavigatorPageState(); | |
| } | |
| class _NavigatorPageState extends State<NavigatorPage> { | |
| TextEditingController _textController; | |
| @override | |
| void initState() { | |
| super.initState(); | |
| _textController = TextEditingController( | |
| text: 'sample text: ${widget.child}', | |
| ); | |
| } | |
| @override | |
| Widget build(BuildContext context) { | |
| return Navigator( | |
| onGenerateRoute: (RouteSettings settings) { | |
| return new MaterialPageRoute( | |
| settings: settings, | |
| builder: (BuildContext context) { | |
| return Center( | |
| child: Column( | |
| mainAxisSize: MainAxisSize.min, | |
| children: <Widget>[ | |
| widget.child, | |
| SizedBox(height: 16.0), | |
| RaisedButton( | |
| child: Text('push a route'), | |
| onPressed: () { | |
| Navigator.of(context).push(MaterialPageRoute( | |
| builder: (BuildContext context) { | |
| return Scaffold( | |
| appBar: AppBar(title: Text('Route for ${widget.child}')), | |
| body: Container( | |
| padding: const EdgeInsets.all(16.0), | |
| alignment: Alignment.center, | |
| child: TextField(controller: _textController), | |
| ), | |
| ); | |
| }, | |
| )); | |
| }, | |
| ), | |
| ], | |
| ), | |
| ); | |
| }, | |
| ); | |
| }, | |
| ); | |
| } | |
| } | |
| class HomePage extends StatefulWidget { | |
| @override | |
| _HomePageState createState() => _HomePageState(); | |
| } | |
| class _HomePageState extends State<HomePage> { | |
| int _pageIndex = 0; | |
| @override | |
| Widget build(BuildContext context) { | |
| return Scaffold( | |
| body: SafeArea( | |
| child: IndexedStack( | |
| index: _pageIndex, | |
| children: const <Widget>[ | |
| NavigatorPage(child: Text('Home')), | |
| NavigatorPage(child: Text('Business')), | |
| NavigatorPage(child: Text('School')), | |
| ], | |
| ), | |
| ), | |
| bottomNavigationBar: BottomNavigationBar( | |
| items: const <BottomNavigationBarItem>[ | |
| BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')), | |
| BottomNavigationBarItem(icon: Icon(Icons.business), title: Text('Business')), | |
| BottomNavigationBarItem(icon: Icon(Icons.school), title: Text('School')), | |
| ], | |
| currentIndex: _pageIndex, | |
| onTap: (int index) { | |
| setState(() { _pageIndex = index; }); | |
| }, | |
| ), | |
| ); | |
| } | |
| } | |
| void main() { | |
| runApp(MaterialApp(home: HomePage())); | |
| } |
and how to make route to page without bottombar?
How. do you get it work with separate child pages (different classes)
example:
p1,p2 p2 are bottom nav
P11,p111,p22,p222 are child pages
Basically, how do you restructure the build->navigator widget to pass the child page..
aslo,
how can you use routes
runApp(
MaterialApp(
home: App(),
routes: <String, WidgetBuilder>{
'/page1': (BuildContext context) => Page3(),
'/page4': (BuildContext context) => Page4(),
}
)
);
How. do you get it work with separate child pages (different classes)
example:
p1,p2 p2 are bottom nav
P11,p111,p22,p222 are child pages
Basically, how do you restructure the build->navigator widget to pass the child page..
aslo,
how can you use routes
runApp(
MaterialApp(
home: App(),
routes: <String, WidgetBuilder>{
'/page1': (BuildContext context) => Page3(),
'/page4': (BuildContext context) => Page4(),
}
)
);
I don't really understand, how to implement it
When i'm routing to page
Navigator.pushNamed( context, '/page1', ); The bottom nav bar is still there (but i don't want it to be there in some cases),
I'm trying to implement this kind of listPage and detailPage (Both should have bottom navigation. When i click item in listPage, it should open detailPage with bottom Navigation Bar, and when i click a button in detailPage: it should open new page without bottom navigation bar).
This solution perfectly work: places Bottom Navigation Bar when i open detailPage, however, now i can't open a new route without bottomNavigation (Bottom Navigation always stay at bottom, in every route, even if i don't want it).
@DaniyarGilimov Regarding the back button functionality on Android, you can use a WillPopScope() and GlobalKey<NavigatorState>() as seen in this example: https://medium.com/coding-with-flutter/flutter-case-study-multiple-navigators-with-bottomnavigationbar-90eb6caa6dbf
How do you popstack with this implementation?
There's some additional information and a version of the example that integrates with the back button here: flutter/flutter#18740 (comment)
ok thanks for responding, I'll look into it.
Actually my question is this; I have seen the gist and what I seek to achieve is popping the stack once I click on the bottom navigation Item once I'm deep in the navigation stack. Say I move two levels deeper on the home bottom Item, once I click on the home Icon , I should return to the home screen.
Hi ! Thanks for this ! Is there a way to control one navigator from somwhere else ? For example, when clicking the home button, the inner home navigator goes to the 1st page ?
Hello,
Thanks for the code.
With this solution I can't pass arguments over the road with pushNamed, you have a solution ?
everything work great, but how to make back button to work?