Flutter 使用 go_router 和登錄重定向后未加載圖像資產

Question

我有一個帶有 2 個屏幕（ /login和/home ）的小型 Flutter 應用程序，我使用go_router導航和animated_login 。 資產放置在主屏幕上，如果我直接訪問屏幕，它們可以正常加載，因此正確定義了pubspec.yaml 。

僅當我在/login之后重定向到/home時，圖像才加載失敗。 一個有趣的觀察結果是，當這種情況發生時，Flutter 開發服務器似乎掛起（停止響應，但沒有崩潰，無法使用 R 重新啟動它，瀏覽器選項卡抱怨它失去了與服務器的連接等）。 auto_route和flutter_login的組合也會出現此問題。

感謝您的任何提示。

路由器設置（也嘗試使用路由器級別的redirect參數而不是單個路由）：

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';
}

主應用：

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,
    );
  }
}

基本畫面：

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")),
        ],
      ),
    );
  }
}

Answer 1

解決方案

為 Flutter DevTool 和具有 SSL 功能的后端服務提供一個簡單的代理。

解釋

該問題與路由無關，而與開發設置有關。 我們的后端服務需要 SSL 連接，但 Flutter 開發工具不支持。 流動：

1. Flutter DevTool 啟動項目（純 HTTP）並打開 Chrome window。
2. 資產加載正常。
3. 用戶登錄，后端服務需要 HTTPS 以確保安全 cookies。
4. 瀏覽器將所有 localhost 連接升級到 HTTPS。
5. Flutter DevTools 無法提供 SSL 連接。
6. 資產無法加載。

掛起的 DevTool 是由相同的問題引起的：在我看來，DevTool 正在等待由瀏覽器中運行的 JS 代碼打開的 WebSocket 連接，但是當瀏覽器啟動到 DevTool 的 HTTPS 連接時，它甚至無法加載JS代碼。 因此，DevTool 永遠不會完成初始化過程（因為它沒有傳入連接）。