How to navigate without context in flutter app?

Question

I have an app that recieves push notification using OneSignal. I have made a notification opened handler that should open specific screen on click of the notification. How can i navigate to a screen without context. or how can I open specific screen on app startup. My code:

OneSignal.shared.setNotificationOpenedHandler((notification) {
  var notify = notification.notification.payload.additionalData;
  if (notify["type"] == "message") {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => DM(user: notify['id']),
      ),
    );
  }
  if (notify["type"] == "user") {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => Profileo(notify["id"]),
      ),
    );
  }
  if (notify["type"] == "post") {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => ViewPost(notify["id"]),
      ),
    );
  }
});

I am able to achieve this when the app is opened for the first time but It only opens the homepage If i close the app and even if I re-open it. I guess that is because the context is changed.

Please Help!!

score 110 · Accepted Answer · edited Feb 02 '22 at 05:43

110

Look at this here: https://github.com/brianegan/flutter_redux/issues/5#issuecomment-361215074

You can set a global key for your navigation:

final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

Pass it to MaterialApp:

new MaterialApp(
      title: 'MyApp',
      onGenerateRoute: generateRoute,
      navigatorKey: navigatorKey,
    );

Push routes:

navigatorKey.currentState.pushNamed('/someRoute');

edited Feb 02 '22 at 05:43

BIS Tech

12,833
7
71
107

answered Nov 20 '18 at 16:21

tsdevelopment

1,134
1
6
7

10

navigatorKey is undefined – temirbek Mar 21 '19 at 11:45
Work like a charm..!! Thanks Bro. – deepak raj Oct 23 '19 at 21:02
2

@temirbek define navigatorKey in your main.dart and import it in your other file. – Mustafa Nov 25 '19 at 17:19
3

in addition, set the *navigatorKey* property of the MaterialApp to the declared global key (navigatorKey), not the *key* property of MaterialApp – tewshi Dec 01 '19 at 12:53
1

@Mustafa can you please provide sample? I have read many blogs and forums all are giving same solutions but navigator key is accessible from my dio interceptor. – Jenish Apr 12 '21 at 11:47
how can we pass multiple parameters? kindly suggestion. Thanks. – Kamlesh Jul 27 '21 at 10:40
@Kamlesh create a custom class, and pass that class as an argument – sarah Aug 04 '21 at 08:00

score 33 · Answer 2 · answered Dec 24 '19 at 19:28

33

You can use this wonderful plugin: https://pub.dev/packages/get

Description from the package: A consistent navigation library that lets you navigate between screens, open dialogs, and display snackbars from anywhere in your code without context.

Get.to(NextScreen()); // look at this simplicity :)
Get.back(); //  pop()
Get.off(NextScreen()); // clears the previous routes and opens a new screen.

answered Dec 24 '19 at 19:28

y.selimdogan

548
4
11

3

This package is awesome! Thanks! – Paul SZ Jan 29 '20 at 15:46
That package is a life saver! – Matt Larson Feb 12 '21 at 19:09
4

Downvote because importing GetX to solve a problem with navigation is overkill. – masterwok Jan 29 '22 at 22:43

score 1 · Answer 3 · answered Mar 15 '22 at 06:16

Quickest fix is above using global navigatorKey (like @tsdevelopment answered). To fix undefined navigatorKey, it must be imported from where it is instantiated (for this example in main.dart).

Your main.dart

final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

void main() {
  runApp(CupertinoApp(
    title: 'Navigate without context',
    initialRoute: '/',
    navigatorKey: navigatorKey, // important
    onGenerateRoute: ...
  ));
}

For example you are in your lib/utils/api.dart

import 'package:your_package_name/main.dart'; // important

abstract class API {
  static Future<dynamic> get() async {
     // call some api
     ...
     // then you want to navigate to specific screen like login
     navigatorKey.currentState?.pushNamed('/login'); // navigate to login, with null-aware check
  }
}

Also have a gist example if you prefer in a service approach. Check this: https://gist.github.com/josephdicdican/81e59fad70530eac251ad6c28e2dcd4b

Yusuf Amr · Answer 4 · 2021-10-01T22:36:39.767

This solution is general if you want to navigate or to show dialog without context using globalKey especially with Bloc or when your logic is separated from your UI part.

Firstly install this package:

Not: I'm using null safety version

  get_it: ^7.2.0

Then create a separate file for your service locator:

service_location.dart

    import 'package:get_it/get_it.dart';
    
    GetIt locator = GetIt.instance;
    
    class NavigationService {
      final GlobalKey<NavigatorState> navigatorKey =
          new GlobalKey<NavigatorState>();
      Future<dynamic> navigateTo(String routeName) {
        return navigatorKey.currentState!.pushNamed(routeName);
      }
    
      void setupLocator() {
        locator.registerLazySingleton(() => NavigationService());
      }

  void showMyDialog() {
    showDialog(
        context: navigatorKey.currentContext!,
        builder: (context) => Center(
              child: Material(
                color: Colors.transparent,
                child: Text('Hello'),
              ),
            ));
  }
    }

on main.dart:

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  NavigationService().setupLocator();
  runApp(MyApp());
}
// add navigatorKey for MaterialApp

 MaterialApp(
        navigatorKey: locator<NavigationService>().navigatorKey,
      ),

at your business logic file bloc.dart define this inside the bloc class or at whatever class you want to use navigation inside Then start to navigate inside any function inside.

class Cubit extends Cubit<CubitState> {
  final NavigationService _navigationService = locator<NavigationService>();
  void sampleFunction(){
       _navigationService.navigateTo('/home_screen'); // to navigate
       _navigationService.showMyDialog(); // to show dialog

    }
}

Not: I'm using generateRoute for routing.

Downvote because importing GetX to solve a problem with navigation is overkill. — masterwok, Jan 29 '22 at 22:42

score 0 · Answer 5 · answered Nov 18 '21 at 13:17

0

You can actually pass the context outside the builder(), by adding parameter value to the method.

for example, if you need to use navigator push in dart file without builder.

you can do this

methodName(String name, String address, context){
Navigator.pushNamed(context, '/login');
}

answered Nov 18 '21 at 13:17

SoftFieTea

19

2

He is asking **How to navigate without context** . Your answer is another way of navigating but it still uses context. – Suthura Sudharaka Nov 18 '21 at 14:48
Works for me. I didn't know there's a way of using context like this for navigation. Thanks a lot :) – Lojith Vinsuka Abeysinghe Dec 11 '21 at 16:30

score 0 · Answer 6 · answered Feb 04 '22 at 09:08

0

You can use this no_context_navigation plugin

as the name suggests, we can navigate without context

navService.pushNamed('/detail_screen', args: 'From Home Screen');

answered Feb 04 '22 at 09:08

a0x2

1,726
1
16
25

How to navigate without context in flutter app?

6 Answers6

Linked