Document Example

Author: rayliverified

lib/main.dart

@@ -14,6 +14,8 @@ class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
+      // Make breakpoint values accessible throughout the app by wrapping the
+      // app with a builder method.
       builder: (context, child) => ResponsiveBreakpoints.builder(
         child: child!,
         breakpoints: [
@@ -24,21 +26,34 @@ class MyApp extends StatelessWidget {
         ],
       ),
       initialRoute: '/',
+      // The following code demonstrates an implementation of the AutoScale functionality
+      // of ResponsiveScaledBox. The ResponsiveScaledBox widget preserves
+      // the legacy ResponsiveWrapper behavior, scaling the UI instead of resizing.
       onGenerateRoute: (RouteSettings settings) {
+        // A custom `fadeThrough` route transition animation.
         return Routes.fadeThrough(settings, (context) {
+          // Wrap widgets with another widget based on the route.
+          // Wrap the page with ResponsiveScaledBox on desired pages.
           return ConditionalRouteWidget(
-              routesExcluded: const [],
+              routesExcluded: const [
+                TypographyPage.name
+              ], // An example of excluding a page from AutoScale.
               builder: (context, child) => MaxWidthBox(
+                    // A widget that limits the maximum width.
+                    // This is used to create a gutter area on either side of the content.
                     maxWidth: 1200,
                     background: Container(color: const Color(0xFFF5F5F5)),
                     child: ResponsiveScaledBox(
+                        // ResponsiveScaledBox renders it's child with a FittedBox set to the `width` value.
+                        // Set the fixed width value based on the active breakpoint.
                         width: ResponsiveValue<double>(context,
                             conditionalValues: [
                               const Condition.equals(name: MOBILE, value: 450),
                               const Condition.between(
                                   start: 800, end: 1100, value: 800),
                               const Condition.between(
                                   start: 1000, end: 1200, value: 1000),
+                              // Because the `maxWidth` is set to 1200 via the MaxWidthBox, the layout cannot expand over 1200px.
                             ]).value,
                         child: child!),
                   ),
@@ -50,6 +65,8 @@ class MyApp extends StatelessWidget {
     );
   }
 
+  // onGenerateRoute route switcher.
+  // Navigate using the page name, `Navigator.pushNamed(context, ListPage.name)`.
   Widget buildPage(String name) {
     switch (name) {
       case '/':