Flutter AutoRoute UI glitch with nested tab routes

Question

This is my AutoRoute setup:

@MaterialAutoRouter(
  replaceInRouteName: "Page,Route",
  routes: [
    AutoRoute(path: "/login", initial: true, page: Login),
    AutoRoute(path: "/signup", page: Signup),
    AutoRoute(path: "/password-recovery", page: PasswordRecovery),
    CustomRoute(
      path: "/home",
      guards: [AuthGuard],
      page: NavigationWrapper,
      transitionsBuilder: TransitionsBuilders.noTransition,
      children: [
        AutoRoute(path: "", name: "HomepageRouter", page: Homepage),
        AutoRoute(
          path: "evaluate",
          name: "EvaluateRouter",
          page: EmptyRouterPage,
          children: [
            AutoRoute(path: "", page: Evaluate),
            AutoRoute(path: "evaluationResult", page: EvaluationResult),
          ],
        ),
        AutoRoute(path: "search", name: "SearchRouter", page: Search),
        AutoRoute(path: "profile", name: "ProfileRouter", page: Profile),
        RedirectRoute(path: "*", redirectTo: ""),
      ],
    ),
  ],
)
class $AppRouter {}

And in the StatefulWidget called NavigationWrapper (look at "/home" route) I setup the AutoTabsRouter.

The problem is that when I add children to any route inside "/home" (in this case I'm adding it to "/home/evaluate") I'm experiencing this kind of UI "glitch".

It looks like two layers overlapped but with a left padding.

This glitch is present both on “/home/evaluate” and “/home/evaluationResult”.

NOTE: look at the left portion of the screen, where I highlighted with the red rectangle. I had to cover the UI with black rectangles because this is a project for a client.

Answer 1

The problem was the Padding widget. In particular, all nested routes should not be shown inside a Padding widget. They need to have the Padding widget inside.

I solved the problem removing the Padding widget inside the NavigationWrapper and putting it inside Evaluate.