Flutter Injectable not injecting properly for web, despite working for the other platforms

50 Views Asked by At

The code compiles and works fine for MacOS, iOS (at least) but not for Chrome.

I'm using GoRouter to navigate between pages, and using Injectable to DI these pages and their dependencies.

  • Main looks like this (besides setting up injectable stuff)
class MyApp extends StatelessWidget 
{
    const MyApp({super.key});

    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) 
    {
        var navigationService = getIt<NavigationService>();
        return MaterialApp.router
        (
            routerConfig: navigationService.goRouter,
            debugShowCheckedModeBanner: false,
            theme: ThemeData(primarySwatch: Colors.deepOrange, colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange)),
        );
    }
}

That GoRouter is set up as follows somewhere in that NavigationService class:

_goRouter = GoRouter
(
    initialLocation: '/wordPairGenerator',
    navigatorKey: _homeNavigatorKey,
    routes:
    [
        StatefulShellRoute.indexedStack
        (
            builder: (context, state, navigationShell)
            {
                navigationContext.homePageNavigationShell = navigationShell;
                return GetIt.instance<HomePage>();
            },
            branches:
...
  • That HomePage looks like:
@Injectable()
class HomePage extends UISection<HomePageView> 
{
    const HomePage(HomePageView view) : super(view);
}

and UISection is :

abstract class UISection<TView extends ViewBase> extends StatelessWidget
{
    @protected
    final TView view;
    
    const UISection(this.view);

    @override
    Widget build(BuildContext context) => view(context);
}
  • The HomePageView:
@Injectable()
class HomePageView extends ViewBase
{
    final HomePageViewModel _viewModel;
    HomePageView(this._viewModel);

    @override
    Widget call(BuildContext context)
    {
       ...
}

HomePageViewModel is also injected. To explain, HomePageView declares UIElement stuff, which will be used by the HomePage in its build method. (just separating stuff, I have my reasons).

Now, all of this works well in MacOS and in iOS (at least), but fails on web. I get this error when debugging the app on chrome :

The following JSNoSuchMethodError was thrown building HomePage$(dirty): NoSuchMethodError: tried to call a non-function, such as null: 'this.view'

The relevant error-causing widget was: HomePage$

HomePage:file:///Users/home/Documents/Repos/Flutter%20Learning/favorits_app_2/lib/main.config.dart:67:42

It seems that it is failing resolving view in UISection constructor, means it is not injecting that HomePageView, am I wrong ?

so I have two questions :

  1. Why it works normally on other platforms, as you can see:enter image description here and not on chrome as you can see:enter image description here
  2. What's causing this and how to fix it?
0

There are 0 best solutions below