Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter Navigator.pop(context) returning a black screen

Tags:

flutter

dart

My Flutter Project structure is like this

Main() //Run App with MaterialApp and Routes L HomePage() //Default route (/), with BottomNavigation   L MoviesPage() //Default BottomNavigation Index and shows a list of movies form TMDB      L DetailsPage()   L SeriesPage()   L SupportPage() 

After clicking on any movie it navigates forward to the DetailsPage() but when I call Navigator.pop from DetailsPage() it should go back to the previous screen but it doesn't.

The Navigator.canPop(context) return false But the hardware back button works absolutely fine, so how do I fix it?

main.dart

class BerryMain extends StatelessWidget {   @override   Widget build(BuildContext context) {     // TODO: implement build     return MaterialApp(       home: Inferno(         {           '/': (context, argumets) => HomePage(),           '/detailspage': (context, arguments) => DetailsPage(arguments),         },       ).home(context),     );   } } 

homepage

class HomePage extends StatefulWidget {   @override   State<StatefulWidget> createState() {     // TODO: implement createState     return _HomePageState();   } }  class _HomePageState extends State<HomePage> {   int _currentIndex = 0;   final List<Widget> _childnav = [MoviesPage(), SeriesPage(), SupportPage()];    void onTabPressed(...)    @override   Widget build(BuildContext context) {     // TODO: implement build     return Scaffold(       appBar: AppBar(         title: Text('...'),         actions: <Widget>[           IconButton(             icon: Icon(Icons.search),             onPressed: () {},           )         ],       ),       body: _childnav[_currentIndex],       bottomNavigationBar: BottomNavigationBar(         onTap: onTabPressed,         currentIndex: _currentIndex, //this property defines current active tab         items: [           BottomNavigationBarItem(               icon: Icon(Icons.movie), title: Text('Movies')),           BottomNavigationBarItem(icon: Icon(Icons.tv), title: Text('Series')),           BottomNavigationBarItem(icon: Icon(Icons.help), title: Text('Help'))         ],       ),     );   } } 

MoviesPage

//Inside ListView Builder Virgil.pushNamed(context, '/detailspage', arguments: args); 

DetailsPage

//Inside MaterialApp > Scaffold > SliverAppbar > BackButton Navigator.pop(context) 

I'm using Virgil but I don't think it is the problem.

like image 716
Nadeem Siddique Avatar asked Dec 11 '18 11:12

Nadeem Siddique


People also ask

What is Pushreplacement in Flutter?

Replace the current route of the navigator by pushing the given route and then disposing the previous route once the new route has finished animating in. If non-null, result will be used as the result of the route that is removed; the future that had been returned from pushing that old route will complete with result .

What is the use of Navigator in Flutter?

// navigate to the second route. // navigate to first route. Navigator: As the name suggests, Navigator is a widget that helps us to navigate between the routes. The navigator follows stack method when dealing with the routes.


1 Answers

This can happen if your MoviesPage has another MaterialApp widget. Most of the time you want to use Scaffold as a top widget for a new page/screen, but if you accidentally use MaterialApp instead, nothing warns you.

What happens, is that MaterialApp creates a new Navigator, so if you switch from one page with MaterialApp to another, you now have two Navigators in the widget tree.

The call Navigator.of(context) looks for the closest Navigator, so it'll use the one, newly created in your MoviesPage. As the history of your route transitions is stored in a first Navigator, this one can't pop back – it has empty route history.

Hence, the black screen.

Long story short, to fix this, just use Scaffold as a top widget instead of MaterialApp in all nested screens.

like image 64
divan Avatar answered Sep 21 '22 08:09

divan