I use Firebase dynamic links and also named routes. What I want is to install a global listener for the dynamic link events and forward to register page if a token is provided. In the code below I got the exception The context used to push or pop routes from the Navigator must be that of a widget that is a descendant of a Navigator widget. which means I have to put navigation code below the home: property of MaterialApp. But when doing this I had to implement the dynamic links event handler for earch route.
class MyApp extends StatelessWidget {
String title = "Framr";
#override
Widget build(BuildContext context) {
FirebaseDynamicLinks.instance.onLink(
onSuccess: (linkData) {
if (linkData != null) {
try {
Navigator.pushNamed(context, '/register', arguments: linkData);
// throws: The context used to push or pop routes from the Navigator must be that of a widget that is a descendant of a Navigator widget.
} catch(e) {
print(e);
}
}
return null;
}
);
return MaterialApp(
title: "...",
home: LoginPage(),
routes: {
'/createEvent': (context) => CreateEventPage(),
'/showEvent': (context) => ShowEventPage(),
'/register': (context) => RegisterPage(),
},
);
}
}
I was able to get this work by following the example provided from the dynamic link README with the use of the no_context_navigation package or GlobalKey to workaround around the lack of context to call Navigator.pushNamed(...). Note: You don't have to use no_context_navigation. You can implement the no context routing yourself. Here's an example.
// Add this
import 'package:no_context_navigation/no_context_navigation.dart';
void main() {
runApp(MaterialApp(
title: 'Dynamic Links Example',
// Add this
navigatorKey: NavigationService.navigationKey,
routes: <String, WidgetBuilder>{
'/': (BuildContext context) => MyHomeWidget(), // Default home route
'/helloworld': (BuildContext context) => MyHelloWorldWidget(),
},
));
}
class MyHomeWidgetState extends State<MyHomeWidget> {
.
.
.
#override
void initState() {
super.initState();
this.initDynamicLinks();
}
void initDynamicLinks() async {
FirebaseDynamicLinks.instance.onLink(
onSuccess: (PendingDynamicLinkData dynamicLink) async {
// Add this.
final NavigationService navService = NavigationService();
final Uri deepLink = dynamicLink?.link;
if (deepLink != null) {
// This doesn't work due to lack of context
// Navigator.pushNamed(context, deepLink.path);
// Use this instead
navService.pushNamed('/helloworld', args: dynamicLink);
}
},
onError: (OnLinkErrorException e) async {
print('onLinkError');
print(e.message);
}
);
final PendingDynamicLinkData data = await FirebaseDynamicLinks.instance.getInitialLink();
final Uri deepLink = data?.link;
if (deepLink != null) {
// This doesn't work due to lack of context
// Navigator.pushNamed(context, deepLink.path);
// Use this instead
navService.pushNamed('/helloworld', args: dynamicLink);
}
}
.
.
.
}
// pubspec.yaml
no_context_navigation: ^1.0.4
Related
I'm attempting to build deeplink functionality and so far the initial start of the app and retrieving parameters from the deeplink is going fine.
However I am having issues navigating to a screen after I deeplink into the app. How should I do this?
My code looks like this:
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
Uri _latestUri;
Object _err;
StreamSubscription _sub;
#override void initState() {
super.initState();
_handleIncomingLinks();
}
#override void dispose() {
_sub?.cancel();
super.dispose();
}
void _handleIncomingLinks() {
_sub = uriLinkStream.listen((Uri uri) {
if (!mounted) return;
print('got uri: $uri'); // printed: got uri: myapp://?key1=test
setState(() {
_latestUri = uri;
_err = null;
Navigator.pushNamed(context, 'login'); // This doesn't work because the context does not include navigator
});
}, onError: (Object err) {
if (!mounted) return;
print('got err: $err');
setState(() {
_latestUri = null;
if (err is FormatException) {
_err = err;
} else {
_err = null;
}
});
});
}
#override Widget build(BuildContext context) {
return MaterialApp(
initialRoute: 'splash-screen',
onGenerateRoute: (settings) {
switch (settings.name) {
case 'splash-screen':
return
PageTransition(
child: BlocProvider(
create: (context) => SplashScreenCubit(APIRepository(
apiClient: APIClient(httpClient: http.Client()))),
child: SplashScreen(),
),
type: PageTransitionType.rightToLeft,
settings: settings);
break;
case 'create-account':
return PageTransition(
child: BlocProvider(
create: (context) => CreateAccountScreenCubit(
APIRepository(
apiClient: APIClient(httpClient: http.Client()))),
child: CreateAccountScreen(),
),
type: PageTransitionType.rightToLeft,
settings: settings);
break;
case 'login':
return PageTransition(
child: BlocProvider(
create: (context) => LoginScreenCubit(APIRepository(
apiClient: APIClient(httpClient: http.Client()))),
child: LoginScreen(),
),
type: PageTransitionType.rightToLeft,
settings: settings);
break;
default:
return null;
},
);
}
}
If what you needed is to be able to navigate without getting the context from Navigtor.of as you want to handling deeplink, you need to use navigatorKey property, you can read the details here.
then your code will be look like this. [EDITED, I add where to add the navigator key on the material app]
void main() { ... }
class MyApp extends StatefulWidget { ... }
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
Uri _latestUri;
Object _err;
GlobalKey<NavigatorState> navigatorKey = GlobalKey();
StreamSubscription _sub;
#override void initState() { ... }
#override void dispose() { ... }
void _handleIncomingLinks() {
_sub = uriLinkStream.listen((Uri uri) {
if (!mounted) return;
print('got uri: $uri'); // printed: got uri: myapp://?key1=test
setState(() {
_latestUri = uri;
_err = null;
});
// use the navigatorkey currentstate to navigate to the page you are intended to visit
navigatorKey.currentState.pushNamedAndRemoveUntil('login', (route) => false);
}, onError: (Object err) { ... });
#override Widget build(BuildContext context) {
return MaterialApp(
...
navigatorKey: navigatorKey,
...
);
}
}
Your deep link stream can be triggered before the build method, but you are not allowed to call Navigator at the time. So, you can fix it using addPostFrameCallback provided by SchedulerBinding:
addPostFrameCallback
Schedule a callback for the end of this frame.
Does not request a new frame.
This callback is run during a frame, just after the persistent frame
callbacks (which is when the main rendering pipeline has been
flushed). If a frame is in progress and post-frame callbacks haven't
been executed yet, then the registered callback is still executed
during the frame. Otherwise, the registered callback is executed
during the next frame.
The callbacks are executed in the order in which they have been added.
Post-frame callbacks cannot be unregistered. They are called exactly
once.
...
void _handleIncomingLinks() {
_sub = uriLinkStream.listen((Uri uri) {
if (!mounted) return;
print('got uri: $uri'); // printed: got uri: myapp://?key1=test
setState(() {
_latestUri = uri;
_err = null;
// Call your navigator inside addPostFrameCallback
WidgetsBinding.instance?.addPostFrameCallback((_) {
Navigator.pushNamed(context, 'login');
});
});
}, onError: (Object err) {
if (!mounted) return;
print('got err: $err');
setState(() {
_latestUri = null;
if (err is FormatException) {
_err = err;
} else {
_err = null;
}
});
});
}
...
Upon successful signup, I am trying to send users to the homepage (home) explaining how to use the app. I am doing so through this code block on my signup.dart
onPressed: () async {
try {
User user =
(await FirebaseAuth.instance.createUserWithEmailAndPassword(
email: _emailController.text,
password: _passwordController.text,
))
.user;
if (user != null) {
user.updateProfile(displayName: _nameController.text);
Navigator.of(context).pushNamed(AppRoutes.home);
}
}
Which is pointing to the home route
class AppRoutes {
AppRoutes._();
static const String authLogin = '/auth-login';
static const String authSignUp = '/auth-signup';
static const String home = '/home';
static Map<String, WidgetBuilder> define() {
return {
authLogin: (context) => Login(),
authSignUp: (context) => SignUp(),
home: (context) => Home(),
};
}
}
However, when I sign up, the data is rendering in firebase, but the user is not being sent to the home page, and throws this error in my console
Make sure your root app widget has provided a way to generate
this route.
Generators for routes are searched for in the following order:
1. For the "/" route, the "home" property, if non-null, is used.
2. Otherwise, the "routes" table is used, if it has an entry for the route.
3. Otherwise, onGenerateRoute is called. It should return a non-null value for any valid route not handled by "home" and "routes".
4. Finally if all else fails onUnknownRoute is called.
Unfortunately, onUnknownRoute was not set.
Any thoughts on how to rectify?
Have you added onGenerateRoute in your MaterialApp? Like this:
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
onGenerateRoute: Router.generateRoute,
initialRoute: yourRoute,
child: YouApp(),
);
}
}
class Router {
static Route<dynamic> generateRoute(RouteSettings settings) {
switch (settings.name) {
case AppRoutes.home:
return MaterialPageRoute(builder: (_) => Home());
case AppRoutes.authLogin:
return MaterialPageRoute(builder: (_) => Login());
case AppRoutes.authSignUp:
return MaterialPageRoute(builder: (_) => SignUp());
default:
return MaterialPageRoute(
builder: (_) => Scaffold(
body: Center(
child: Text('No route defined for ${settings.name}')),
));
}
}
}
}
}
I created a service folder and made a file in it called request. dart, here I intend to place all requests I make into a class called AuthService, with the login request below I want to be able to navigate to the home screen once response.statusCode == 200 or 201 but I am unable to do that because navigation requires a context and my class is neither a Stateful nor Stateless widget, is there any way I can navigate without the context??
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:shared_preferences/shared_preferences.dart';
import 'package:flutter/material.dart';
class AuthService {
login(email, password) async {
SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
if (email == "" && password == "") {
return;
}
try {
Map data = {'email': email, 'password': password};
var jsonResponse;
var response = await http
.post('https://imyLink.com/authenticate', body: data);
if (response.statusCode == 200 || response.statusCode == 201) {
//I want to navigate to my home screen once the request made is successful
jsonResponse = json.decode(response.body);
if (jsonResponse != null) {
await sharedPreferences.setString("userToken", jsonResponse["token"]);
var token = sharedPreferences.getString("userToken");
print('Token: $token');
print(jsonResponse);
print("Login successful");
}
} else {
print(response.statusCode);
print('Login Unsuccessful');
print(response.body);
}
} catch (e) {
print(e);
}
}
First, create a class
import 'package:flutter/material.dart';
class NavigationService{
GlobalKey<NavigatorState> navigationKey;
static NavigationService instance = NavigationService();
NavigationService(){
navigationKey = GlobalKey<NavigatorState>();
}
Future<dynamic> navigateToReplacement(String _rn){
return navigationKey.currentState.pushReplacementNamed(_rn);
}
Future<dynamic> navigateTo(String _rn){
return navigationKey.currentState.pushNamed(_rn);
}
Future<dynamic> navigateToRoute(MaterialPageRoute _rn){
return navigationKey.currentState.push(_rn);
}
goback(){
return navigationKey.currentState.pop();
}
}
In your main.dart file.
MaterialApp(
navigatorKey: NavigationService.instance.navigationKey,
initialRoute: "login",
routes: {
"login":(BuildContext context) =>Login(),
"register":(BuildContext context) =>Register(),
"home":(BuildContext context) => Home(),
},
);
Then you can call the function from anywhere in your project like...
NavigationService.instance.navigateToReplacement("home");
NavigationService.instance.navigateTo("home");
OPTION 1
If you will be calling the login method in either a Stateful or Stateless widget. You can pass context as a parameter to the login method of your AuthService class.
I added a demo using your code as an example:
class AuthService {
// pass context as a parameter
login(email, password, context) async {
SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
if (email == "" && password == "") {
return;
}
try {
Map data = {'email': email, 'password': password};
var jsonResponse;
var response = await http
.post('https://imyLink.com/authenticate', body: data);
if (response.statusCode == 200 || response.statusCode == 201) {
//I want to navigate to my home screen once the request made is successful
Navigator.of(context).push(YOUR_ROUTE); // new line
jsonResponse = json.decode(response.body);
if (jsonResponse != null) {
await sharedPreferences.setString("userToken", jsonResponse["token"]);
var token = sharedPreferences.getString("userToken");
print('Token: $token');
print(jsonResponse);
print("Login successful");
}
} else {
print(response.statusCode);
print('Login Unsuccessful');
print(response.body);
}
} catch (e) {
print(e);
}
}
OPTION 2
You can access your app's Navigator without a context by setting the navigatorKey property of your MaterialApp:
/// A key to use when building the [Navigator].
///
/// If a [navigatorKey] is specified, the [Navigator] can be directly
/// manipulated without first obtaining it from a [BuildContext] via
/// [Navigator.of]: from the [navigatorKey], use the [GlobalKey.currentState]
/// getter.
///
/// If this is changed, a new [Navigator] will be created, losing all the
/// application state in the process; in that case, the [navigatorObservers]
/// must also be changed, since the previous observers will be attached to the
/// previous navigator.
final GlobalKey<NavigatorState> navigatorKey;
Create the key:
final GlobalKey<NavigatorState> navigatorKey = new GlobalKey<NavigatorState>();
Pass it to MaterialApp:
new MaterialApp(
title: 'MyApp',
navigatorKey: key,
);
Push routes (both named and non-named routes work):
navigatorKey.currentState.pushNamed('/someRoute');
Find more details about option 2 by following the github issue below: https://github.com/brianegan/flutter_redux/issues/5#issuecomment-361215074
You can use flutter Get package.
Here is link.
you can use this plugin to skip the required context
https://pub.dev/packages/one_context
// go to second page using named route
OneContext().pushNamed('/second');
// go to second page using MaterialPageRoute
OneContext().push(MaterialPageRoute(builder: (_) => SecondPage()));
// go back from second page
OneContext().pop();
Is there a way to use S.R Keshav method to access pages and giving them an argument ?
routes: {
"sce": (BuildContext context, {args}) => MatchConversation(args as int),
"passport": (BuildContext context, {dynamic args}) => Passport(),
},
It looks that the arg is lost when Navigator goes in _pushEntry method. The navigated Page is accessed, but no initial arguments are loaded.
Simple and clean solution without any plugin/package.
Create global variable:
final GlobalKey<NavigatorState> navKey = GlobalKey<NavigatorState>();
Add this global key to the MaterialApp:
child: MaterialApp(
title: 'MyApp',
navigatorKey: navKey,
));
Now you have 2 ways to use it. Either define routes and use route names or use non-named route (this is the only way if you do not want to use global variables and pass parameters directly to a widget).
a) Option 1. Define routes and then use route names:
// Define route names
MaterialApp(
title: 'MyApp',
navigatorKey: navKey,
routes: {
"login": (BuildContext context) => LoginPage(),
"register": (BuildContext context) => RegisterPage(),
);
// Now anywhere inside your code change widget like this without context:
navKey.currentState?.pushNamed('login');
b) Option 2. Push non-named routes to the navigator:
navKey.currentState?.push(MaterialPageRoute(builder: (_) => LoginPage()));
This way allows to pass parameters directly to widget without global variable:
navKey.currentState?.push(MaterialPageRoute(builder: (_) => HomePage('yourStringValue', 32)));
I am very new to Flutter so I apologize for not understanding all the terminology.
I have an application that receives data from FCM, and it shows a SnackBar (using Get). All of this is working well. The problem is the 'onTap'. When I use Get.toNamed(), it responds with,
Could not find a generator for route RouteSettings("/home-screen", null) in the _WidgetsAppState.
This is my current Snackbar
void showDialog(BuildContext context, messageJson) {
print('showDialog');
try {
final data = messageJson['data'];
final notification =
data != null && data.keys.isNotEmpty ? data : messageJson['notification'];
var body = notification['body'];
var title = notification['title'];
Get.snackbar(
title,
body,
icon: Icon(Icons.chat),
shouldIconPulse: true,
onTap: (index) {
Get.toNamed('/home-screen');
//Navigator.of(context).pushNamed('/home-screen'); // <-- Didn't work either
},
isDismissible: true,
duration: Duration(seconds: 4),
);
} catch (e) {
print(e.toString());
}
}
With my Routes being setup like this.
class Routes {
static final Map<String, WidgetBuilder> _routes = {
"/home-screen": (context) => HomeScreen(),
"/home": (context) => MainTabs(),
"/login": (context) => LoginScreen(),
"/register": (context) => RegistrationScreen(),
...VendorRoute.getAll(),
};
static Map<String, WidgetBuilder> getAll() => _routes;
static WidgetBuilder getRouteByName(String name) {
if (_routes.containsKey(name) == false) {
return _routes[RouteList.homeScreen];
}
return _routes[name];
}
static Route<dynamic> generateRoute(RouteSettings settings) {
switch (settings.name) {
case RouteList.storeDetail:
return MaterialPageRoute(
builder: VendorRoute.getRoutesWithSettings(settings)[settings.name],
);
default:
return null;
}
}
}
I'm at a standstill on trying to figure out how to navigate to a page onTap()
I have tried all the other variations as well. Any help would be appreciated here. Thanks!
REF: Flutter Get Package, https://pub.dev/packages/get
Did you set routes and onGenerateRoute inside MaterialApp? Here is an example https://flutter.dev/docs/cookbook/navigation/named-routes
I am using OneSignal push notification service and I want to open the app directly to specific page on notification click. I am sending the page through data. I tried navigator.push but it didn't work i guess because of context issue. I am calling _initializeonesignal() after login which contains onesignal init and the following code.
OneSignal.shared.setNotificationOpenedHandler((notification) {
var notify = notification.notification.payload.additionalData;
if (notify["type"] == "message") {
//open DM(user: notify["id"])
}
if (notify["type"] == "user") {
//open Profileo(notify["id"])
}
if (notify["type"] == "post") {
//open ViewPost(notify["id"])
}
print('Opened');
});
You will need to register a global Navigator handle in your main application scaffold -- then you can use it in your notification handlers..
So -- in our app in our main App we have :
// Initialize our global NavigatorKey
globals.navigatorKey = GlobalKey<NavigatorState>();
...
return MaterialApp(
title: 'MissionMode Mobile',
theme: theme,
initialRoute: _initialRoute,
onGenerateRoute: globals.router.generator,
navigatorKey: globals.navigatorKey,
);
The key is the navigatorKey: part and saving it to somewhere you can access somewhere else ..
Then in your handler:
OneSignal.shared.setNotificationOpenedHandler(_handleNotificationOpened);
...
// What to do when the user opens/taps on a notification
void _handleNotificationOpened(OSNotificationOpenedResult result) {
print('[notification_service - _handleNotificationOpened()');
print(
"Opened notification: ${result.notification.jsonRepresentation().replaceAll("\\n", "\n")}");
// Since the only thing we can get current are new Alerts -- go to the Alert screen
globals.navigatorKey.currentState.pushNamed('/home');
}
That should do the trick -- does for us anyway :)
It's simple, by using onesignal, you can create system call from kotlin to flutter
In my case, I had to take the data in the URL from a notification that comes from onesignal in WordPress:
package packageName.com
import android.os.Bundle
import androidx.annotation.NonNull;
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel
import io.flutter.plugins.GeneratedPluginRegistrant
// import io.flutter.plugins.firebaseadmob.FirebaseAdMobPlugin;
private val CHANNEL = "poc.deeplink.flutter.dev/channel"
private var startString: String? = null
class MainActivity: FlutterActivity() {
override fun configureFlutterEngine(#NonNull flutterEngine: FlutterEngine) {
GeneratedPluginRegistrant.registerWith(flutterEngine);
MethodChannel(flutterEngine.dartExecutor, CHANNEL).setMethodCallHandler { call, result ->
if (call.method == "initialLink") {
if (startString != null) {
result.success(startString)
}
}
}
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val intent = getIntent()
startString = intent.data?.toString()
}
}
This I'm taking data from onCreate, yet only when clicking on the notification, I will take the "intent" data and then I will send it to my flutter code in the following class:
import 'dart:async';
import 'package:flutter/services.dart';
class MyNotificationHandler {
//Method channel creation
static const platform =
const MethodChannel('poc.deeplink.flutter.dev/channel');
//Method channel creation
static String url;
static String postID;
static onRedirected(String uri) {
url = uri;
postID = url.split('/').toList()[3];
}
static Future<String> startUri() async {
try {
return platform.invokeMethod('initialLink');
} on PlatformException catch (e) {
return "Failed to Invoke: '${e.message}'.";
}
}
//Adding the listener into contructor
MyNotificationHandler() {
//Checking application start by deep link
startUri().then(onRedirected);
}
}
Here I'm taking data from a WordPress URL, the last word after the 4ed '/' which is the id of the post.
now how to use it and call it, as I created it static I will use it in my code when the first page loads,
import 'package:com/config/LocalNotification.dart';
class MyLoadingPage extends StatefulWidget {
MyLoadingPage() {
MyNotificationHandler.startUri().then(MyNotificationHandler.onRedirected);
}
#override
_MyLoadingPageState createState() => _MyLoadingPageState();
}
...
This page will load the data from my WordPress API.
so after loading the data from the database, I will check if a value of the id, and navigate to the article page, the example in my home page:
....
#override
void initState() {
MyViewWidgets.generalScaffoldKey = _scaffoldKey;
myWidgetPosts = MyPostsOnTheWall(MyPost.allMyPosts, loadingHandler);
MyHomePAge.myState = this;
super.initState();
if (MyNotificationHandler.postID != null) {
Future.delayed(Duration(milliseconds: 250)).then((value) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MyArticlePage(MyPost.allMyPosts
.firstWhere((element) =>
element.id == MyNotificationHandler.postID))));
});
}
}
....
The secrete is in kotlin or Java by using that call from kotlin to fluter or from java to flutter, I think you will have to do the same with ios, I will leave an article that helped me.
https://medium.com/flutter-community/deep-links-and-flutter-applications-how-to-handle-them-properly-8c9865af9283
I resolved the same problems, as below:
In the main screen file MyApp.dart
#override
void initState() {
OneSignalWapper.handleClickNotification(context);
}
OneSignalWapper.dart :
static void handleClickNotification(BuildContext context) {
OneSignal.shared
.setNotificationOpenedHandler((OSNotificationOpenedResult result) async {
try {
var id = await result.notification.payload.additionalData["data_id"];
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => PostDetailsScreen.newInstance('$id')));
} catch (e, stacktrace) {
log(e);
}
});
}
You can use this Code:
final GlobalKey<NavigatorState> navigatorKey = new GlobalKey<NavigatorState>();
OneSignal.shared.setNotificationOpenedHandler((result) {
navigatorKey.currentState.push(
MaterialPageRoute(
builder: (context) => YourPage(),
),
);
});
MaterialApp(
home: SplashScreen(),
navigatorKey: navigatorKey,
)
I find the solution:
On your home screen, set the handler. And, before this, set on your configuration notification this way
First:
Map<String, dynamic> additional = {
"route": 'detail',
"userId": widget.userId
};
await OneSignal.shared.postNotification(OSCreateNotification(
playerIds: userToken,
content: 'your content',
heading: 'your heading',
additionalData: additional,
androidLargeIcon:'any icon'));
Second:
OneSignal.shared.setNotificationOpenedHandler(
(OSNotificationOpenedResult action) async {
Map<String, dynamic> dataNotification =
action.notification.payload.additionalData;
if (dataNotification.containsValue('detailPage')) {
await Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new DetailScreen(
userId: dataNotification['userId'],
),
).catchError((onError) {
print(onError);
});
}