feat: update Web template with nested routes

lib/src/templates/app/web/lib/app/app.dart.stk

@@ -1,21 +1,43 @@
 import 'package:{{packageName}}/{{{bottomSheetsPath}}}/notice/notice_sheet.dart';
 import 'package:{{packageName}}/{{{dialogsPath}}}/info_alert/info_alert_dialog.dart';
+import 'package:{{packageName}}/ui/layouts/layout_view.dart';
 import 'package:{{packageName}}/{{{viewImportPath}}}/home/home_view.dart';
-import 'package:{{packageName}}/{{{viewImportPath}}}/startup/startup_view.dart';
+import 'package:{{packageName}}/{{{viewImportPath}}}/unknown/unknown_view.dart';
+import 'package:stacked/stacked.dart';
 import 'package:stacked/stacked_annotations.dart';
 import 'package:stacked_services/stacked_services.dart';
+import 'package:{{packageName}}/{{{serviceImportPath}}}/layout_service.dart';
 // @stacked-import
 
 @StackedApp(
   routes: [
-    CustomRoute(page: StartupView, initial: true),
-    CustomRoute(page: HomeView),
-    // @stacked-route
+    CustomRoute(
+      page: LayoutView,
+      initial: true,
+      children: [
+        CustomRoute(
+          page: HomeView,
+          path: '',
+          transitionsBuilder: TransitionsBuilders.fadeIn,
+        ),
+        // @stacked-route
+
+        CustomRoute(
+          page: UnknownView,
+          path: '404',
+          transitionsBuilder: TransitionsBuilders.fadeIn,
+        ),
+      ],
+    ),
+
+    /// When none of the above routes match, redirect to UnknownView
+    RedirectRoute(path: '*', redirectTo: '/404'),
   ],
   dependencies: [
     LazySingleton(classType: BottomSheetService),
     LazySingleton(classType: DialogService),
     LazySingleton(classType: RouterService),
+    LazySingleton(classType: LayoutService),
     // @stacked-service
   ],
   bottomsheets: [

lib/src/templates/app/web/lib/services/layout_service.dart.stk

@@ -0,0 +1,17 @@
+import 'package:stacked/stacked.dart';
+
+class LayoutService with ListenableServiceMixin {
+  bool _fullScreenMode = false;
+
+  bool get fullScreenMode => _fullScreenMode;
+
+  void enterFullScreen() {
+    _fullScreenMode = true;
+    notifyListeners();
+  }
+
+  void exitFullScreen() {
+    _fullScreenMode = false;
+    notifyListeners();
+  }
+}

lib/src/templates/app/web/lib/ui/common/app_colors.dart.stk

@@ -2,8 +2,10 @@ import 'package:flutter/material.dart';
 
 const Color kcPrimaryColor = Color(0xFF9600FF);
 const Color kcPrimaryColorDark = Color(0xFF300151);
+const Color kcBlack = Color(0xFF000000);
 const Color kcDarkGreyColor = Color(0xFF1A1B1E);
 const Color kcMediumGrey = Color(0xFF474A54);
 const Color kcLightGrey = Color.fromARGB(255, 187, 187, 187);
 const Color kcVeryLightGrey = Color(0xFFE3E3E3);
+const Color kcWhite = Color(0xFFFFFFFF);
 const Color kcBackgroundColor = kcDarkGreyColor;

lib/src/templates/app/web/lib/ui/common/app_styles.dart.stk

@@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+
+TextStyle get ktsHeading1 => const TextStyle(
+      fontSize: 80,
+      height: 0.95,
+      fontWeight: FontWeight.w800,
+    );
+
+TextStyle get ktsHeading2 => const TextStyle(
+      fontSize: 40,
+      height: 0.95,
+      fontWeight: FontWeight.w800,
+    );
+
+TextStyle get ktsBodyRegular => const TextStyle(
+      fontSize: 15,
+    );
+
+TextStyle get ktsBodyLarge => const TextStyle(
+      fontSize: 20,
+    );

lib/src/templates/app/web/lib/ui/layouts/layout_view.dart.stk

@@ -0,0 +1,70 @@
+import 'package:{{packageName}}/extensions/hover_extensions.dart';
+import 'package:{{packageName}}/ui/common/app_colors.dart';
+import 'package:flutter/material.dart';
+import 'package:responsive_builder/responsive_builder.dart';
+import 'package:stacked/stacked.dart';
+
+import 'layout_viewmodel.dart';
+import 'widgets/menu_button/menu_button.dart';
+
+class LayoutView extends StackedView<LayoutViewModel> {
+  const LayoutView({super.key});
+
+  @override
+  Widget builder(
+    BuildContext context,
+    LayoutViewModel viewModel,
+    Widget? child,
+  ) {
+    return Scaffold(
+      body: Center(
+        child: SizedBox(
+          height: 1400,
+          width: viewModel.contentWidth,
+          child: ListView(
+            children: [
+              SizedBox(
+                height: 90,
+                child: Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      Padding(
+                        padding: EdgeInsets.symmetric(
+                          horizontal: viewModel.contentWidth == null ? 40 : 0,
+                        ),
+                        child: GestureDetector(
+                          onTap: viewModel.navigateToHome,
+                          child: Text(
+                            'HOME',
+                            style: TextStyle(
+                              fontWeight: FontWeight.w800,
+                              fontSize: getValueForScreenType(
+                                context: context,
+                                mobile: 17,
+                                tablet: 15,
+                                desktop: 15,
+                              ),
+                            ),
+                          ),
+                        ).showCursorOnHover,
+                      ),
+                      const MenuButton(),
+                    ]),
+              ),
+              ConstrainedBox(
+                constraints: const BoxConstraints.tightFor(height: 900),
+                child: const NestedRouter(),
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  @override
+  LayoutViewModel viewModelBuilder(
+    BuildContext context,
+  ) =>
+      LayoutViewModel();
+}

lib/src/templates/app/web/lib/ui/layouts/layout_viewmodel.dart.stk

@@ -0,0 +1,22 @@
+import 'package:{{packageName}}/{{{relativeLocatorFilePath}}}';
+import 'package:{{packageName}}/{{{relativeRouterFilePath}}}';
+import 'package:{{packageName}}/services/layout_service.dart';
+import 'package:{{packageName}}/ui/common/app_constants.dart';
+import 'package:stacked/stacked.dart';
+import 'package:stacked_services/stacked_services.dart';
+
+class LayoutViewModel extends ReactiveViewModel {
+  final layoutService = locator<LayoutService>();
+  final routerService = locator<RouterService>();
+
+  @override
+  List<ListenableServiceMixin> get listenableServices => [layoutService];
+
+  double? get contentWidth {
+    return layoutService.fullScreenMode ? null : kdDesktopMaxContentWidth;
+  }
+
+  Future<void> navigateToHome() async {
+    await routerService.clearStackAndShow(const HomeViewRoute());
+  }
+}

lib/src/templates/app/web/lib/ui/layouts/widgets/menu_button/menu_button.dart.stk

@@ -0,0 +1,93 @@
+import 'package:{{packageName}}/extensions/hover_extensions.dart';
+import 'package:{{packageName}}/ui/common/app_colors.dart';
+import 'package:flutter/material.dart';
+import 'package:stacked/stacked.dart';
+
+import 'menu_button_viewmodel.dart';
+
+class MenuButton extends StatefulWidget {
+  const MenuButton({super.key});
+
+  @override
+  State<MenuButton> createState() => _MenuButtonState();
+}
+
+class _MenuButtonState extends State<MenuButton> {
+  final layerLink = LayerLink();
+  OverlayEntry? entry;
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  void showMenu() {
+    entry = OverlayEntry(
+      builder: (BuildContext context) {
+        return Positioned(
+          width: 200,
+          child: CompositedTransformFollower(
+            link: layerLink,
+            offset: const Offset(-150, 30),
+            child: ViewModelBuilder<MenuButtonViewModel>.reactive(
+              viewModelBuilder: () => MenuButtonViewModel(),
+              builder: (context, viewModel, _) => Material(
+                borderRadius: BorderRadius.circular(5),
+                elevation: 8,
+                color: kcMediumGrey,
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Container(
+                      height: 60,
+                      alignment: Alignment.center,
+                      child: viewModel.isBusy
+                          ? const CircularProgressIndicator()
+                          : GestureDetector(
+                              onTap: () async {
+                                await viewModel.logout();
+                                removeMenu();
+                              },
+                              child: const Text(
+                                'Sign out',
+                                style: TextStyle(color: Colors.white),
+                              ),
+                            ),
+                    ).showCursorOnHover,
+                  ],
+                ),
+              ),
+            ),
+          ),
+        );
+      },
+    );
+
+    // Add the OverlayEntry to the Overlay.
+    Overlay.of(
+      context,
+    ).insert(entry!);
+  }
+
+  void removeMenu() {
+    entry?.remove();
+    entry = null;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return CompositedTransformTarget(
+      link: layerLink,
+      child: MaterialButton(
+          child: const Icon(Icons.menu, color: kcBlack),
+          onPressed: () async {
+            if (entry == null) {
+              WidgetsBinding.instance
+                  .addPostFrameCallback((timeStamp) => showMenu());
+            } else {
+              removeMenu();
+            }
+          }),
+    );
+  }
+}

lib/src/templates/app/web/lib/ui/layouts/widgets/menu_button/menu_button_viewmodel.dart.stk

@@ -0,0 +1,12 @@
+import 'package:{{packageName}}/{{{relativeLocatorFilePath}}}';
+import 'package:flutter_animate/flutter_animate.dart';
+import 'package:stacked/stacked.dart';
+
+class MenuButtonViewModel extends BaseViewModel {
+  Future<void> logout() async {
+    setBusy(true);
+    // execute any action here
+    await Future.delayed(2.seconds);
+    setBusy(false);
+  }
+}

lib/src/templates/app/web/lib/ui/views/unknown/unknown_view.dart.stk

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+import 'package:responsive_builder/responsive_builder.dart';
+import 'package:stacked/stacked.dart';
+
+import 'unknown_view.desktop.dart';
+import 'unknown_view.tablet.dart';
+import 'unknown_view.mobile.dart';
+import 'unknown_viewmodel.dart';
+
+class UnknownView extends StackedView<UnknownViewModel> {
+  const UnknownView({super.key});
+
+  @override
+  Widget builder(
+    BuildContext context,
+    UnknownViewModel viewModel,
+    Widget? child,
+  ) {
+    return ScreenTypeLayout.builder(
+      mobile: (_) => const UnknownViewMobile(),
+      tablet: (_) => const UnknownViewTablet(),
+      desktop: (_) => const UnknownViewDesktop(),
+    );
+  }
+
+  @override
+  UnknownViewModel viewModelBuilder(
+    BuildContext context,
+  ) =>
+      UnknownViewModel();
+}

lib/src/templates/app/web/lib/ui/views/unknown/unknown_view.desktop.dart.stk

@@ -0,0 +1,36 @@
+import 'package:{{packageName}}/ui/common/app_colors.dart';
+import 'package:{{packageName}}/ui/common/app_styles.dart';
+import 'package:{{packageName}}/ui/common/ui_helpers.dart';
+import 'package:flutter/material.dart';
+import 'package:stacked/stacked.dart';
+
+import 'unknown_viewmodel.dart';
+
+class UnknownViewDesktop extends ViewModelWidget<UnknownViewModel> {
+  const UnknownViewDesktop({super.key});
+
+  @override
+  Widget build(BuildContext context, UnknownViewModel viewModel) {
+    return Scaffold(
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text(
+              '404',
+              style: ktsHeading1.copyWith(letterSpacing: 20.0),
+            ),
+            verticalSpaceSmall,
+            Text(
+              'PAGE NOT FOUND',
+              style: ktsBodyLarge.copyWith(
+                letterSpacing: 20.0,
+                wordSpacing: 10.0,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}