Skip to content

Commit b243734

Browse files
rayliverifiedrayliverified
committed
New MaxWidthBox Implementation #1
- Convert to using new MaxWidthBox.
1 parent 952ead1 commit b243734

File tree

4 files changed

+242
-214
lines changed

4 files changed

+242
-214
lines changed

‎lib/main.dart

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -60,24 +60,18 @@ class MyApp extends StatelessWidget {
6060
path != '/' && path.startsWith('/') ? path.substring(1) : path;
6161
return BouncingScrollWrapper.builder(
6262
context,
63-
MaxWidthBox(
64-
// A widget that limits the maximum width.
65-
// This is used to create a gutter area on either side of the content.
66-
maxWidth: 1200,
67-
background: Container(color: const Color(0xFFF5F5F5)),
68-
child: switch (pathName) {
69-
'/' || ListPage.name => const ListPage(),
70-
PostPage.name =>
71-
// Custom "per-page" breakpoints.
72-
const ResponsiveBreakpoints(breakpoints: [
73-
Breakpoint(start: 0, end: 480, name: MOBILE),
74-
Breakpoint(start: 481, end: 1200, name: TABLET),
75-
Breakpoint(
76-
start: 1201, end: double.infinity, name: DESKTOP),
77-
], child: PostPage()),
78-
TypographyPage.name => const TypographyPage(),
79-
_ => const SizedBox.shrink(),
80-
}),
63+
switch (pathName) {
64+
'/' || ListPage.name => const ListPage(),
65+
PostPage.name =>
66+
// Custom "per-page" breakpoints.
67+
const ResponsiveBreakpoints(breakpoints: [
68+
Breakpoint(start: 0, end: 480, name: MOBILE),
69+
Breakpoint(start: 481, end: 1200, name: TABLET),
70+
Breakpoint(start: 1201, end: double.infinity, name: DESKTOP),
71+
], child: PostPage()),
72+
TypographyPage.name => const TypographyPage(),
73+
_ => const SizedBox.shrink(),
74+
},
8175
);
8276
});
8377
}

‎lib/pages/page_list.dart

Lines changed: 45 additions & 35 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:responsive_framework/responsive_framework.dart';
34

45
// TODO Replace with object model.
56
const String listItemTitleText = "A BETTER BLOG FOR WRITING";
@@ -14,44 +15,53 @@ class ListPage extends StatelessWidget {
1415
@override
1516
Widget build(BuildContext context) {
1617
return Scaffold(
17-
backgroundColor: Colors.white,
18+
backgroundColor: const Color(0xFFF5F5F5),
1819
body: ListView(
19-
padding: const EdgeInsets.symmetric(horizontal: 32),
2020
children: [
21-
const MinimalMenuBar(),
22-
const ListItem(
23-
imageUrl: "assets/images/paper_flower_overhead_bw_w1080.jpg",
24-
title: listItemTitleText,
25-
description: listItemPreviewText),
26-
divider,
27-
const ListItem(
28-
imageUrl: "assets/images/iphone_cactus_tea_overhead_bw_w1080.jpg",
29-
title: listItemTitleText,
30-
description: listItemPreviewText),
31-
divider,
32-
const ListItem(
33-
imageUrl: "assets/images/typewriter_overhead_bw_w1080.jpg",
34-
title: listItemTitleText,
35-
description: listItemPreviewText),
36-
divider,
37-
const ListItem(
38-
imageUrl:
39-
"assets/images/coffee_paperclips_pencil_angled_bw_w1080.jpg",
40-
title: listItemTitleText,
41-
description: listItemPreviewText),
42-
divider,
43-
const ListItem(
44-
imageUrl:
45-
"assets/images/joy_note_coffee_eyeglasses_overhead_bw_w1080.jpg",
46-
title: listItemTitleText,
47-
description: listItemPreviewText),
48-
divider,
49-
Container(
50-
padding: const EdgeInsets.symmetric(vertical: 80),
51-
child: const ListNavigation(),
21+
...[
22+
const MinimalMenuBar(),
23+
const ListItem(
24+
imageUrl: "assets/images/paper_flower_overhead_bw_w1080.jpg",
25+
title: listItemTitleText,
26+
description: listItemPreviewText),
27+
divider,
28+
const ListItem(
29+
imageUrl:
30+
"assets/images/iphone_cactus_tea_overhead_bw_w1080.jpg",
31+
title: listItemTitleText,
32+
description: listItemPreviewText),
33+
divider,
34+
const ListItem(
35+
imageUrl: "assets/images/typewriter_overhead_bw_w1080.jpg",
36+
title: listItemTitleText,
37+
description: listItemPreviewText),
38+
divider,
39+
const ListItem(
40+
imageUrl:
41+
"assets/images/coffee_paperclips_pencil_angled_bw_w1080.jpg",
42+
title: listItemTitleText,
43+
description: listItemPreviewText),
44+
divider,
45+
const ListItem(
46+
imageUrl:
47+
"assets/images/joy_note_coffee_eyeglasses_overhead_bw_w1080.jpg",
48+
title: listItemTitleText,
49+
description: listItemPreviewText),
50+
divider,
51+
Container(
52+
padding: const EdgeInsets.symmetric(vertical: 80),
53+
child: const ListNavigation(),
54+
),
55+
divider,
56+
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+
),
5264
),
53-
divider,
54-
const Footer(),
5565
],
5666
),
5767
);

‎lib/pages/page_post.dart

Lines changed: 79 additions & 75 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:responsive_framework/responsive_framework.dart';
34

45
class PostPage extends StatelessWidget {
56
static const String name = 'post';
@@ -9,86 +10,89 @@ class PostPage extends StatelessWidget {
910
@override
1011
Widget build(BuildContext context) {
1112
return Scaffold(
12-
body: SingleChildScrollView(
13-
child: Container(
14-
margin: const EdgeInsets.symmetric(horizontal: 32),
15-
child: Column(
16-
children: [
17-
const MinimalMenuBar(),
18-
const ImageWrapper(
19-
image: "assets/images/mugs_side_bw_w1080.jpg",
20-
),
21-
Align(
22-
alignment: Alignment.centerLeft,
23-
child: Container(
24-
margin: marginBottom12,
25-
child: Text(
26-
"A BETTER BLOG FOR WRITING",
27-
style: headlineTextStyle,
28-
),
13+
backgroundColor: const Color(0xFFF5F5F5),
14+
body: ListView(
15+
children: [
16+
...[
17+
const MinimalMenuBar(),
18+
const ImageWrapper(
19+
image: "assets/images/mugs_side_bw_w1080.jpg",
20+
),
21+
Align(
22+
alignment: Alignment.centerLeft,
23+
child: Container(
24+
margin: marginBottom12,
25+
child: Text(
26+
"A BETTER BLOG FOR WRITING",
27+
style: headlineTextStyle,
2928
),
3029
),
31-
const Align(
32-
alignment: Alignment.centerLeft,
33-
child: TextBodySecondary(text: "Writing / Project"),
34-
),
35-
const Align(
36-
alignment: Alignment.centerLeft,
37-
child: TextBody(
38-
text:
39-
"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."),
40-
),
41-
const Align(
42-
alignment: Alignment.centerLeft,
43-
child: TextBody(
44-
text:
45-
"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."),
46-
),
47-
const Align(
48-
alignment: Alignment.centerLeft,
49-
child:
50-
TextHeadlineSecondary(text: "Secondary Headline Example"),
51-
),
52-
const Align(
53-
alignment: Alignment.centerLeft,
54-
child: TextBody(
55-
text:
56-
"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."),
57-
),
58-
const TextBlockquote(
30+
),
31+
const Align(
32+
alignment: Alignment.centerLeft,
33+
child: TextBodySecondary(text: "Writing / Project"),
34+
),
35+
const Align(
36+
alignment: Alignment.centerLeft,
37+
child: TextBody(
5938
text:
60-
"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."),
61-
const Align(
62-
alignment: Alignment.centerLeft,
63-
child: TextBody(
64-
text:
65-
"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."),
66-
),
67-
const Align(
68-
alignment: Alignment.centerLeft,
69-
child: TagWrapper(tags: [
70-
Tag(tag: "Writing"),
71-
Tag(tag: "Photography"),
72-
Tag(tag: "Development")
73-
]),
74-
),
75-
...authorSection(
76-
imageUrl: "assets/images/avatar_default.png",
77-
name: "Type Pages",
78-
bio:
79-
"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."),
80-
Container(
81-
padding: const EdgeInsets.symmetric(vertical: 80),
82-
child: const PostNavigation(),
83-
),
84-
divider,
85-
// Footer
86-
const Footer(),
87-
],
39+
"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."),
40+
),
41+
const Align(
42+
alignment: Alignment.centerLeft,
43+
child: TextBody(
44+
text:
45+
"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."),
46+
),
47+
const Align(
48+
alignment: Alignment.centerLeft,
49+
child: TextHeadlineSecondary(text: "Secondary Headline Example"),
50+
),
51+
const Align(
52+
alignment: Alignment.centerLeft,
53+
child: TextBody(
54+
text:
55+
"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."),
56+
),
57+
const TextBlockquote(
58+
text:
59+
"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."),
60+
const Align(
61+
alignment: Alignment.centerLeft,
62+
child: TextBody(
63+
text:
64+
"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."),
65+
),
66+
const Align(
67+
alignment: Alignment.centerLeft,
68+
child: TagWrapper(tags: [
69+
Tag(tag: "Writing"),
70+
Tag(tag: "Photography"),
71+
Tag(tag: "Development")
72+
]),
73+
),
74+
...authorSection(
75+
imageUrl: "assets/images/avatar_default.png",
76+
name: "Type Pages",
77+
bio:
78+
"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."),
79+
Container(
80+
padding: const EdgeInsets.symmetric(vertical: 80),
81+
child: const PostNavigation(),
82+
),
83+
divider,
84+
// Footer
85+
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+
),
8893
),
89-
),
94+
],
9095
),
91-
backgroundColor: Colors.white,
9296
);
9397
}
9498
}

0 commit comments

Comments
 (0)