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; final width = MediaQuery.of(context).size.width;
// if (width < Breakpoints.sm) return width; // if (width < Breakpoints.sm) return width;
if (width < Breakpoints.md) return width * 0.95; if (width < Breakpoints.md) return width * 0.95;
@@ -36,6 +36,9 @@ class _LandingPageState extends State<LandingPage> {
return width * 0.5; return width * 0.5;
} }
double _getSidebarWidth() =>
(MediaQuery.of(context).size.width - _getMainContentWidth()) / 2;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width; final screenWidth = MediaQuery.of(context).size.width;
@@ -60,70 +63,140 @@ class _LandingPageState extends State<LandingPage> {
), ),
) )
: SingleChildScrollView( : SingleChildScrollView(
child: Stack( child: LayoutBuilder(
children: [ builder: (context, constraints) {
Align( if (constraints.maxWidth > Breakpoints.xl2) {
alignment: Alignment.topLeft, return Stack(
child: SizedBox( children: [
width: (MediaQuery.of(context).size.width - Align(
_getPageWidth()) / alignment: Alignment.topLeft,
2, child: SizedBox(
child: const Padding( width: _getSidebarWidth(),
padding: EdgeInsets.symmetric(horizontal: 50), child: const Padding(
child: Profile(), padding: EdgeInsets.symmetric(horizontal: 50),
), child: Profile(),
), ),
), ),
Align( ),
alignment: Alignment.topRight, Align(
child: SizedBox( alignment: Alignment.topRight,
width: (MediaQuery.of(context).size.width - child: SizedBox(
_getPageWidth()) / width: _getSidebarWidth(),
2, child: Padding(
child: screenWidth >= Breakpoints.xl2
? Padding(
padding: padding:
const EdgeInsets.symmetric(horizontal: 50), const EdgeInsets.symmetric(horizontal: 50),
child: ContentBox( child: _getSideBar(),
title: 'Fähigkeiten', ),
content: ContentProvider.skills, ),
contentType: ContentType.skills, ),
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(),
), ),
) Padding(
: null, padding:
), const EdgeInsets.symmetric(horizontal: 50),
), child: _getSideBar(),
Center( ),
child: SizedBox( ],
width: _getPageWidth(), ),
),
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( child: Column(
children: [ children: [
ContentBox( const Profile(),
title: 'Arbeitserfahrung', const Padding(padding: EdgeInsets.only(bottom: 25)),
content: ContentProvider.experience, _getMainContent(),
contentType: ContentType.experience, const Padding(padding: EdgeInsets.only(bottom: 25)),
), _getSideBar(),
const Padding(
padding: EdgeInsets.symmetric(vertical: 15)),
ContentBox(
title: 'Bildungsweg',
content: ContentProvider.education,
contentType: ContentType.education,
),
], ],
), ),
), );
), }
], },
), ),
), ),
); );
} }
}
_launchURL() async { Widget _getSideBar() {
final Uri url = Uri.parse('https://git.skup.in/marco/resume'); return ContentBox(
if (await launchUrl(url)) { title: 'Fähigkeiten',
throw Exception('Could not launch $url'); 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( Row(
mainAxisAlignment: MainAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start,
children: [ children: [
if (name != null) Text(name!), if (name != null)
Text(
name!,
),
if (location != null) Text(', $location'), if (location != null) Text(', $location'),
if (title != null && Breakpoints.xl < width) Text(' - $title'), if (title != null && Breakpoints.xl < width) Text(' - $title'),
], ],
@@ -39,8 +42,26 @@ class ContentListTile extends StatelessWidget {
], ],
), ),
titleAlignment: ListTileTitleAlignment.titleHeight, titleAlignment: ListTileTitleAlignment.titleHeight,
subtitle: description != null ? Text(description!) : null, subtitle: description != null
trailing: startDate != null && endDate != 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!)) ? Text(_getTimeString(startDate!, endDate!))
: null, : null,
); );

1
lib/widgets/content_widget.dart
View File

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

58
lib/widgets/profile.dart
View File

@@ -6,33 +6,39 @@ class Profile extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Card( return Card(
child: Padding( child: SizedBox(
padding: const EdgeInsets.all(20), width: double.infinity,
child: Column( child: Padding(
children: [ padding: const EdgeInsets.all(20),
Container( child: Column(
constraints: const BoxConstraints(maxWidth: 200), children: [
child: ClipRRect( Container(
borderRadius: BorderRadius.circular(180), constraints: const BoxConstraints(maxWidth: 200),
child: Image.asset('assets/profile.jpg'), child: ClipRRect(
borderRadius: BorderRadius.circular(180),
child: Image.asset('assets/profile.jpg'),
),
), ),
), const Padding(padding: EdgeInsets.symmetric(vertical: 5)),
const Padding(padding: EdgeInsets.symmetric(vertical: 5)), Text(
Text( 'Marco Skupin',
'Marco Skupin', textAlign: TextAlign.center,
style: Theme.of(context).textTheme.displayMedium, style: Theme.of(context).textTheme.displayMedium,
), ),
const Padding(padding: EdgeInsets.symmetric(vertical: 5)), const Padding(padding: EdgeInsets.symmetric(vertical: 5)),
Text( Text(
'Master of Science', 'Master of Science',
style: Theme.of(context).textTheme.titleLarge, textAlign: TextAlign.center,
), style: Theme.of(context).textTheme.titleLarge,
const Padding(padding: EdgeInsets.symmetric(vertical: 5)), ),
Text( const Padding(padding: EdgeInsets.symmetric(vertical: 5)),
'marco@skup.in', Text(
style: Theme.of(context).textTheme.bodyMedium, '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( title: Row(
children: [ children: [
Expanded(flex: 2, child: Text(name)), Expanded(flex: 2, child: Text(name)),
const Padding(padding: EdgeInsets.only(bottom: 8)),
if (percentage != null) if (percentage != null)
Expanded( Expanded(
flex: 5, flex: 5,