Flutter web directionality unexpected null value

Question

I am using flutter web. I am using GetX package to manage my states & navigation. When the app starts everything is working fine and I am able to navigate to other pages without any problems.

The problem is when I press reload on my chrome browser the app breaks I get this error.

[GETX] Instance "GetMaterialController" has been created
[GETX] Instance "GetMaterialController" has been initialized

════════ Exception caught by widgets library ═══════════════════════════════════
The following TypeErrorImpl was thrown building Directionality(textDirection: ltr):
Unexpected null value.

The relevant error-causing widget was
Directionality
../…/root/get_material_app.dart:328

GetMaterialApp code:

GetMaterialApp(
      title: 'My Web App',
      debugShowCheckedModeBanner: false,
      textDirection: TextDirection.ltr,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: SignIn.routeName,
      getPages: [
        GetPage(
          name: Home.routeName,
          page: () => const Home(),
          middlewares: [AuthMiddleware()],
        ),
        GetPage(
          name: SignIn.routeName,
          page: () => SignIn(),
          middlewares: [AuthMiddleware()],
        ),
        GetPage(
          name: SignUp.routeName,
          page: () => SignUp(),
          middlewares: [AuthMiddleware()],
        ),
      ],
    );

I have even added textDirection: TextDirection.ltr. No errors of any type when I first run the app. The app breaks after I click reload.

Solution

I think I have a similar setup to you. I'm using GetX for route management.

• I am using a static const String routeName = '/_login_page'; field in my Login page.

Here is my GetMaterialApp method:

return GetMaterialApp(

  debugShowCheckedModeBanner: false,
  textDirection: TextDirection.ltr,
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),

  initialRoute: LoginPage.routeName,

  getPages: [
    GetPage(
      name: LoginPage.routeName,
      page: () => const LoginPage(),
    ),
  ],
);

If I change the value of the route field in my Login page while the app is running and reload the browser, it consistently throws that error for me. If I then stop my project and rerun it, my works fine. I suspect the routeName field is being cached and when it's changed during runtime, it no longer matches.

Solution: If you rename your routeName field, stop and then rerun your project.

Comments

[Rodrick Vy]

Think you might find this related issue helpful