Flutter image assets not loading after redirect with go_router & login

Issue

I have a small Flutter app with 2 screens (/login & /home) and I use go_router to navigate and animated_login. The assets are placed on the home screen and they load fine if I directly access the screen, so pubspec.yaml is correctly defined.

The images fail to load only when I redirect to /home after /login. One interesting observation is that when this happens, the Flutter dev server seems to be hanging (stops responding, but doesn’t crash, can’t restart it with R, the browser tab complains that it lost connection to the server etc.). This problem occurs also with a combination of auto_route and flutter_login.

Thanks for any hints.

Router setup (tried also w/ the redirect parameter at router level rather than individual routes):

GoRouter routerGenerator(UserData userData) {
  return GoRouter(
      initialLocation: Routes.home,
      refreshListenable: userData,
      debugLogDiagnostics: true,
      routes: [
        GoRoute(
            path: Routes.home,
            builder: (_, __) => BasicScreen(),
            redirect: (state) => userData.loggedIn ? null : Routes.login
            ),
        GoRoute(
            path: Routes.login,
            builder: (_, __) => AnimLoginScreen(),
            redirect: (state) => !userData.loggedIn ? null : Routes.home
            ),
        GoRoute(path: '/', builder: (_, __) => BasicScreen())
      ]);
}

abstract class Routes {
  static const home = '/home';
  static const login = '/login';
}

Main app:

void main() {
    runApp(
      MultiProvider(providers: [
        //other providers here
        ChangeNotifierProvider(create: (_) => UserData()),
      ], child: MyApp()),
    );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final router =
        routerGenerator(Provider.of<UserData>(context, listen: false));
    return MaterialApp.router(
      title: 'Playground',
      routeInformationParser: router.routeInformationParser,
      routeInformationProvider: router.routeInformationProvider,
      routerDelegate: router.routerDelegate,
    );
  }
}

Basic screen:

class BasicScreen extends StatelessWidget {
  BasicScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Image(image: AssetImage("assets/images/image1.png")),
          Image(image: AssetImage("assets/images/image2.png")),
          Image(image: AssetImage("assets/images/image3.png")),
        ],
      ),
    );
  }
}

Solution

Solution

Provide a simple proxy over both Flutter DevTool & backend services with SSL capabilities.

Explanation

The issue has nothing to do with routing, but rather the dev setup. Our backend services require SSL connections, but Flutter dev tool doesn’t support that. Flow:

1. Flutter DevTool starts the project (plain HTTP) and opens Chrome window.
2. Assets load ok.
3. User logs in, backend service requires HTTPS for secure cookies.
4. Browser upgrades all localhost connections to HTTPS.
5. Flutter DevTools fails to provide SSL connection.
6. Assets fail to load.

The hanging DevTool is caused by the same issue: seems to me that the DevTool is pending the WebSocket connection to be opened by the JS code running in the browser, but as the browser initiates an HTTPS connection to the DevTool, it even fails to load the JS code. Therefore, the DevTool never completes the init process (as it has no incoming connection).

Answered By – vrwolf

Answer Checked By – Mildred Charles (FlutterFixes Admin)