Skip to content

Commit

Permalink
New MaxWidthBox Implementation #2
Browse files Browse the repository at this point in the history 
- Create MaxWidthBox extension.
- Convert to using Slivers.
  • Loading branch information
@rayliverified
rayliverified committed Aug 25, 2024
1 parent b243734 commit 271bad3
Show file tree
Hide file tree
Showing 5 changed files with 147 additions and 138 deletions.
35 changes: 14 additions & 21 deletions lib/main_advanced.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<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),
// 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<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),
// 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));
Expand Down
23 changes: 13 additions & 10 deletions lib/pages/page_list.dart
View file
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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(
Expand Down Expand Up @@ -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(),
],
),
);
Expand Down
24 changes: 13 additions & 11 deletions lib/pages/page_post.dart
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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(
Expand Down Expand Up @@ -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(),
],
),
);
Expand Down
175 changes: 79 additions & 96 deletions lib/pages/page_typography.dart
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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(),
],
),
);
}
}
28 changes: 28 additions & 0 deletions lib/utils/max_width_extension.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import 'package:flutter/material.dart';
import 'package:responsive_framework/responsive_framework.dart';

extension MaxWidthExtension on List<Widget> {
List<Widget> toMaxWidth() {
return map(
(item) => MaxWidthBox(
maxWidth: 1200,
padding: const EdgeInsets.symmetric(horizontal: 32),
backgroundColor: Colors.white,
child: item,
),
).toList();
}

List<Widget> toMaxWidthSliver() {
return map(
(item) => SliverToBoxAdapter(
child: MaxWidthBox(
maxWidth: 1200,
padding: const EdgeInsets.symmetric(horizontal: 32),
backgroundColor: Colors.white,
child: item,
),
),
).toList();
}
}

0 comments on commit 271bad3

Please sign in to comment.