Skip to content

Commit 90498ee

Browse files
david072david072
committed
feat: responsivity for tablet and smartphone sizes
1 parent 5c2b2a0 commit 90498ee

File tree

2 files changed

+275
-174
lines changed

2 files changed

+275
-174
lines changed

‎lib/pages/home_page.dart‎

Lines changed: 145 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -6,96 +6,162 @@ import 'package:portfolio/pages/projects/cofence_page.dart';
66
import 'package:portfolio/pages/projects/fencing_tableau_page.dart';
77
import 'package:portfolio/pages/projects/funcially_page.dart';
88

9+
const double mediumScreenWidth = 1000;
10+
// TODO: properly set this
11+
const double largeScreenWidth = 2000;
12+
913
final birthday = DateTime(2007, 02, 18);
1014

15+
class ResponsiveContent extends StatelessWidget {
16+
const ResponsiveContent({
17+
super.key,
18+
required this.header,
19+
required this.content,
20+
});
21+
22+
final Widget header;
23+
final Widget content;
24+
25+
@override
26+
Widget build(BuildContext context) {
27+
double width = MediaQuery.sizeOf(context).width;
28+
29+
Widget body;
30+
if (width < mediumScreenWidth) {
31+
body = SingleChildScrollView(
32+
child: Column(
33+
crossAxisAlignment: CrossAxisAlignment.start,
34+
children: [
35+
header,
36+
const Divider(height: 50, thickness: 4),
37+
content,
38+
],
39+
),
40+
);
41+
} else if (width >= mediumScreenWidth && width <= largeScreenWidth) {
42+
body = Row(
43+
children: [
44+
Expanded(child: header),
45+
const VerticalDivider(width: 50),
46+
Expanded(child: SingleChildScrollView(child: content)),
47+
],
48+
);
49+
} else {
50+
throw "todo";
51+
}
52+
53+
return Scaffold(
54+
body: SafeArea(
55+
child: Padding(
56+
padding: const EdgeInsets.all(8),
57+
child: body,
58+
),
59+
),
60+
);
61+
}
62+
}
63+
1164
class HomePage extends StatelessWidget {
1265
const HomePage({super.key});
1366

67+
@override
68+
Widget build(BuildContext context) {
69+
return const ResponsiveContent(
70+
header: _HomePageHeader(),
71+
content: _ProjectsList(),
72+
);
73+
}
74+
}
75+
76+
class _HomePageHeader extends StatelessWidget {
77+
const _HomePageHeader();
78+
1479
@override
1580
Widget build(BuildContext context) {
1681
int age = (DateTime.now().difference(birthday).inDays / 365).floor();
1782

18-
return Scaffold(
19-
body: SafeArea(
20-
child: SingleChildScrollView(
21-
child: Padding(
22-
padding: const EdgeInsets.all(8),
23-
child: Column(
24-
crossAxisAlignment: CrossAxisAlignment.start,
25-
children: [
26-
Text(
27-
"Hello, I'm",
28-
style: Theme.of(context).textTheme.titleLarge,
29-
),
30-
const Text(
31-
"David Ganz",
32-
style: TextStyle(
33-
fontSize: 100,
34-
fontWeight: FontWeight.w900,
35-
height: 1,
36-
),
37-
),
38-
const SizedBox(height: 25),
39-
InfoCard(
40-
color: Colors.blue[800]!,
41-
title: "Summary",
42-
content: Column(
43-
crossAxisAlignment: CrossAxisAlignment.start,
44-
mainAxisSize: MainAxisSize.min,
45-
children: [
46-
const ListTile(
47-
title: Text("Aspiring software engineer from Germany"),
48-
),
49-
ListTile(title: Text("$age years old")),
50-
],
51-
),
52-
),
53-
const Divider(height: 50, thickness: 4),
54-
Text(
55-
"My Projects",
56-
style: Theme.of(context).textTheme.headlineLarge,
57-
),
58-
const SizedBox(height: 20),
59-
GridView.count(
60-
shrinkWrap: true,
61-
physics: const NeverScrollableScrollPhysics(),
62-
crossAxisSpacing: 8,
63-
mainAxisSpacing: 8,
64-
crossAxisCount: 2,
65-
children: [
66-
_ProjectCard(
67-
backgroundImage: "assets/fencing_tableau_thumbnail.png",
68-
name: "Fencing Tableau",
69-
onTap: () => Navigator.push(
70-
context,
71-
MaterialPageRoute(
72-
builder: (_) => const FencingTableauPage()),
73-
),
74-
),
75-
_ProjectCard(
76-
backgroundImage: "assets/funcially_thumbnail.png",
77-
name: "Funcially",
78-
onTap: () => Navigator.push(
79-
context,
80-
MaterialPageRoute(
81-
builder: (_) => const FunciallyPage()),
82-
),
83-
),
84-
_ProjectCard(
85-
backgroundImage: "assets/cofence_thumbnail.png",
86-
name: "Cofence",
87-
onTap: () => Navigator.push(
88-
context,
89-
MaterialPageRoute(builder: (_) => const CofencePage()),
90-
),
91-
),
92-
],
93-
),
94-
],
95-
),
83+
return Column(
84+
crossAxisAlignment: CrossAxisAlignment.start,
85+
children: [
86+
Text(
87+
"Hello, I'm",
88+
style: Theme.of(context).textTheme.titleLarge,
89+
),
90+
const Text(
91+
"David Ganz",
92+
style: TextStyle(
93+
fontSize: 100,
94+
fontWeight: FontWeight.w900,
95+
height: 1,
9696
),
9797
),
98-
),
98+
const SizedBox(height: 25),
99+
InfoCard(
100+
color: Colors.blue[800]!,
101+
title: "Summary",
102+
content: Column(
103+
crossAxisAlignment: CrossAxisAlignment.start,
104+
mainAxisSize: MainAxisSize.min,
105+
children: [
106+
const ListTile(
107+
title: Text("Aspiring software engineer from Germany"),
108+
),
109+
ListTile(title: Text("$age years old")),
110+
],
111+
),
112+
)
113+
],
114+
);
115+
}
116+
}
117+
118+
class _ProjectsList extends StatelessWidget {
119+
const _ProjectsList();
120+
121+
@override
122+
Widget build(BuildContext context) {
123+
return Column(
124+
crossAxisAlignment: CrossAxisAlignment.start,
125+
children: [
126+
Text(
127+
"My Projects",
128+
style: Theme.of(context).textTheme.headlineLarge,
129+
),
130+
const SizedBox(height: 20),
131+
GridView.count(
132+
shrinkWrap: true,
133+
physics: const NeverScrollableScrollPhysics(),
134+
crossAxisSpacing: 8,
135+
mainAxisSpacing: 8,
136+
crossAxisCount: 2,
137+
children: [
138+
_ProjectCard(
139+
backgroundImage: "assets/fencing_tableau_thumbnail.png",
140+
name: "Fencing Tableau",
141+
onTap: () => Navigator.push(
142+
context,
143+
MaterialPageRoute(builder: (_) => const FencingTableauPage()),
144+
),
145+
),
146+
_ProjectCard(
147+
backgroundImage: "assets/funcially_thumbnail.png",
148+
name: "Funcially",
149+
onTap: () => Navigator.push(
150+
context,
151+
MaterialPageRoute(builder: (_) => const FunciallyPage()),
152+
),
153+
),
154+
_ProjectCard(
155+
backgroundImage: "assets/cofence_thumbnail.png",
156+
name: "Cofence",
157+
onTap: () => Navigator.push(
158+
context,
159+
MaterialPageRoute(builder: (_) => const CofencePage()),
160+
),
161+
),
162+
],
163+
),
164+
],
99165
);
100166
}
101167
}

0 commit comments

Comments
 (0)