fix: Make ScaffoldPage opaque (Fixes #1048)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 * fix: ¹ `DropDownButton.closeAfterClick` is now correctly applied. ² Added `MenuFlyoutItem.closeAfterClick`, which defaults to `true`. ([#1016](https://github.com/bdlukaa/fluent_ui/issues/1016))
 * fix: `MenuFlyoutSubItem` does not close when pressed ([#1037](https://github.com/bdlukaa/fluent_ui/issues/1037))
+* fix: Make `ScaffoldPage` opaque ([#1048](https://github.com/bdlukaa/fluent_ui/issues/1048))
 * fix: Scroll issue in `DatePicker`. ([#1054](https://github.com/bdlukaa/fluent_ui/issues/1054))
 * feat: Add `NumberBox.textInputAction` and `NumberBox.onEditingComplete` ([#1063](https://github.com/bdlukaa/fluent_ui/pull/1063))
 * fix: `NumberBox` does not calls a rebuild when it is already building ([#1064](https://github.com/bdlukaa/fluent_ui/issues/1064))

example/lib/main.dart

@@ -711,7 +711,7 @@ final router = GoRouter(navigatorKey: rootNavigatorKey, routes: [
         child: child,
       );
     },
-    routes: [
+    routes: <GoRoute>[
       /// Home
       GoRoute(path: '/', builder: (context, state) => const HomePage()),
 

lib/src/layout/page.dart

@@ -132,37 +132,40 @@ class _ScaffoldPageState extends State<ScaffoldPage> {
     final theme = FluentTheme.of(context);
     final view = NavigationView.maybeOf(context);
 
-    return PageStorage(
-      bucket: _bucket,
-      child: Padding(
-        padding: EdgeInsetsDirectional.only(
-          bottom: widget.resizeToAvoidBottomInset
-              ? MediaQuery.viewInsetsOf(context).bottom
-              : 0.0,
-        ),
-        child: Column(children: [
-          Expanded(
-            child: Container(
-              // we only show the scaffold background color if a [NavigationView] is
-              // not a parent widget of this page. this happens because, if a navigation
-              // view is not used, the page would be uncolored.
-              color: view == null ? theme.scaffoldBackgroundColor : null,
-              padding: widget.padding == null
-                  ? const EdgeInsetsDirectional.only(
-                      top: kPageDefaultVerticalPadding,
-                    )
-                  : EdgeInsetsDirectional.only(top: widget.padding!.top),
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  if (widget.header != null) widget.header!,
-                  Expanded(child: widget.content),
-                ],
+    return ColoredBox(
+      color: Colors.transparent,
+      child: PageStorage(
+        bucket: _bucket,
+        child: Padding(
+          padding: EdgeInsetsDirectional.only(
+            bottom: widget.resizeToAvoidBottomInset
+                ? MediaQuery.viewInsetsOf(context).bottom
+                : 0.0,
+          ),
+          child: Column(children: [
+            Expanded(
+              child: Container(
+                // we only show the scaffold background color if a [NavigationView] is
+                // not a parent widget of this page. this happens because, if a navigation
+                // view is not used, the page would be uncolored.
+                color: view == null ? theme.scaffoldBackgroundColor : null,
+                padding: widget.padding == null
+                    ? const EdgeInsetsDirectional.only(
+                        top: kPageDefaultVerticalPadding,
+                      )
+                    : EdgeInsetsDirectional.only(top: widget.padding!.top),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    if (widget.header != null) widget.header!,
+                    Expanded(child: widget.content),
+                  ],
+                ),
               ),
             ),
-          ),
-          if (widget.bottomBar != null) widget.bottomBar!,
-        ]),
+            if (widget.bottomBar != null) widget.bottomBar!,
+          ]),
+        ),
       ),
     );
   }

lib/src/navigation/route.dart

@@ -1,5 +1,59 @@
 import 'package:fluent_ui/fluent_ui.dart';
 
+/// A page that creates a fluent style [PageRoute].
+///
+/// By default, when the created route is replaced by another, the previous
+/// route remains in memory. To free all the resources when this is not
+/// necessary, set [maintainState] to false.
+///
+/// The `fullscreenDialog` property specifies whether the created route is a
+/// fullscreen modal dialog. On iOS, those routes animate from the bottom to the
+/// top rather than horizontally.
+///
+/// The type `T` specifies the return type of the route which can be supplied as
+/// the route is popped from the stack via [Navigator.transitionDelegate] by
+/// providing the optional `result` argument to the
+/// [RouteTransitionRecord.markForPop] in the [TransitionDelegate.resolve].
+///
+/// See also:
+///
+///  * [FluentPageRoute], which is the [PageRoute] version of this class
+class FluentPage<T> extends Page<T> {
+  /// Creates a fluent-styled page.
+  const FluentPage({
+    required this.child,
+    this.maintainState = true,
+    this.fullscreenDialog = false,
+    this.allowSnapshotting = true,
+    super.key,
+    super.name,
+    super.arguments,
+    super.restorationId,
+  });
+
+  /// The content to be shown in the [Route] created by this page.
+  final Widget child;
+
+  /// {@macro flutter.widgets.ModalRoute.maintainState}
+  final bool maintainState;
+
+  /// {@macro flutter.widgets.PageRoute.fullscreenDialog}
+  final bool fullscreenDialog;
+
+  /// {@macro flutter.widgets.TransitionRoute.allowSnapshotting}
+  final bool allowSnapshotting;
+
+  @override
+  Route<T> createRoute(BuildContext context) {
+    return FluentPageRoute(
+      builder: (_) => child,
+      maintainState: maintainState,
+      fullscreenDialog: fullscreenDialog,
+      settings: this,
+    );
+  }
+}
+
 /// A modal route that replaces the entire screen.
 class FluentPageRoute<T> extends PageRoute<T> {
   late final WidgetBuilder _builder;