Implemented breaking points for varios screen sizes

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,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,14 +63,15 @@ class _LandingPageState extends State<LandingPage> {
               ),
             )
           : SingleChildScrollView(
-              child: Stack(
+              child: LayoutBuilder(
+                builder: (context, constraints) {
+                  if (constraints.maxWidth > Breakpoints.xl2) {
+                    return Stack(
                       children: [
                         Align(
                           alignment: Alignment.topLeft,
                           child: SizedBox(
-                      width: (MediaQuery.of(context).size.width -
+                            width: _getSidebarWidth(),
-                              _getPageWidth()) /
-                          2,
                             child: const Padding(
                               padding: EdgeInsets.symmetric(horizontal: 50),
                               child: Profile(),
@@ -77,53 +81,122 @@ class _LandingPageState extends State<LandingPage> {
                         Align(
                           alignment: Alignment.topRight,
                           child: SizedBox(
-                      width: (MediaQuery.of(context).size.width -
+                            width: _getSidebarWidth(),
-                              _getPageWidth()) /
+                            child: Padding(
-                          2,
-                      child: screenWidth >= Breakpoints.xl2
-                          ? Padding(
                               padding:
                                   const EdgeInsets.symmetric(horizontal: 50),
-                              child: ContentBox(
+                              child: _getSideBar(),
-                                title: 'Fähigkeiten',
-                                content: ContentProvider.skills,
-                                contentType: ContentType.skills,
                             ),
-                            )
-                          : null,
                           ),
                         ),
                         Center(
                           child: SizedBox(
-                      width: _getPageWidth(),
+                            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(),
+                        ],
+                      ),
+                    );
+                  }
+                },
+              ),
+            ),
+    );
+  }
+
+  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(
+        const Padding(padding: EdgeInsets.only(bottom: 25)),
-                              padding: EdgeInsets.symmetric(vertical: 15)),
         ContentBox(
           title: 'Bildungsweg',
           content: ContentProvider.education,
           contentType: ContentType.education,
         ),
       ],
-                      ),
-                    ),
-                  ),
-                ],
-              ),
-            ),
     );
   }
 }
 
-_launchURL() async {
+void _launchURL() async {
   final Uri url = Uri.parse('https://git.skup.in/marco/resume');
-  if (await launchUrl(url)) {
+  await launchUrl(url);
-    throw Exception('Could not launch $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,
+      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!))
           : 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,6 +6,8 @@ class Profile extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Card(
+      child: SizedBox(
+        width: double.infinity,
         child: Padding(
           padding: const EdgeInsets.all(20),
           child: Column(
@@ -20,21 +22,25 @@ class Profile extends StatelessWidget {
               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,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,