Implemented breaking points for varios screen sizes
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user