DEV Community

Cover image for Flutter BLoC: Right way to Handle navigation

Flutter BLoC: Right way to Handle navigation

Pedro Massango on July 21, 2019

If you have been using Flutter with BLoc maybe you had the necessity to navigate to a new page inside of your BLoC as we know we don't have a Build...
Collapse
 
marnore profile image
Marius Noreikis •

I only got it working after I changed the code to the following:

child: MaterialApp(
navigatorKey: _navigatorKey,
title: 'My App',
home: HomePage(),
)

Otherwise, the navigatorKey would not contain any state.

Collapse
 
pedromassango profile image
Pedro Massango •

Thanks. Now I noticed that I made a typo

Collapse
 
afermin profile image
Alexander Fermin •

Hi Pedro, I am new working with Flutter and I am trying to implement you idea but I am getting a not stop looping. I am evaluating in the child widget with BlocBuilder the child state and sending the a event to my navigator bloc but my child widget doesn't stop reevaluating

Collapse
 
alexandreroba profile image
Alexandre Roba •

Hi, thanks for sharing.

Any idea why ShowDialog when called from the bloc fails (It does not raise an error, There is just no dialog displayed... :()
} else if (event is ShowError) {
showDialog(
context: navigatorKey.currentContext,
builder: (context) {
return RedDialog(
title: 'title',,
message:
'message',,
onNext: () {
Navigator.of(context).pop();
},
nextLabel: 'nest',,
);
});
}

Collapse
 
pedromassango profile image
Pedro Massango •

Everything looks good. Are you sure that ShowError event is being fired?

Collapse
 
alexandreroba profile image
Alexandre Roba • • Edited

Hi Pedro, I noticed something weird... if in the mapEventToState method you await for the navigator push methods, all following event push will simply be ignored...
@override
Stream mapEventToState(NavigatorAction event) async* {
if(event is NavigatorActionPop){
navigatorKey.currentState.pop();
}else if(event is NavigateToHomeEvent){
AWAIT navigatorKey.currentState.pushNamed('/home'); // This cause all following events to be ignored...
}
}

After some digging the navigatorKey.currentState.pushNamed() call never complete... You can add a then((_)=>print('completed')); this will never be called... We might have an issue somewhere here...

Any idea?

Alex

Collapse
 
pedromassango profile image
Pedro Massango •

Maybe it is not good idea to await since it will block all incoming events. I've never tried await there before. Let me investigate...

Collapse
 
aaabramenko profile image
AAAbramenko •

We found a way how to navigate without BuildContext, but we need BuildContext to call BlocProvider.of<>(context)... I think I don't understand something, can you explain?

Collapse
 
pedromassango profile image
Pedro Massango •

You always need to use the context do dispatch an action. What you can do it to use a unique instance of the NavigatorKey to navigate.

Collapse
 
furlongmt profile image
Matthew Furlong •

Hey Pedro, I'm not sure I follow still. Is there another way you could explain this, possibly with an example?

Collapse
 
obrianjmuunga profile image
ObrianJMuunga •

Hello, I am trying to use your example, but in navigation_bloc.dart, I am getting NavigationAction is not a type.

Collapse
 
pedromassango profile image
Pedro Massango •

Can you show me a piece of your code?

Collapse
 
obrianjmuunga profile image
ObrianJMuunga • • Edited

I am using flutter_bloc: 0.21.0

Collapse
 
agrapine profile image
Alexandru Agrapine • • Edited

This looks like a blocky way to navigate... indirectly

:) I think you're missing the redux dependency

Nice job on the article

Collapse
 
pedromassango profile image
Pedro Massango •

Thank you

Collapse
 
enzobonggio profile image
Enzo Bonggio •

Hi, How is it blocky ?

Collapse
 
dkobia profile image
David Kobia •

@pedromassango - absolutely brilliant.

Collapse
 
mpowloka profile image
mpowloka •

Hey!

I was just looking for a similar solution. I will just check if it works, but right now I think this is not the best way to create a separate Bloc for Navigation only. Imo, the idea behind BloC is so UI doesn't know what happens after user interaction. If you have a Bloc for navigation then UI still knows what happens. It ends up being just a code extraction way, but the logic is not covered in any way.

Collapse
 
eugenebrusov profile image
Eugene Brusov •

This way you can implement navigation and add to Stream any other side-effects (for example to show Snackbar or Dialog) stackoverflow.com/a/59347530/7158449

Collapse
 
davidag9 profile image
Agyakwalf •

My bloc builds multiple screen on navigated view ,is this the reason

Collapse
 
dul profile image
Abdul Rojak •

where is the NavigateToHomeEvent ??