From 634ecce4d93931fcecb5459a93ee14d5a1bb5d87 Mon Sep 17 00:00:00 2001 From: marco Date: Tue, 3 Dec 2024 00:54:49 +0100 Subject: [PATCH] Implemented breaking points for varios screen sizes --- lib/pages/landing_page.dart | 181 ++++++++++++++++++++--------- lib/widgets/content_list_tile.dart | 27 ++++- lib/widgets/content_widget.dart | 1 + lib/widgets/profile.dart | 58 ++++----- lib/widgets/skill_list_tile.dart | 1 + 5 files changed, 185 insertions(+), 83 deletions(-) diff --git a/lib/pages/landing_page.dart b/lib/pages/landing_page.dart index 6f84227..36d914d 100644 --- a/lib/pages/landing_page.dart +++ b/lib/pages/landing_page.dart @@ -26,7 +26,7 @@ class _LandingPageState extends State { }); } - 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 { 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 { ), ) : 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); +} diff --git a/lib/widgets/content_list_tile.dart b/lib/widgets/content_list_tile.dart index 63da8d5..fb0a9cc 100644 --- a/lib/widgets/content_list_tile.dart +++ b/lib/widgets/content_list_tile.dart @@ -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, ); diff --git a/lib/widgets/content_widget.dart b/lib/widgets/content_widget.dart index ffa4026..ad07269 100644 --- a/lib/widgets/content_widget.dart +++ b/lib/widgets/content_widget.dart @@ -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, diff --git a/lib/widgets/profile.dart b/lib/widgets/profile.dart index 3b07d93..1404f8a 100644 --- a/lib/widgets/profile.dart +++ b/lib/widgets/profile.dart @@ -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, + ), + ], + ), ), ), ); diff --git a/lib/widgets/skill_list_tile.dart b/lib/widgets/skill_list_tile.dart index 04d15ba..3cdd443 100644 --- a/lib/widgets/skill_list_tile.dart +++ b/lib/widgets/skill_list_tile.dart @@ -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,