Repository navigation
Create a builder that builds a widget that a wraps routes of Navigator. #34105
Description
It is discussion of closed PR #33706
I suggest add add builder wrapper of navigator routers for access Navigator from above routers of widgets tree.
It is allow access to Navigator from root widget and control navigation of application. for example I can create abstract Router for Viewmodel or Presenter and control app routing from logic layer without clearly communication with "View" layer.
you say why not wrap MaterialApp in to RootWidget? but in but in this case I will not have access to MediaQuuery, Navigator etc.
you say why you push to navigator RootRoute as first route and control Navigation from him? because netx routes will be have back arrow on AppBar. And I can accidentally pop her from Navigaton. It is no way.
you say why not create custom App with WidgetApp and Navigator? no way, because I want use all features of MaterialApp or CupertionApp which encapsulated in exist Widget.
below is an example;
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(),
),
navigatorRoutesWrapperBuilder: (BuildContext context, Widget child) {
return RootWidget(
child: child,
);
},
);
}
}
class RootWidget extends StatefulWidget {
final Widget child;
RootWidget({Key key, this.child}) : super(key: key);
@override
_RootWidgetState createState() => _RootWidgetState();
}
class _RootWidgetState extends State<RootWidget> {
RootAppBloc _bloc;
@override
void initState() {
_bloc = RootAppBloc();
super.initState();
_bloc.pushLoginScreen.listen((_) {
Route<dynamic> route = MaterialPageRoute<dynamic>(builder: (BuildContext context) {
return Text('login');
});
Navigator.of(context).pushAndRemoveUntil(route, (Route<dynamic> route) {
return false;
});
});
_bloc.pushMainScreen.listen((_) {
// some code
});
}
@override
Widget build(BuildContext context) {
return widget.child;
}
}
class RootAppBloc {
Stream<void> pushMainScreen;
Stream<void> pushLoginScreen;
}
Activity
jsroest commentedon Jan 4, 2020
The main reason why I like this idea is that with this solution it is possible to put a DialogManager above each route without an extra/custom navigator.
https://medium.com/flutter-community/manager-your-flutter-dialogs-with-a-dialog-manager-1e862529523a
jasonspick commentedon Feb 25, 2020
If I am understanding this correctly, this would be the same as Angular's router-outlet concept. We would be able to have a static scaffold that doesn't refresh with every navigation.
If so, would the possibility of having multiple navigators and outlets?
ivk1800 commentedon Apr 25, 2020
@jsroest your solution on article is not properly work if press back button, it is sadly
Auuufff commentedon Apr 29, 2020
It would be nice to have this feature
chunhtai commentedon May 28, 2020
you can use the https://master-api.flutter.dev/flutter/material/MaterialApp/builder.html
If you want access to the navigator, you can provide the navigator key and access it globally. are there any other use cases that cannot be solved by this?
jsroest commentedon May 29, 2020
I have a dialogService that uses the material.showDialog function provided by the Flutter framework. Unfortunately, you can not pass the NavigatorState directly to this function, but you have to pass a context, so it can do the lookup for the navigator itself. This forces me to declare a dialogService above every page manually.
The suggested builder would eliminate this repetition.
chunhtai commentedon May 29, 2020
I think not able to use navigator state directly in show dialog is a bug. If we enable that do you think that will solve your use case?
jsroest commentedon May 29, 2020
Yes, that will solve my use case.
jasonspick commentedon May 29, 2020
Think web applications
chunhtai commentedon May 29, 2020
If you meant static content above navigator the MaterialApp.builder should work. If you meant nested navigator such as angular router-outlet, we are currently working on that in Navigator 2.0 and router widget
marcglasberg commentedon May 16, 2021
To document this:
If you want to have a "dialog service", put it in your builder:
When you access
MyDialogServiceup in the tree it cannot callshowDialogwith its own context. But you can usemyNavigatorKey.currentContext:@chunhtai Quite frankly, I would prefer we could indeed create a builder that builds a widget that a wraps routes of Navigator. This would be more elegant than using keys (I feel every time we use global keys we have a bad architecture). As pointed out above, this could be used to have a static scaffold that doesn't refresh with every navigation. I believe this would also be a nice place to put custom keyboards, that could use the Navigator to close with the back button. They are an example of a necessary "scaffold" that should exist in every page. Where should I put them instead?
github-actions commentedon Aug 1, 2021
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.