Implemented breaking points for varios screen sizes

This commit is contained in:
2024-12-03 00:54:49 +01:00
parent 69675f42e2
commit 634ecce4d9
5 changed files with 185 additions and 83 deletions

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);
}