Skip to content

Commit 271bad3

Browse files
rayliverifiedrayliverified
committed
New MaxWidthBox Implementation #2
- Create MaxWidthBox extension. - Convert to using Slivers.
1 parent b243734 commit 271bad3

File tree

5 files changed

+147
-138
lines changed

5 files changed

+147
-138
lines changed

‎lib/main_advanced.dart‎

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -44,27 +44,20 @@ class MyApp extends StatelessWidget {
4444
routesExcluded: const [
4545
TypographyPage.name
4646
], // Excluding a page from AutoScale.
47-
builder: (context, child) => MaxWidthBox(
48-
// A widget that limits the maximum width.
49-
// This is used to create a gutter area on either side of the content.
50-
maxWidth: 1200,
51-
background: Container(color: const Color(0xFFF5F5F5)),
52-
child: ResponsiveScaledBox(
53-
// ResponsiveScaledBox renders its child with a FittedBox set to the `width` value.
54-
// Set the fixed width value based on the active breakpoint.
55-
width: ResponsiveValue<double>(context,
56-
conditionalValues: [
57-
const Condition.equals(
58-
name: MOBILE, value: 450),
59-
const Condition.between(
60-
start: 800, end: 1100, value: 800),
61-
const Condition.between(
62-
start: 1000, end: 1200, value: 1000),
63-
// There are no conditions for width over 1200
64-
// because the `maxWidth` is set to 1200 via the MaxWidthBox.
65-
]).value,
66-
child: child!),
67-
),
47+
builder: (context, child) => ResponsiveScaledBox(
48+
// ResponsiveScaledBox renders its child with a FittedBox set to the `width` value.
49+
// Set the fixed width value based on the active breakpoint.
50+
width:
51+
ResponsiveValue<double>(context, conditionalValues: [
52+
const Condition.equals(name: MOBILE, value: 450),
53+
const Condition.between(
54+
start: 800, end: 1100, value: 800),
55+
const Condition.between(
56+
start: 1000, end: 1200, value: 1000),
57+
// There are no conditions for width over 1200
58+
// because the `maxWidth` is set to 1200 via the MaxWidthBox.
59+
]).value,
60+
child: child!),
6861
child: BouncingScrollWrapper.builder(
6962
context, buildPage(settings.name ?? ''),
7063
dragWithMouse: true));

‎lib/pages/page_list.dart‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import 'package:flutter/material.dart';
22
import 'package:minimal/components/components.dart';
3+
import 'package:minimal/utils/max_width_extension.dart';
34
import 'package:responsive_framework/responsive_framework.dart';
45

56
// TODO Replace with object model.
@@ -16,8 +17,8 @@ class ListPage extends StatelessWidget {
1617
Widget build(BuildContext context) {
1718
return Scaffold(
1819
backgroundColor: const Color(0xFFF5F5F5),
19-
body: ListView(
20-
children: [
20+
body: CustomScrollView(
21+
slivers: [
2122
...[
2223
const MinimalMenuBar(),
2324
const ListItem(
@@ -52,16 +53,18 @@ class ListPage extends StatelessWidget {
5253
padding: const EdgeInsets.symmetric(vertical: 80),
5354
child: const ListNavigation(),
5455
),
56+
].toMaxWidthSliver(),
57+
SliverFillRemaining(
58+
hasScrollBody: false,
59+
child: MaxWidthBox(
60+
maxWidth: 1200,
61+
backgroundColor: Colors.white,
62+
child: Container()),
63+
),
64+
...[
5565
divider,
5666
const Footer(),
57-
].map(
58-
(item) => MaxWidthBox(
59-
maxWidth: 1200,
60-
padding: const EdgeInsets.symmetric(horizontal: 32),
61-
backgroundColor: Colors.white,
62-
child: item,
63-
),
64-
),
67+
].toMaxWidthSliver(),
6568
],
6669
),
6770
);

‎lib/pages/page_post.dart‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import 'package:flutter/material.dart';
22
import 'package:minimal/components/components.dart';
3+
import 'package:minimal/utils/max_width_extension.dart';
34
import 'package:responsive_framework/responsive_framework.dart';
45

56
class PostPage extends StatelessWidget {
@@ -11,8 +12,8 @@ class PostPage extends StatelessWidget {
1112
Widget build(BuildContext context) {
1213
return Scaffold(
1314
backgroundColor: const Color(0xFFF5F5F5),
14-
body: ListView(
15-
children: [
15+
body: CustomScrollView(
16+
slivers: [
1617
...[
1718
const MinimalMenuBar(),
1819
const ImageWrapper(
@@ -80,17 +81,18 @@ class PostPage extends StatelessWidget {
8081
padding: const EdgeInsets.symmetric(vertical: 80),
8182
child: const PostNavigation(),
8283
),
84+
].toMaxWidthSliver(),
85+
SliverFillRemaining(
86+
hasScrollBody: false,
87+
child: MaxWidthBox(
88+
maxWidth: 1200,
89+
backgroundColor: Colors.white,
90+
child: Container()),
91+
),
92+
...[
8393
divider,
84-
// Footer
8594
const Footer(),
86-
].map(
87-
(item) => MaxWidthBox(
88-
maxWidth: 1200,
89-
padding: const EdgeInsets.symmetric(horizontal: 32),
90-
backgroundColor: Colors.white,
91-
child: item,
92-
),
93-
),
95+
].toMaxWidthSliver(),
9496
],
9597
),
9698
);

‎lib/pages/page_typography.dart‎

Lines changed: 79 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import 'package:flutter/material.dart';
22
import 'package:minimal/components/components.dart';
3+
import 'package:minimal/utils/max_width_extension.dart';
34
import 'package:responsive_framework/responsive_framework.dart';
45

56
class TypographyPage extends StatelessWidget {
@@ -10,112 +11,94 @@ class TypographyPage extends StatelessWidget {
1011
@override
1112
Widget build(BuildContext context) {
1213
return Scaffold(
13-
backgroundColor: const Color(0xFFF5F5F5),
14-
body: CustomScrollView(
15-
slivers: [
16-
...[
17-
const MinimalMenuBar(),
18-
Align(
19-
alignment: Alignment.center,
20-
child: Container(
21-
margin: marginBottom12,
22-
child: Text("Typography", style: headlineTextStyle),
23-
),
14+
backgroundColor: const Color(0xFFF5F5F5),
15+
body: CustomScrollView(
16+
slivers: [
17+
...[
18+
const MinimalMenuBar(),
19+
Align(
20+
alignment: Alignment.center,
21+
child: Container(
22+
margin: marginBottom12,
23+
child: Text("Typography", style: headlineTextStyle),
2424
),
25-
Align(
26-
alignment: Alignment.center,
27-
child: Container(
28-
margin: marginBottom24,
29-
child: Text("Text styles for pages and posts.",
30-
style: subtitleTextStyle),
31-
),
32-
),
33-
divider,
34-
Container(
35-
margin: marginBottom40,
36-
),
37-
Align(
38-
alignment: Alignment.center,
39-
child: Container(
40-
margin: marginBottom12,
41-
child:
42-
Text("Basic Styles", style: headlineSecondaryTextStyle),
43-
),
44-
),
45-
Align(
46-
alignment: Alignment.center,
47-
child: Container(
48-
margin: marginBottom24,
49-
child: Text("Simple to remember and use",
50-
style: subtitleTextStyle),
51-
),
52-
),
53-
dividerSmall,
54-
Container(
25+
),
26+
Align(
27+
alignment: Alignment.center,
28+
child: Container(
5529
margin: marginBottom24,
30+
child: Text("Text styles for pages and posts.",
31+
style: subtitleTextStyle),
5632
),
57-
Align(
58-
alignment: Alignment.centerLeft,
59-
child: Container(
60-
margin: marginBottom24,
61-
child: Text("Headline", style: headlineTextStyle),
62-
),
63-
),
64-
Align(
65-
alignment: Alignment.centerLeft,
66-
child: Container(
67-
margin: marginBottom24,
68-
child: Text("Headline Secondary",
69-
style: headlineSecondaryTextStyle),
70-
),
33+
),
34+
divider,
35+
Container(
36+
margin: marginBottom40,
37+
),
38+
Align(
39+
alignment: Alignment.center,
40+
child: Container(
41+
margin: marginBottom12,
42+
child: Text("Basic Styles", style: headlineSecondaryTextStyle),
7143
),
72-
Align(
73-
alignment: Alignment.centerLeft,
74-
child: Container(
75-
margin: marginBottom24,
76-
child: Text("Subtitle", style: subtitleTextStyle),
77-
),
44+
),
45+
Align(
46+
alignment: Alignment.center,
47+
child: Container(
48+
margin: marginBottom24,
49+
child: Text("Simple to remember and use",
50+
style: subtitleTextStyle),
7851
),
79-
Align(
80-
alignment: Alignment.centerLeft,
81-
child: Container(
82-
margin: marginBottom40,
83-
child: Text(
84-
"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.",
85-
style: bodyTextStyle),
86-
),
52+
),
53+
dividerSmall,
54+
Container(
55+
margin: marginBottom24,
56+
),
57+
Align(
58+
alignment: Alignment.centerLeft,
59+
child: Container(
60+
margin: marginBottom24,
61+
child: Text("Headline", style: headlineTextStyle),
8762
),
88-
].map(
89-
(item) => SliverToBoxAdapter(
90-
child: MaxWidthBox(
91-
maxWidth: 1200,
92-
padding: const EdgeInsets.symmetric(horizontal: 32),
93-
backgroundColor: Colors.white,
94-
child: item,
95-
),
63+
),
64+
Align(
65+
alignment: Alignment.centerLeft,
66+
child: Container(
67+
margin: marginBottom24,
68+
child: Text("Headline Secondary",
69+
style: headlineSecondaryTextStyle),
9670
),
9771
),
98-
SliverFillRemaining(
99-
hasScrollBody: false,
100-
child: MaxWidthBox(
101-
maxWidth: 1200,
102-
backgroundColor: Colors.white,
103-
child: Container()),
72+
Align(
73+
alignment: Alignment.centerLeft,
74+
child: Container(
75+
margin: marginBottom24,
76+
child: Text("Subtitle", style: subtitleTextStyle),
77+
),
10478
),
105-
...[
106-
divider,
107-
const Footer(),
108-
].map(
109-
(item) => SliverToBoxAdapter(
110-
child: MaxWidthBox(
111-
maxWidth: 1200,
112-
padding: const EdgeInsets.symmetric(horizontal: 32),
113-
backgroundColor: Colors.white,
114-
child: item,
115-
),
79+
Align(
80+
alignment: Alignment.centerLeft,
81+
child: Container(
82+
margin: marginBottom40,
83+
child: Text(
84+
"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.",
85+
style: bodyTextStyle),
11686
),
11787
),
118-
],
119-
));
88+
].toMaxWidthSliver(),
89+
SliverFillRemaining(
90+
hasScrollBody: false,
91+
child: MaxWidthBox(
92+
maxWidth: 1200,
93+
backgroundColor: Colors.white,
94+
child: Container()),
95+
),
96+
...[
97+
divider,
98+
const Footer(),
99+
].toMaxWidthSliver(),
100+
],
101+
),
102+
);
120103
}
121104
}

‎lib/utils/max_width_extension.dart‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:responsive_framework/responsive_framework.dart';
3+
4+
extension MaxWidthExtension on List<Widget> {
5+
List<Widget> toMaxWidth() {
6+
return map(
7+
(item) => MaxWidthBox(
8+
maxWidth: 1200,
9+
padding: const EdgeInsets.symmetric(horizontal: 32),
10+
backgroundColor: Colors.white,
11+
child: item,
12+
),
13+
).toList();
14+
}
15+
16+
List<Widget> toMaxWidthSliver() {
17+
return map(
18+
(item) => SliverToBoxAdapter(
19+
child: MaxWidthBox(
20+
maxWidth: 1200,
21+
padding: const EdgeInsets.symmetric(horizontal: 32),
22+
backgroundColor: Colors.white,
23+
child: item,
24+
),
25+
),
26+
).toList();
27+
}
28+
}

0 commit comments

Comments
 (0)