Refactoring

lib/pages/landing_page.dart

@@ -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,9 +36,136 @@ class _LandingPageState extends State<LandingPage> {
     return width * 0.5;
   }
 
+  double _getSidebarWidth() =>
+      (MediaQuery.of(context).size.width - _getMainContentWidth()) / 2;
+
+  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,
+        ),
+      ],
+    );
+  }
+
+  Widget _buildLayout(BuildContext context, BoxConstraints 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: _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(),
+                ),
+                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: [
+            const Profile(),
+            const Padding(padding: EdgeInsets.only(bottom: 25)),
+            _getMainContent(),
+            const Padding(padding: EdgeInsets.only(bottom: 25)),
+            _getSideBar(),
+          ],
+        ),
+      );
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
-    final screenWidth = MediaQuery.of(context).size.width;
     return Scaffold(
       appBar: AppBar(
         title: const Text('Landing'),
@@ -47,7 +174,6 @@ class _LandingPageState extends State<LandingPage> {
         ],
       ),
       body: !loadingDone
-          // While the content is being loaded from JSON, show a LoadingIndicator
           ? const Center(
               child: Column(
                 mainAxisSize: MainAxisSize.max,
@@ -60,70 +186,15 @@ 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(
-                              padding:
-                                  const EdgeInsets.symmetric(horizontal: 50),
-                              child: ContentBox(
-                                title: 'Fähigkeiten',
-                                content: ContentProvider.skills,
-                                contentType: ContentType.skills,
-                              ),
-                            )
-                          : null,
-                    ),
-                  ),
-                  Center(
-                    child: SizedBox(
-                      width: _getPageWidth(),
-                      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,
-                          ),
-                        ],
-                      ),
-                    ),
-                  ),
-                ],
+              child: LayoutBuilder(
+                builder: _buildLayout,
               ),
             ),
     );
   }
 }
 
-_launchURL() async {
+void _launchURL() async {
   final Uri url = Uri.parse('https://git.skup.in/marco/resume');
-  if (await launchUrl(url)) {
-    throw Exception('Could not launch $url');
-  }
+  await launchUrl(url);
 }

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

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,

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,
+              ),
+            ],
+          ),
         ),
       ),
     );

lib/widgets/skill_list_tile.dart

@@ -17,11 +17,15 @@ 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,
-              child: LinearProgressIndicator(
-                value: double.parse(percentage!) / 100,
+              child: Padding(
+                padding: const EdgeInsets.only(left: 8.0),
+                child: LinearProgressIndicator(
+                  value: double.parse(percentage!) / 100,
+                ),
               ),
             ),
         ],