marco/resume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implemented breaking points for varios screen sizes

Browse Source
This commit is contained in:
marco
2024-12-03 00:54:49 +01:00
parent 69675f42e2
commit 634ecce4d9
5 changed files with 185 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
lib/pages/landing_page.dart
View File

@@ -26,7 +26,7 @@ class _LandingPageState extends State<LandingPage> {
});
}
double _getPageWidth() {
double _getMainContentWidth() {
final width = MediaQuery.of(context).size.width;
// if (width < Breakpoints.sm) return width;
if (width < Breakpoints.md) return width * 0.95;
@@ -36,6 +36,9 @@ class _LandingPageState extends State<LandingPage> {
return width * 0.5;
}
double _getSidebarWidth() =>
(MediaQuery.of(context).size.width - _getMainContentWidth()) / 2;
@override
Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;
@@ -60,70 +63,140 @@ class _LandingPageState extends State<LandingPage> {
),
)
: SingleChildScrollView(
child: Stack(
children: [
Align(
alignment: Alignment.topLeft,
child: SizedBox(
width: (MediaQuery.of(context).size.width -
_getPageWidth()) /
2,
child: const Padding(
padding: EdgeInsets.symmetric(horizontal: 50),
child: Profile(),
),
),
),
Align(
alignment: Alignment.topRight,
child: SizedBox(
width: (MediaQuery.of(context).size.width -
_getPageWidth()) /
2,
child: screenWidth >= Breakpoints.xl2
? Padding(
child: LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth > Breakpoints.xl2) {
return Stack(
children: [
Align(
alignment: Alignment.topLeft,
child: SizedBox(
width: _getSidebarWidth(),
child: const Padding(
padding: EdgeInsets.symmetric(horizontal: 50),
child: Profile(),
),
),
),
Align(
alignment: Alignment.topRight,
child: SizedBox(
width: _getSidebarWidth(),
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 50),
child: ContentBox(
title: 'Fähigkeiten',
content: ContentProvider.skills,
contentType: ContentType.skills,
child: _getSideBar(),
),
),
),
Center(
child: SizedBox(
width: _getMainContentWidth(),
child: _getMainContent(),
),
),
],
);
} else if (constraints.maxWidth > Breakpoints.xl) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(
child: Column(
children: [
const Padding(
padding: EdgeInsets.symmetric(horizontal: 50),
child: Profile(),
),
)
: null,
),
),
Center(
child: SizedBox(
width: _getPageWidth(),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 50),
child: _getSideBar(),
),
],
),
),
SizedBox(
width: 900,
child: _getMainContent(),
),
const Padding(padding: EdgeInsets.only(right: 50)),
],
);
} else if (constraints.maxWidth > Breakpoints.lg) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 25),
child: Column(
children: [
const Profile(),
_getSideBar(),
],
),
),
),
SizedBox(
width: 650,
child: _getMainContent(),
),
const Padding(padding: EdgeInsets.only(right: 25)),
],
);
} else {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 25),
child: Column(
children: [
ContentBox(
title: 'Arbeitserfahrung',
content: ContentProvider.experience,
contentType: ContentType.experience,
),
const Padding(
padding: EdgeInsets.symmetric(vertical: 15)),
ContentBox(
title: 'Bildungsweg',
content: ContentProvider.education,
contentType: ContentType.education,
),
const Profile(),
const Padding(padding: EdgeInsets.only(bottom: 25)),
_getMainContent(),
const Padding(padding: EdgeInsets.only(bottom: 25)),
_getSideBar(),
],
),
),
),
],
);
}
},
),
),
);
}
}
_launchURL() async {
final Uri url = Uri.parse('https://git.skup.in/marco/resume');
if (await launchUrl(url)) {
throw Exception('Could not launch $url');
Widget _getSideBar() {
return ContentBox(
title: 'Fähigkeiten',
content: ContentProvider.skills,
contentType: ContentType.skills,
);
}
Widget _getMainContent() {
return Column(
children: [
ContentBox(
title: 'Arbeitserfahrung',
content: ContentProvider.experience,
contentType: ContentType.experience,
),
const Padding(padding: EdgeInsets.only(bottom: 25)),
ContentBox(
title: 'Bildungsweg',
content: ContentProvider.education,
contentType: ContentType.education,
),
],
);
}
}
void _launchURL() async {
final Uri url = Uri.parse('https://git.skup.in/marco/resume');
await launchUrl(url);
}

27
lib/widgets/content_list_tile.dart
View File

@@ -30,7 +30,10 @@ class ContentListTile extends StatelessWidget {
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
if (name != null) Text(name!),
if (name != null)
Text(
name!,
),
if (location != null) Text(', $location'),
if (title != null && Breakpoints.xl < width) Text(' - $title'),
],
@@ -39,8 +42,26 @@ class ContentListTile extends StatelessWidget {
],
),
titleAlignment: ListTileTitleAlignment.titleHeight,
subtitle: description != null ? Text(description!) : null,
trailing: startDate != null && endDate != null
subtitle: description != null
? Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Padding(padding: EdgeInsets.only(top: 8)),
if (startDate != null &&
endDate != null &&
Breakpoints.sm >= width)
Padding(
padding: const EdgeInsets.only(bottom: 8),
child: Text(
_getTimeString(startDate!, endDate!),
style: Theme.of(context).textTheme.labelSmall,
),
),
Text(description!),
],
)
: null,
trailing: startDate != null && endDate != null && Breakpoints.sm < width
? Text(_getTimeString(startDate!, endDate!))
: null,
);

1
lib/widgets/content_widget.dart
View File

@@ -27,6 +27,7 @@ class ContentBox extends StatelessWidget {
title,
style: Theme.of(context).textTheme.headlineMedium,
),
const Padding(padding: EdgeInsets.only(bottom: 8)),
ListView.builder(
shrinkWrap: true,
itemCount: content.length,

58
lib/widgets/profile.dart
View File

@@ -6,33 +6,39 @@ class Profile extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
children: [
Container(
constraints: const BoxConstraints(maxWidth: 200),
child: ClipRRect(
borderRadius: BorderRadius.circular(180),
child: Image.asset('assets/profile.jpg'),
child: SizedBox(
width: double.infinity,
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
children: [
Container(
constraints: const BoxConstraints(maxWidth: 200),
child: ClipRRect(
borderRadius: BorderRadius.circular(180),
child: Image.asset('assets/profile.jpg'),
),
),
),
const Padding(padding: EdgeInsets.symmetric(vertical: 5)),
Text(
'Marco Skupin',
style: Theme.of(context).textTheme.displayMedium,
),
const Padding(padding: EdgeInsets.symmetric(vertical: 5)),
Text(
'Master of Science',
style: Theme.of(context).textTheme.titleLarge,
),
const Padding(padding: EdgeInsets.symmetric(vertical: 5)),
Text(
'marco@skup.in',
style: Theme.of(context).textTheme.bodyMedium,
),
],
const Padding(padding: EdgeInsets.symmetric(vertical: 5)),
Text(
'Marco Skupin',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.displayMedium,
),
const Padding(padding: EdgeInsets.symmetric(vertical: 5)),
Text(
'Master of Science',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.titleLarge,
),
const Padding(padding: EdgeInsets.symmetric(vertical: 5)),
Text(
'marco@skup.in',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyMedium,
),
],
),
),
),
);

1
lib/widgets/skill_list_tile.dart
View File

@@ -17,6 +17,7 @@ class SkillListTile extends StatelessWidget {
title: Row(
children: [
Expanded(flex: 2, child: Text(name)),
const Padding(padding: EdgeInsets.only(bottom: 8)),
if (percentage != null)
Expanded(
flex: 5,