diff --git a/lib/main.dart b/lib/main.dart index 94719ae..2fe6b52 100644 --- 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 index 40dda92..d806f2f 100644 --- 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 index 44a4478..65603d8 100644 --- 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, ); } } diff --git a/lib/pages/page_typography.dart b/lib/pages/page_typography.dart index 1880d04..af5e4c0 100644 --- a/lib/pages/page_typography.dart +++ b/lib/pages/page_typography.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:minimal/components/components.dart'; +import 'package:responsive_framework/responsive_framework.dart'; class TypographyPage extends StatelessWidget { static const String name = 'typography'; @@ -9,93 +10,112 @@ class TypographyPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( - body: Stack( - children: [ - SingleChildScrollView( - child: Container( - margin: const EdgeInsets.symmetric(horizontal: 32), - child: Column( - children: [ - const MinimalMenuBar(), - Align( - alignment: Alignment.center, - child: Container( - margin: marginBottom12, - child: Text("Typography", style: headlineTextStyle), - ), - ), - Align( - alignment: Alignment.center, - child: Container( - margin: marginBottom24, - child: Text("Text styles for pages and posts.", - style: subtitleTextStyle), - ), - ), - divider, - Container( - margin: marginBottom40, - ), - Align( - alignment: Alignment.center, - child: Container( - margin: marginBottom12, - child: Text("Basic Styles", - style: headlineSecondaryTextStyle), - ), - ), - Align( - alignment: Alignment.center, - child: Container( - margin: marginBottom24, - child: Text("Simple to remember and use", - style: subtitleTextStyle), - ), - ), - dividerSmall, - Container( - margin: marginBottom24, - ), - Align( - alignment: Alignment.centerLeft, - child: Container( - margin: marginBottom24, - child: Text("Headline", style: headlineTextStyle), - ), - ), - Align( - alignment: Alignment.centerLeft, - child: Container( - margin: marginBottom24, - child: Text("Headline Secondary", - style: headlineSecondaryTextStyle), - ), - ), - Align( - alignment: Alignment.centerLeft, - child: Container( - margin: marginBottom24, - child: Text("Subtitle", style: subtitleTextStyle), - ), - ), - Align( - alignment: Alignment.centerLeft, - child: Container( - margin: marginBottom40, - child: Text( - "Body text is the default text style. Use this text style for website content and paragraphs. This text is chosen to be easy and comfortable to read. As the default text style for large blocks of text, particular attention is placed on the choice of font. Some fonts are more comfortable to read than others.", - style: bodyTextStyle), - ), - ), - divider, - const Footer(), - ], + backgroundColor: const Color(0xFFF5F5F5), + body: CustomScrollView( + slivers: [ + ...[ + const MinimalMenuBar(), + Align( + alignment: Alignment.center, + child: Container( + margin: marginBottom12, + child: Text("Typography", style: headlineTextStyle), + ), + ), + Align( + alignment: Alignment.center, + child: Container( + margin: marginBottom24, + child: Text("Text styles for pages and posts.", + style: subtitleTextStyle), + ), + ), + divider, + Container( + margin: marginBottom40, + ), + Align( + alignment: Alignment.center, + child: Container( + margin: marginBottom12, + child: + Text("Basic Styles", style: headlineSecondaryTextStyle), + ), + ), + Align( + alignment: Alignment.center, + child: Container( + margin: marginBottom24, + child: Text("Simple to remember and use", + style: subtitleTextStyle), + ), + ), + dividerSmall, + Container( + margin: marginBottom24, + ), + Align( + alignment: Alignment.centerLeft, + child: Container( + margin: marginBottom24, + child: Text("Headline", style: headlineTextStyle), + ), + ), + Align( + alignment: Alignment.centerLeft, + child: Container( + margin: marginBottom24, + child: Text("Headline Secondary", + style: headlineSecondaryTextStyle), + ), + ), + Align( + alignment: Alignment.centerLeft, + child: Container( + margin: marginBottom24, + child: Text("Subtitle", style: subtitleTextStyle), + ), + ), + Align( + alignment: Alignment.centerLeft, + child: Container( + margin: marginBottom40, + child: Text( + "Body text is the default text style. Use this text style for website content and paragraphs. This text is chosen to be easy and comfortable to read. As the default text style for large blocks of text, particular attention is placed on the choice of font. Some fonts are more comfortable to read than others.", + style: bodyTextStyle), + ), + ), + ].map( + (item) => SliverToBoxAdapter( + child: MaxWidthBox( + maxWidth: 1200, + padding: const EdgeInsets.symmetric(horizontal: 32), + backgroundColor: Colors.white, + child: item, + ), + ), + ), + SliverFillRemaining( + hasScrollBody: false, + child: MaxWidthBox( + maxWidth: 1200, + backgroundColor: Colors.white, + child: Container()), + ), + ...[ + divider, + const Footer(), + ].map( + (item) => SliverToBoxAdapter( + child: MaxWidthBox( + maxWidth: 1200, + padding: const EdgeInsets.symmetric(horizontal: 32), + backgroundColor: Colors.white, + child: item, + ), ), ), - ), - ], - ), - backgroundColor: Colors.white, - ); + ], + )); } }