Missing provided object causes error during the Navigator.pages transition

[slovnicki]

Intro

This was noticed while using the Router API (specifically, with beamer package, but this has shown irrelevant): slovnicki/beamer#328. The original issue is using flutter_bloc package, but it relies on provider concerning the issue in question, so this is also irrelevant. Then it seemed like a transition issue in flutter, but I found it doesn't show the error with regular InheritedWidgets as shown in the snippet bellow.

Describe the bug

Say we have 2 Navigator widgets; one with 1 page (BooksList) and the other with 2 pages (BooksList, BookDetails). We would like to provide some data to first Navigator and some other data to the second Navigator so we wrap them in providers. When we are in a situation with [BooksList, BookDetails] as our pages (i.e. having built the second Navigator) and do a pop (i.e. effectively build the first Navigator), there is some transition happening where the first page is still "getting off the screen", but provider is no longer there so we get an error in the console and also a brief red error screen built:

Another exception was thrown: Error: Could not find the correct Provider<DetailsData> above this BookDetailsScreen Widget

About the Router API

With the Router API, we are rebuilding the Navigator widget with new List of pages every time we want to navigate. There might be some default or custom transitions in between; how pages are getting on and off the screen. So this is all about (re)building the page stack and we might want different page stacks be provided with different data.

It's still a Flutter issue also

Although the snippet with InheritedWidgets is not showing the error, it is showing a white background for a moment, meaning it also has no access to the data (because the data in question is Color for the Scaffold's background). There is no error because dependOnInheritedWidgetOfExactType returns a nullable type so we pass effectively backgroundColor: null when doing backgroundColor: DetailsData.of(context)?.color.

Honestly, there's nothing much to be done here and it seems like such a deep problem. I would like to hear your thought on this. Of course these snippets are not a real-life use case for this problem and of course we can just put providers above everything, but should we limit ourselves to never scoping our data to specific page stacks (think all possible "shop page stacks" and all possible "account page stacks" built under a single RouterDelegate and say we deep-link from account to favorite product on shop)?

To Reproduce

1. Run the app snippet below
2. Click on a book from the list (this opens a book details page)
3. Click AppBar's back button to pop (this causes the error)

(Note: The green and yellow background colors are the data being provided)

Expected behavior

No errors are shown with both app snippets. (or the error should be shown, but red screen not)

Actual behavior

Error is printed and red error screen briefly built when using Providers snippet.

---

Lengthy code snippets
Snippets are not below 100 lines, but this is pretty much as low as it can go with Router API without using any navigation packages. These snippets are copied from John's gist that was used for his "Learning Flutter’s new navigation and routing system" article, I only migrated them to null safety and made a few lint tweaks.

Providers

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(const BooksApp());
}

// the data we are going to provide to Navigators built in BookRouterDelegate.build
class ListData {
  final Color color = Colors.green;
}

class DetailsData {
  final Color color = Colors.yellow;
}

class Book {
  final String title;
  final String author;

  Book(this.title, this.author);
}

class BooksApp extends StatefulWidget {
  const BooksApp({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _BooksAppState();
}

class _BooksAppState extends State<BooksApp> {
  final BookRouterDelegate _routerDelegate = BookRouterDelegate();
  final BookRouteInformationParser _routeInformationParser =
      BookRouteInformationParser();

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Books App',
      routerDelegate: _routerDelegate,
      routeInformationParser: _routeInformationParser,
    );
  }
}

class BookRouteInformationParser extends RouteInformationParser<BookRoutePath> {
  @override
  Future<BookRoutePath> parseRouteInformation(
      RouteInformation routeInformation) async {
    final uri = Uri.parse(routeInformation.location ?? '/');

    if (uri.pathSegments.length >= 2) {
      var remaining = uri.pathSegments[1];
      return BookRoutePath.details(int.tryParse(remaining) ?? 0);
    } else {
      return BookRoutePath.home();
    }
  }

  @override
  RouteInformation? restoreRouteInformation(BookRoutePath configuration) {
    if (configuration.isHomePage) {
      return const RouteInformation(location: '/');
    }
    if (configuration.isDetailsPage) {
      return RouteInformation(location: '/book/${configuration.id}');
    }
    return null;
  }
}

class BookRouterDelegate extends RouterDelegate<BookRoutePath>
    with ChangeNotifier, PopNavigatorRouterDelegateMixin<BookRoutePath> {
  @override
  final GlobalKey<NavigatorState> navigatorKey;

  Book? _selectedBook;

  List<Book> books = [
    Book('Stranger in a Strange Land', 'Robert A. Heinlein'),
    Book('Foundation', 'Isaac Asimov'),
    Book('Fahrenheit 451', 'Ray Bradbury'),
  ];

  BookRouterDelegate() : navigatorKey = GlobalKey<NavigatorState>();

  @override
  BookRoutePath get currentConfiguration => _selectedBook == null
      ? BookRoutePath.home()
      : BookRoutePath.details(books.indexOf(_selectedBook!));

  @override
  Widget build(BuildContext context) {
    if (_selectedBook != null) {
      return Provider(
        create: (_) => ListData(),
        child: Provider(
          create: (_) => DetailsData(),
          child: Navigator(
            key: navigatorKey,
            pages: [
              MaterialPage(
                key: const ValueKey('BooksListPage'),
                child: BooksListScreen(
                  books: books,
                  onTapped: _handleBookTapped,
                ),
              ),
              if (_selectedBook != null) BookDetailsPage(book: _selectedBook!)
            ],
            onPopPage: (route, result) {
              if (!route.didPop(result)) {
                return false;
              }
              _selectedBook = null;
              notifyListeners();

              return true;
            },
          ),
        ),
      );
    }
    return Provider(
        create: (_) => ListData(),
        child: Navigator(
          key: navigatorKey,
          pages: [
            MaterialPage(
              key: const ValueKey('BooksListPage'),
              child: BooksListScreen(
                books: books,
                onTapped: _handleBookTapped,
              ),
            ),
          ],
          onPopPage: (route, result) {
            if (!route.didPop(result)) {
              return false;
            }
            return true;
          },
        ));
  }

  @override
  Future<void> setNewRoutePath(BookRoutePath path) async {
    if (path.isDetailsPage) {
      _selectedBook = books[path.id ?? 0];
    }
  }

  void _handleBookTapped(Book book) {
    _selectedBook = book;
    notifyListeners();
  }
}

class BookDetailsPage extends Page {
  final Book book;

  BookDetailsPage({
    required this.book,
  }) : super(key: ValueKey(book));

  @override
  Route createRoute(BuildContext context) {
    return MaterialPageRoute(
      settings: this,
      builder: (BuildContext context) {
        return BookDetailsScreen(book: book);
      },
    );
  }
}

class BookRoutePath {
  final int? id;

  BookRoutePath.home() : id = null;

  BookRoutePath.details(this.id);

  bool get isHomePage => id == null;

  bool get isDetailsPage => id != null;
}

class BooksListScreen extends StatelessWidget {
  final List<Book> books;
  final ValueChanged<Book> onTapped;

  const BooksListScreen({
    Key? key,
    required this.books,
    required this.onTapped,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: context.read<ListData>().color,
      appBar: AppBar(),
      body: ListView(
        children: [
          for (var book in books)
            ListTile(
              title: Text(book.title),
              subtitle: Text(book.author),
              onTap: () => onTapped(book),
            )
        ],
      ),
    );
  }
}

class BookDetailsScreen extends StatelessWidget {
  final Book? book;

  const BookDetailsScreen({
    Key? key,
    required this.book,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: context.read<DetailsData>().color,
      appBar: AppBar(),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            if (book != null) ...[
              Text(book!.title, style: Theme.of(context).textTheme.headline6),
              Text(book!.author, style: Theme.of(context).textTheme.subtitle1),
            ],
          ],
        ),
      ),
    );
  }
}

Inherited Widgets

import 'package:flutter/material.dart';

void main() {
  runApp(const BooksApp());
}

class ListData extends InheritedWidget {
  ListData({Key? key, required Widget child}) : super(key: key, child: child);

  final Color color = Colors.green;

  static ListData? of(BuildContext context) =>
      context.dependOnInheritedWidgetOfExactType<ListData>();

  @override
  bool updateShouldNotify(covariant InheritedWidget oldWidget) => false;
}

class DetailsData extends InheritedWidget {
  DetailsData({Key? key, required Widget child})
      : super(key: key, child: child);

  final Color color = Colors.yellow;

  static DetailsData? of(BuildContext context) =>
      context.dependOnInheritedWidgetOfExactType<DetailsData>();

  @override
  bool updateShouldNotify(covariant InheritedWidget oldWidget) => false;
}

class Book {
  final String title;
  final String author;

  Book(this.title, this.author);
}

class BooksApp extends StatefulWidget {
  const BooksApp({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _BooksAppState();
}

class _BooksAppState extends State<BooksApp> {
  final BookRouterDelegate _routerDelegate = BookRouterDelegate();
  final BookRouteInformationParser _routeInformationParser =
      BookRouteInformationParser();

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Books App',
      routerDelegate: _routerDelegate,
      routeInformationParser: _routeInformationParser,
    );
  }
}

class BookRouteInformationParser extends RouteInformationParser<BookRoutePath> {
  @override
  Future<BookRoutePath> parseRouteInformation(
      RouteInformation routeInformation) async {
    final uri = Uri.parse(routeInformation.location ?? '/');

    if (uri.pathSegments.length >= 2) {
      var remaining = uri.pathSegments[1];
      return BookRoutePath.details(int.tryParse(remaining) ?? 0);
    } else {
      return BookRoutePath.home();
    }
  }

  @override
  RouteInformation? restoreRouteInformation(BookRoutePath configuration) {
    if (configuration.isHomePage) {
      return const RouteInformation(location: '/');
    }
    if (configuration.isDetailsPage) {
      return RouteInformation(location: '/book/${configuration.id}');
    }
    return null;
  }
}

class BookRouterDelegate extends RouterDelegate<BookRoutePath>
    with ChangeNotifier, PopNavigatorRouterDelegateMixin<BookRoutePath> {
  @override
  final GlobalKey<NavigatorState> navigatorKey;

  Book? _selectedBook;

  List<Book> books = [
    Book('Stranger in a Strange Land', 'Robert A. Heinlein'),
    Book('Foundation', 'Isaac Asimov'),
    Book('Fahrenheit 451', 'Ray Bradbury'),
  ];

  BookRouterDelegate() : navigatorKey = GlobalKey<NavigatorState>();

  @override
  BookRoutePath get currentConfiguration => _selectedBook == null
      ? BookRoutePath.home()
      : BookRoutePath.details(books.indexOf(_selectedBook!));

  @override
  Widget build(BuildContext context) {
    if (_selectedBook != null) {
      return ListData(
        child: DetailsData(
          child: Navigator(
            key: navigatorKey,
            pages: [
              MaterialPage(
                key: const ValueKey('BooksListPage'),
                child: BooksListScreen(
                  books: books,
                  onTapped: _handleBookTapped,
                ),
              ),
              if (_selectedBook != null) BookDetailsPage(book: _selectedBook!)
            ],
            onPopPage: (route, result) {
              if (!route.didPop(result)) {
                return false;
              }
              _selectedBook = null;
              notifyListeners();

              return true;
            },
          ),
        ),
      );
    }
    return ListData(
        child: Navigator(
      key: navigatorKey,
      pages: [
        MaterialPage(
          key: const ValueKey('BooksListPage'),
          child: BooksListScreen(
            books: books,
            onTapped: _handleBookTapped,
          ),
        ),
      ],
      onPopPage: (route, result) {
        if (!route.didPop(result)) {
          return false;
        }
        return true;
      },
    ));
  }

  @override
  Future<void> setNewRoutePath(BookRoutePath path) async {
    if (path.isDetailsPage) {
      _selectedBook = books[path.id ?? 0];
    }
  }

  void _handleBookTapped(Book book) {
    _selectedBook = book;
    notifyListeners();
  }
}

class BookDetailsPage extends Page {
  final Book book;

  BookDetailsPage({
    required this.book,
  }) : super(key: ValueKey(book));

  @override
  Route createRoute(BuildContext context) {
    return MaterialPageRoute(
      settings: this,
      builder: (BuildContext context) {
        return BookDetailsScreen(book: book);
      },
    );
  }
}

class BookRoutePath {
  final int? id;

  BookRoutePath.home() : id = null;

  BookRoutePath.details(this.id);

  bool get isHomePage => id == null;

  bool get isDetailsPage => id != null;
}

class BooksListScreen extends StatelessWidget {
  final List<Book> books;
  final ValueChanged<Book> onTapped;

  const BooksListScreen({
    Key? key,
    required this.books,
    required this.onTapped,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ListData.of(context)?.color,
      appBar: AppBar(),
      body: ListView(
        children: [
          for (var book in books)
            ListTile(
              title: Text(book.title),
              subtitle: Text(book.author),
              onTap: () => onTapped(book),
            )
        ],
      ),
    );
  }
}

class BookDetailsScreen extends StatelessWidget {
  final Book? book;

  const BookDetailsScreen({
    Key? key,
    required this.book,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: DetailsData.of(context)?.color,
      appBar: AppBar(),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            if (book != null) ...[
              Text(book!.title, style: Theme.of(context).textTheme.headline6),
              Text(book!.author, style: Theme.of(context).textTheme.subtitle1),
            ],
          ],
        ),
      ),
    );
  }
}

[rrousselGit]

The issue seem to be that you are changing the shape of the widget tree during the transition, which is typically not recommended.

Rather than doing

if (something)
  return SelectedBookProvider(child:  Navigator(...));

return Navigator(...);

consider:

return Navigator(
  pages: [
    if (something)
        SelectedBookProvider(child: ...),
  ]
)

This way, the shape of the widget tree does not change, and during the transition, the InheritedWidget will still exist.

[slovnicki]

@rrousselGit Thas for the answer.
It certainly provides some insight, but Navigator.pages must be a List<Page> so we cannot put the Provider there.

[rrousselGit]

Right. That's a simplified snippet

Realistically you'll end-up with:

pages: [
  Page(
    child: Provider(child: Screen()),
  )
]

[slovnicki]

Right.
So it seems it's a bad idea in general trying to provide something to the entire stack of pages (putting the provider above Navigator) and then providing something else (or nothing) when Navigator rebuilds with a new stack of pages.

I'm thinking of the following situation:
Say we have a large application with a couple of shop-related pages and a significant amount of other non-shop-related pages in the app. Say we have a Cart that we want to persist throughout all navigation within shop. We then have 2 options:

• provide Cart above the entire app
• provide Cart to every possible shop-related page that might get into Navigator.pages during shop navigation.

The third option I was trying is to "bundle the Cart with Navigator" which seems ideal, but has this big drawback during transitions to a "new Navigator"; a different sub-tree without Cart above Navigator.

---

Do you think it's completely unnecessary to try scoping the Cart like that? I know you were also exploring the Router API; do you think problems like this are of importance?