diff --git a/lib/main_advanced.dart b/lib/main_advanced.dart index 047d01f..802a224 100644 --- a/lib/main_advanced.dart +++ b/lib/main_advanced.dart @@ -44,27 +44,20 @@ class MyApp extends StatelessWidget { routesExcluded: const [ TypographyPage.name ], // 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 its child with a FittedBox set to the `width` value. - // Set the fixed width value based on the active breakpoint. - width: ResponsiveValue(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), - // There are no conditions for width over 1200 - // because the `maxWidth` is set to 1200 via the MaxWidthBox. - ]).value, - child: child!), - ), + builder: (context, child) => ResponsiveScaledBox( + // ResponsiveScaledBox renders its child with a FittedBox set to the `width` value. + // Set the fixed width value based on the active breakpoint. + width: + ResponsiveValue(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), + // There are no conditions for width over 1200 + // because the `maxWidth` is set to 1200 via the MaxWidthBox. + ]).value, + child: child!), child: BouncingScrollWrapper.builder( context, buildPage(settings.name ?? ''), dragWithMouse: true)); diff --git a/lib/pages/page_list.dart b/lib/pages/page_list.dart index d806f2f..72b5ad4 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:minimal/utils/max_width_extension.dart'; import 'package:responsive_framework/responsive_framework.dart'; // TODO Replace with object model. @@ -16,8 +17,8 @@ class ListPage extends StatelessWidget { Widget build(BuildContext context) { return Scaffold( backgroundColor: const Color(0xFFF5F5F5), - body: ListView( - children: [ + body: CustomScrollView( + slivers: [ ...[ const MinimalMenuBar(), const ListItem( @@ -52,16 +53,18 @@ class ListPage extends StatelessWidget { padding: const EdgeInsets.symmetric(vertical: 80), child: const ListNavigation(), ), + ].toMaxWidthSliver(), + SliverFillRemaining( + hasScrollBody: false, + child: MaxWidthBox( + maxWidth: 1200, + backgroundColor: Colors.white, + child: Container()), + ), + ...[ divider, const Footer(), - ].map( - (item) => MaxWidthBox( - maxWidth: 1200, - padding: const EdgeInsets.symmetric(horizontal: 32), - backgroundColor: Colors.white, - child: item, - ), - ), + ].toMaxWidthSliver(), ], ), ); diff --git a/lib/pages/page_post.dart b/lib/pages/page_post.dart index 65603d8..d27ad1c 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:minimal/utils/max_width_extension.dart'; import 'package:responsive_framework/responsive_framework.dart'; class PostPage extends StatelessWidget { @@ -11,8 +12,8 @@ class PostPage extends StatelessWidget { Widget build(BuildContext context) { return Scaffold( backgroundColor: const Color(0xFFF5F5F5), - body: ListView( - children: [ + body: CustomScrollView( + slivers: [ ...[ const MinimalMenuBar(), const ImageWrapper( @@ -80,17 +81,18 @@ class PostPage extends StatelessWidget { padding: const EdgeInsets.symmetric(vertical: 80), child: const PostNavigation(), ), + ].toMaxWidthSliver(), + SliverFillRemaining( + hasScrollBody: false, + child: MaxWidthBox( + maxWidth: 1200, + backgroundColor: Colors.white, + child: Container()), + ), + ...[ divider, - // Footer const Footer(), - ].map( - (item) => MaxWidthBox( - maxWidth: 1200, - padding: const EdgeInsets.symmetric(horizontal: 32), - backgroundColor: Colors.white, - child: item, - ), - ), + ].toMaxWidthSliver(), ], ), ); diff --git a/lib/pages/page_typography.dart b/lib/pages/page_typography.dart index af5e4c0..da3f5b3 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:minimal/utils/max_width_extension.dart'; import 'package:responsive_framework/responsive_framework.dart'; class TypographyPage extends StatelessWidget { @@ -10,112 +11,94 @@ class TypographyPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( - backgroundColor: const Color(0xFFF5F5F5), - body: CustomScrollView( - slivers: [ - ...[ - const MinimalMenuBar(), - Align( - alignment: Alignment.center, - child: Container( - margin: marginBottom12, - child: Text("Typography", style: headlineTextStyle), - ), + 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( + ), + Align( + alignment: Alignment.center, + child: Container( margin: marginBottom24, + child: Text("Text styles for pages and posts.", + style: subtitleTextStyle), ), - 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), - ), + ), + divider, + Container( + margin: marginBottom40, + ), + Align( + alignment: Alignment.center, + child: Container( + margin: marginBottom12, + child: Text("Basic Styles", style: headlineSecondaryTextStyle), ), - Align( - alignment: Alignment.centerLeft, - child: Container( - margin: marginBottom24, - child: Text("Subtitle", style: subtitleTextStyle), - ), + ), + Align( + alignment: Alignment.center, + child: Container( + margin: marginBottom24, + child: Text("Simple to remember and use", + 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), - ), + ), + dividerSmall, + Container( + margin: marginBottom24, + ), + Align( + alignment: Alignment.centerLeft, + child: Container( + margin: marginBottom24, + child: Text("Headline", style: headlineTextStyle), ), - ].map( - (item) => SliverToBoxAdapter( - child: MaxWidthBox( - maxWidth: 1200, - padding: const EdgeInsets.symmetric(horizontal: 32), - backgroundColor: Colors.white, - child: item, - ), + ), + Align( + alignment: Alignment.centerLeft, + child: Container( + margin: marginBottom24, + child: Text("Headline Secondary", + style: headlineSecondaryTextStyle), ), ), - SliverFillRemaining( - hasScrollBody: false, - child: MaxWidthBox( - maxWidth: 1200, - backgroundColor: Colors.white, - child: Container()), + Align( + alignment: Alignment.centerLeft, + child: Container( + margin: marginBottom24, + child: Text("Subtitle", style: subtitleTextStyle), + ), ), - ...[ - divider, - const Footer(), - ].map( - (item) => SliverToBoxAdapter( - child: MaxWidthBox( - maxWidth: 1200, - padding: const EdgeInsets.symmetric(horizontal: 32), - backgroundColor: Colors.white, - child: item, - ), + 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), ), ), - ], - )); + ].toMaxWidthSliver(), + SliverFillRemaining( + hasScrollBody: false, + child: MaxWidthBox( + maxWidth: 1200, + backgroundColor: Colors.white, + child: Container()), + ), + ...[ + divider, + const Footer(), + ].toMaxWidthSliver(), + ], + ), + ); } } diff --git a/lib/utils/max_width_extension.dart b/lib/utils/max_width_extension.dart new file mode 100644 index 0000000..fe40956 --- /dev/null +++ b/lib/utils/max_width_extension.dart @@ -0,0 +1,28 @@ +import 'package:flutter/material.dart'; +import 'package:responsive_framework/responsive_framework.dart'; + +extension MaxWidthExtension on List { + List toMaxWidth() { + return map( + (item) => MaxWidthBox( + maxWidth: 1200, + padding: const EdgeInsets.symmetric(horizontal: 32), + backgroundColor: Colors.white, + child: item, + ), + ).toList(); + } + + List toMaxWidthSliver() { + return map( + (item) => SliverToBoxAdapter( + child: MaxWidthBox( + maxWidth: 1200, + padding: const EdgeInsets.symmetric(horizontal: 32), + backgroundColor: Colors.white, + child: item, + ), + ), + ).toList(); + } +}