New MaxWidthBox Implementation #1

- Convert to using new MaxWidthBox.
Codelessly · Aug 25, 2024 · b243734 · b243734
1 parent 952ead1
commit b243734
Show file tree

Hide file tree

Showing 4 changed files with 242 additions and 214 deletions.
diff --git a/lib/main.dart b/lib/main.dart
@@ -60,24 +60,18 @@ class MyApp extends StatelessWidget {
               path != '/' && path.startsWith('/') ? path.substring(1) : path;
           return BouncingScrollWrapper.builder(
             context,
-            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: switch (pathName) {
-                  '/' || ListPage.name => const ListPage(),
-                  PostPage.name =>
-                    // Custom "per-page" breakpoints.
-                    const ResponsiveBreakpoints(breakpoints: [
-                      Breakpoint(start: 0, end: 480, name: MOBILE),
-                      Breakpoint(start: 481, end: 1200, name: TABLET),
-                      Breakpoint(
-                          start: 1201, end: double.infinity, name: DESKTOP),
-                    ], child: PostPage()),
-                  TypographyPage.name => const TypographyPage(),
-                  _ => const SizedBox.shrink(),
-                }),
+            switch (pathName) {
+              '/' || ListPage.name => const ListPage(),
+              PostPage.name =>
+                // Custom "per-page" breakpoints.
+                const ResponsiveBreakpoints(breakpoints: [
+                  Breakpoint(start: 0, end: 480, name: MOBILE),
+                  Breakpoint(start: 481, end: 1200, name: TABLET),
+                  Breakpoint(start: 1201, end: double.infinity, name: DESKTOP),
+                ], child: PostPage()),
+              TypographyPage.name => const TypographyPage(),
+              _ => const SizedBox.shrink(),
+            },
           );
         });
   }

diff --git a/lib/pages/page_list.dart b/lib/pages/page_list.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:minimal/components/components.dart';
+import 'package:responsive_framework/responsive_framework.dart';
 
 // TODO Replace with object model.
 const String listItemTitleText = "A BETTER BLOG FOR WRITING";
@@ -14,44 +15,53 @@ class ListPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: Colors.white,
+      backgroundColor: const Color(0xFFF5F5F5),
       body: ListView(
-        padding: const EdgeInsets.symmetric(horizontal: 32),
         children: [
-          const MinimalMenuBar(),
-          const ListItem(
-              imageUrl: "assets/images/paper_flower_overhead_bw_w1080.jpg",
-              title: listItemTitleText,
-              description: listItemPreviewText),
-          divider,
-          const ListItem(
-              imageUrl: "assets/images/iphone_cactus_tea_overhead_bw_w1080.jpg",
-              title: listItemTitleText,
-              description: listItemPreviewText),
-          divider,
-          const ListItem(
-              imageUrl: "assets/images/typewriter_overhead_bw_w1080.jpg",
-              title: listItemTitleText,
-              description: listItemPreviewText),
-          divider,
-          const ListItem(
-              imageUrl:
-                  "assets/images/coffee_paperclips_pencil_angled_bw_w1080.jpg",
-              title: listItemTitleText,
-              description: listItemPreviewText),
-          divider,
-          const ListItem(
-              imageUrl:
-                  "assets/images/joy_note_coffee_eyeglasses_overhead_bw_w1080.jpg",
-              title: listItemTitleText,
-              description: listItemPreviewText),
-          divider,
-          Container(
-            padding: const EdgeInsets.symmetric(vertical: 80),
-            child: const ListNavigation(),
+          ...[
+            const MinimalMenuBar(),
+            const ListItem(
+                imageUrl: "assets/images/paper_flower_overhead_bw_w1080.jpg",
+                title: listItemTitleText,
+                description: listItemPreviewText),
+            divider,
+            const ListItem(
+                imageUrl:
+                    "assets/images/iphone_cactus_tea_overhead_bw_w1080.jpg",
+                title: listItemTitleText,
+                description: listItemPreviewText),
+            divider,
+            const ListItem(
+                imageUrl: "assets/images/typewriter_overhead_bw_w1080.jpg",
+                title: listItemTitleText,
+                description: listItemPreviewText),
+            divider,
+            const ListItem(
+                imageUrl:
+                    "assets/images/coffee_paperclips_pencil_angled_bw_w1080.jpg",
+                title: listItemTitleText,
+                description: listItemPreviewText),
+            divider,
+            const ListItem(
+                imageUrl:
+                    "assets/images/joy_note_coffee_eyeglasses_overhead_bw_w1080.jpg",
+                title: listItemTitleText,
+                description: listItemPreviewText),
+            divider,
+            Container(
+              padding: const EdgeInsets.symmetric(vertical: 80),
+              child: const ListNavigation(),
+            ),
+            divider,
+            const Footer(),
+          ].map(
+            (item) => MaxWidthBox(
+              maxWidth: 1200,
+              padding: const EdgeInsets.symmetric(horizontal: 32),
+              backgroundColor: Colors.white,
+              child: item,
+            ),
           ),
-          divider,
-          const Footer(),
         ],
       ),
     );

diff --git a/lib/pages/page_post.dart b/lib/pages/page_post.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:minimal/components/components.dart';
+import 'package:responsive_framework/responsive_framework.dart';
 
 class PostPage extends StatelessWidget {
   static const String name = 'post';
@@ -9,86 +10,89 @@ class PostPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: SingleChildScrollView(
-        child: Container(
-          margin: const EdgeInsets.symmetric(horizontal: 32),
-          child: Column(
-            children: [
-              const MinimalMenuBar(),
-              const ImageWrapper(
-                image: "assets/images/mugs_side_bw_w1080.jpg",
-              ),
-              Align(
-                alignment: Alignment.centerLeft,
-                child: Container(
-                  margin: marginBottom12,
-                  child: Text(
-                    "A BETTER BLOG FOR WRITING",
-                    style: headlineTextStyle,
-                  ),
+      backgroundColor: const Color(0xFFF5F5F5),
+      body: ListView(
+        children: [
+          ...[
+            const MinimalMenuBar(),
+            const ImageWrapper(
+              image: "assets/images/mugs_side_bw_w1080.jpg",
+            ),
+            Align(
+              alignment: Alignment.centerLeft,
+              child: Container(
+                margin: marginBottom12,
+                child: Text(
+                  "A BETTER BLOG FOR WRITING",
+                  style: headlineTextStyle,
                 ),
               ),
-              const Align(
-                alignment: Alignment.centerLeft,
-                child: TextBodySecondary(text: "Writing  /  Project"),
-              ),
-              const Align(
-                alignment: Alignment.centerLeft,
-                child: TextBody(
-                    text:
-                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus a pellentesque sit amet porttitor eget. Ipsum nunc aliquet bibendum enim facilisis gravida."),
-              ),
-              const Align(
-                alignment: Alignment.centerLeft,
-                child: TextBody(
-                    text:
-                        "Montes nascetur ridiculus mus mauris vitae ultricies leo. Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Magna sit amet purus gravida. In dictum non consectetur a erat nam. Et egestas quis ipsum suspendisse ultrices. Tempor orci dapibus ultrices in iaculis nunc sed augue. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus quam. Feugiat nisl pretium fusce id velit ut tortor pretium."),
-              ),
-              const Align(
-                alignment: Alignment.centerLeft,
-                child:
-                    TextHeadlineSecondary(text: "Secondary Headline Example"),
-              ),
-              const Align(
-                alignment: Alignment.centerLeft,
-                child: TextBody(
-                    text:
-                        "Nullam lobortis faucibus cursus. Sed aliquam semper mi sit amet interdum. Aliquam felis quam, ultrices ut elementum a, porta vel ex. Pellentesque at tempus magna. Vestibulum viverra lectus quis laoreet ullamcorper. Nunc finibus orci in luctus hendrerit. Ut dui mi, lacinia hendrerit elit ut, malesuada luctus enim."),
-              ),
-              const TextBlockquote(
+            ),
+            const Align(
+              alignment: Alignment.centerLeft,
+              child: TextBodySecondary(text: "Writing  /  Project"),
+            ),
+            const Align(
+              alignment: Alignment.centerLeft,
+              child: TextBody(
                   text:
-                      "Arcu ac tortor dignissim convallis aenean et tortor. Neque vitae tempus quam pellentesque nec nam aliquam. Dictum varius duis at consectetur lorem donec massa sapien faucibus. Etiam tempor orci eu lobortis elementum nibh tellus molestie nunc. Ac odio tempor orci dapibus ultrices in iaculis nunc sed."),
-              const Align(
-                alignment: Alignment.centerLeft,
-                child: TextBody(
-                    text:
-                        "Sed elementum tempus egestas sed sed risus. Mauris in aliquam sem fringilla ut morbi tincidunt. Placerat vestibulum lectus mauris ultrices eros. Et leo duis ut diam. Auctor neque vitae tempus quam. Nec nam aliquam sem et tortor consequat. Suspendisse interdum consectetur libero id faucibus nisl. Ornare suspendisse sed nisi lacus sed viverra. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Egestas purus viverra accumsan in nisl nisi."),
-              ),
-              const Align(
-                alignment: Alignment.centerLeft,
-                child: TagWrapper(tags: [
-                  Tag(tag: "Writing"),
-                  Tag(tag: "Photography"),
-                  Tag(tag: "Development")
-                ]),
-              ),
-              ...authorSection(
-                  imageUrl: "assets/images/avatar_default.png",
-                  name: "Type Pages",
-                  bio:
-                      "Mattis molestie a iaculis at erat pellentesque adipiscing commodo. Suspendisse interdum consectetur libero id faucibus nisl tincidunt eget. Sed euismod nisi porta lorem. Aliquet nec ullamcorper sit amet risus nullam eget felis eget."),
-              Container(
-                padding: const EdgeInsets.symmetric(vertical: 80),
-                child: const PostNavigation(),
-              ),
-              divider,
-              // Footer
-              const Footer(),
-            ],
+                      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus a pellentesque sit amet porttitor eget. Ipsum nunc aliquet bibendum enim facilisis gravida."),
+            ),
+            const Align(
+              alignment: Alignment.centerLeft,
+              child: TextBody(
+                  text:
+                      "Montes nascetur ridiculus mus mauris vitae ultricies leo. Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Magna sit amet purus gravida. In dictum non consectetur a erat nam. Et egestas quis ipsum suspendisse ultrices. Tempor orci dapibus ultrices in iaculis nunc sed augue. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus quam. Feugiat nisl pretium fusce id velit ut tortor pretium."),
+            ),
+            const Align(
+              alignment: Alignment.centerLeft,
+              child: TextHeadlineSecondary(text: "Secondary Headline Example"),
+            ),
+            const Align(
+              alignment: Alignment.centerLeft,
+              child: TextBody(
+                  text:
+                      "Nullam lobortis faucibus cursus. Sed aliquam semper mi sit amet interdum. Aliquam felis quam, ultrices ut elementum a, porta vel ex. Pellentesque at tempus magna. Vestibulum viverra lectus quis laoreet ullamcorper. Nunc finibus orci in luctus hendrerit. Ut dui mi, lacinia hendrerit elit ut, malesuada luctus enim."),
+            ),
+            const TextBlockquote(
+                text:
+                    "Arcu ac tortor dignissim convallis aenean et tortor. Neque vitae tempus quam pellentesque nec nam aliquam. Dictum varius duis at consectetur lorem donec massa sapien faucibus. Etiam tempor orci eu lobortis elementum nibh tellus molestie nunc. Ac odio tempor orci dapibus ultrices in iaculis nunc sed."),
+            const Align(
+              alignment: Alignment.centerLeft,
+              child: TextBody(
+                  text:
+                      "Sed elementum tempus egestas sed sed risus. Mauris in aliquam sem fringilla ut morbi tincidunt. Placerat vestibulum lectus mauris ultrices eros. Et leo duis ut diam. Auctor neque vitae tempus quam. Nec nam aliquam sem et tortor consequat. Suspendisse interdum consectetur libero id faucibus nisl. Ornare suspendisse sed nisi lacus sed viverra. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Egestas purus viverra accumsan in nisl nisi."),
+            ),
+            const Align(
+              alignment: Alignment.centerLeft,
+              child: TagWrapper(tags: [
+                Tag(tag: "Writing"),
+                Tag(tag: "Photography"),
+                Tag(tag: "Development")
+              ]),
+            ),
+            ...authorSection(
+                imageUrl: "assets/images/avatar_default.png",
+                name: "Type Pages",
+                bio:
+                    "Mattis molestie a iaculis at erat pellentesque adipiscing commodo. Suspendisse interdum consectetur libero id faucibus nisl tincidunt eget. Sed euismod nisi porta lorem. Aliquet nec ullamcorper sit amet risus nullam eget felis eget."),
+            Container(
+              padding: const EdgeInsets.symmetric(vertical: 80),
+              child: const PostNavigation(),
+            ),
+            divider,
+            // Footer
+            const Footer(),
+          ].map(
+            (item) => MaxWidthBox(
+              maxWidth: 1200,
+              padding: const EdgeInsets.symmetric(horizontal: 32),
+              backgroundColor: Colors.white,
+              child: item,
+            ),
           ),
-        ),
+        ],
       ),
-      backgroundColor: Colors.white,
     );
   }
 }