Navigate through RouterService [Web]

[arithmic-satya]

I'm creating a static website of 3 pages. I'm using Stacked here. My approaches have been like below so far;

I have a MainLayoutView whose NavBar() and Footer() are constants and in between only the body will be returned with their respective page's navigation.
MainLayoutViewModel is there and associated with NavBar() and Footer() for listening to the active and inactive index or any kind of other business logic.
Three pages have their own ViewModels associated with them.
Calling MainLayoutview() in main.dart file's MaterialApp.router()'s builder property to become a wrapper of NavBar() and Footer() for all those pages.

-- HomeView --

class HomeViewDesktop extends StackdeView<HomeViewModel> {
  const HomeViewDesktop({super.key});

  @override
  Widget builder(
    BuildContext context,
    HomeViewModel viewModel,
    Widget? child,
  ) {
    return Text(
      "Home Page",
      style: TextStyles.mainTitleStyle(context),
    );
  }

  @override
  HomeViewModel viewModelBuilder(BuildContext context) => HomeViewModel();
}

Likewise, same the two other pages are.

-- MainLayoutView --

return Scaffold(
      body: SizedBox(
        height: ScreenUtil().screenHeight,
        child: SigleChildScrollView(
          child: Column(
            children: [
              const NavBar(),
              child,
              const Footer(),
            ],
          ),
        ),
      ),
    );

-- main.dart --

return MaterialApp.router(
        routerDelegate: stackedRouter.delegate(),
        routeInformationParser: stackedRouter.defaultRouteParser(),
        builder: (context, child) => MainLayoutView(
          child: child!,
        ),
      )

I'm getting the below error no matter tried putting SizedBox() with height, but no help. Need your urgent help on this if there is anything wrong here or need another approach or anything. I'm stuck here for 3 days.

Error :

The following assertion was thrown during performResize():
Assertion failed:
file:///Users/satya/Library/flutter/packages/flutter/lib/src/widgets/overlay.dart:1064:12
overlay.dart:1064
constraints.biggest.isFinite
is not true
The relevant error-causing widget was:
  Navigator-[LabeledGlobalKey<NavigatorState>#f5d62 Key Created by default]
Navigator:file:///Users/satya/.pub-cache/hosted/pub.dev/stacked-3.4.1/lib/src/router/widgets/route_navigator.dart:65:11
....
....
The following RenderObject was being processed when the exception was fired: _RenderTheater#3052a NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
  creator: _Theater ← Overlay-[LabeledGlobalKey<OverlayState>#ff9b5] ← UnmanagedRestorationScope ←
    _FocusInheritedScope ← Focus ← _FocusInheritedScope ← Focus ← FocusTraversalGroup ← AbsorbPointer
    ← Listener ← HeroControllerScope ← Navigator-[LabeledGlobalKey<NavigatorState>#f5d62 Key Created
    by default] ← ⋯
  parentData: <none> (can use size)
  constraints: BoxConstraints(0.0<=w<=1201.0, 0.0<=h<=Infinity)
  size: MISSING
  skipCount: 0
  textDirection: ltr

[ferrarafer]

Hi @arithmic-satya , can I see your @StackedApp annotations ? Did you set MainLayoutView as initial ?

[arithmic-satya]

Hi @ferrarafer, I apologise for the delayed response, I'm mentioning the routes below;

@StackedApp(
  routes: [
    CustomRoute(page: StartupView, initial: true),
    CustomRoute(
      page: MainLayoutView,
      children: [
        CustomRoute(page: HomeView, path: '/'),
        CustomRoute(page: AboutUsView, path: '/about-us'),
        CustomRoute(page: CommunityView, path: '/community'),
        CustomRoute(page: BlogsView, path: '/blogs'),
      ]
    )
    CustomRoute(
      page: NavMenuModal,
      path: '',
      fullscreenDialog: true,
      opaque: false,
    ),
    // @stacked-route

    CustomRoute(page: UnknownView, path: '/404'),

    /// When none of the above routes match, redirect to UnknownView
    RedirectRoute(path: '*', redirectTo: '/404'),
  ],
)

StartupView runs all the startup logic and then redirects the MainLayoutView where I have a common Header including Navigation Links and Footer for all the pages.

Only the body is rendered with different page content by clicking the nav-links.

[arithmic-satya]

If I'm not doing right, can you just tell me the right approach to achieving it?