feat: Limit width of overview and edit screens (closes #20)

Oberhauser-Dev · Dec 23, 2023 · d95339c · d95339c
1 parent 27f3c3b
commit d95339c
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 72 deletions.
diff --git a/wrestling_scoreboard_client/lib/ui/components/edit.dart b/wrestling_scoreboard_client/lib/ui/components/edit.dart
@@ -2,6 +2,7 @@ import 'dart:developer' as developer;
 
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
+import 'package:wrestling_scoreboard_client/ui/components/responsive_container.dart';
 import 'package:wrestling_scoreboard_client/util/network/remote/rest.dart';
 
 class EditWidget extends StatelessWidget {
@@ -71,15 +72,8 @@ class EditWidget extends StatelessWidget {
               ))
         ],
       ),
-      body: SingleChildScrollView(
-        child: Center(
-          child: Container(
-            constraints: const BoxConstraints(maxWidth: 1140),
-            child: Column(
-              children: items,
-            ),
-          ),
-        ),
+      body: ResponsiveColumn(
+        children: items,
       ),
     );
   }

diff --git a/wrestling_scoreboard_client/lib/ui/components/grouped_list.dart b/wrestling_scoreboard_client/lib/ui/components/grouped_list.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:wrestling_scoreboard_client/ui/components/font.dart';
+import 'package:wrestling_scoreboard_client/ui/components/responsive_container.dart';
 
 /// The base class for the different types of items the list can contain.
 abstract class ListItem {
@@ -83,18 +84,20 @@ class GroupedList extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ListView.builder(
-      shrinkWrap: true,
-      itemCount: items.length,
-      itemBuilder: (context, index) {
-        final item = items[index];
-        return Column(
-          children: [
-            if (index != 0) const Divider(indent: 16, endIndent: 16),
-            item,
-          ],
-        );
-      },
+    return ResponsiveContainer(
+      child: ListView.builder(
+        shrinkWrap: true,
+        itemCount: items.length,
+        itemBuilder: (context, index) {
+          final item = items[index];
+          return Column(
+            children: [
+              if (index != 0) const Divider(indent: 16, endIndent: 16),
+              item,
+            ],
+          );
+        },
+      ),
     );
   }
 }
diff --git a/wrestling_scoreboard_client/lib/ui/components/responsive_container.dart b/wrestling_scoreboard_client/lib/ui/components/responsive_container.dart
@@ -17,8 +17,8 @@ class ResponsiveContainer extends StatelessWidget {
     );
   }
 
-  _calculateContainerSize(Size screenSize) {
-    return screenSize.width < 768 ? screenSize.width : 768.0;
+  double _calculateContainerSize(Size screenSize) {
+    return screenSize.width < 768 ? screenSize.width : 768;
   }
 }
 

diff --git a/wrestling_scoreboard_client/lib/ui/home/home.dart b/wrestling_scoreboard_client/lib/ui/home/home.dart
@@ -4,6 +4,7 @@ import 'package:go_router/go_router.dart';
 import 'package:wrestling_scoreboard_client/ui/components/consumer.dart';
 import 'package:wrestling_scoreboard_client/ui/components/exception.dart';
 import 'package:wrestling_scoreboard_client/ui/components/grouped_list.dart';
+import 'package:wrestling_scoreboard_client/ui/components/responsive_container.dart';
 import 'package:wrestling_scoreboard_client/ui/edit/club_edit.dart';
 import 'package:wrestling_scoreboard_client/ui/edit/league_edit.dart';
 import 'package:wrestling_scoreboard_client/ui/overview/club_overview.dart';
@@ -85,60 +86,64 @@ class HomeState extends State<Home> {
         ),
         body: TabBarView(
           children: [
-            ManyConsumer<Club, Null>(
-              builder: (BuildContext context, List<Club> clubs) {
-                return ListGroup(
-                  header: HeadingItem(
-                    title: localizations.clubs,
-                    trailing: IconButton(
-                      icon: const Icon(Icons.add),
-                      onPressed: () =>
-                          Navigator.push(context, MaterialPageRoute(builder: (context) => const ClubEdit())),
+            ResponsiveScrollView(
+              child: ManyConsumer<Club, Null>(
+                builder: (BuildContext context, List<Club> clubs) {
+                  return ListGroup(
+                    header: HeadingItem(
+                      title: localizations.clubs,
+                      trailing: IconButton(
+                        icon: const Icon(Icons.add),
+                        onPressed: () =>
+                            Navigator.push(context, MaterialPageRoute(builder: (context) => const ClubEdit())),
+                      ),
                     ),
-                  ),
-                  items: clubs.map(
-                    (e) => SingleConsumer<Club>(
-                      id: e.id!,
-                      initialData: e,
-                      builder: (context, data) {
-                        if (data == null) return ExceptionWidget(localizations.notFoundException);
-                        return ContentItem(
-                          title: data.name,
-                          icon: Icons.foundation,
-                          onTap: () => handleSelectedClub(data, context),
-                        );
-                      },
+                    items: clubs.map(
+                      (e) => SingleConsumer<Club>(
+                        id: e.id!,
+                        initialData: e,
+                        builder: (context, data) {
+                          if (data == null) return ExceptionWidget(localizations.notFoundException);
+                          return ContentItem(
+                            title: data.name,
+                            icon: Icons.foundation,
+                            onTap: () => handleSelectedClub(data, context),
+                          );
+                        },
+                      ),
                     ),
-                  ),
-                );
-              },
+                  );
+                },
+              ),
             ),
-            ManyConsumer<League, Null>(
-              builder: (BuildContext context, List<League> leagues) {
-                return ListGroup(
-                  header: HeadingItem(
-                    title: localizations.leagues,
-                    trailing: IconButton(
-                      icon: const Icon(Icons.add),
-                      onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (context) => LeagueEdit())),
+            ResponsiveScrollView(
+              child: ManyConsumer<League, Null>(
+                builder: (BuildContext context, List<League> leagues) {
+                  return ListGroup(
+                    header: HeadingItem(
+                      title: localizations.leagues,
+                      trailing: IconButton(
+                        icon: const Icon(Icons.add),
+                        onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (context) => LeagueEdit())),
+                      ),
                     ),
-                  ),
-                  items: leagues.map(
-                    (e) => SingleConsumer<League>(
-                      id: e.id!,
-                      initialData: e,
-                      builder: (context, data) {
-                        if (data == null) return ExceptionWidget(localizations.notFoundException);
-                        return ContentItem(
-                          title: data.name,
-                          icon: Icons.emoji_events,
-                          onTap: () => handleSelectedLeague(data, context),
-                        );
-                      },
+                    items: leagues.map(
+                      (e) => SingleConsumer<League>(
+                        id: e.id!,
+                        initialData: e,
+                        builder: (context, data) {
+                          if (data == null) return ExceptionWidget(localizations.notFoundException);
+                          return ContentItem(
+                            title: data.name,
+                            icon: Icons.emoji_events,
+                            onTap: () => handleSelectedLeague(data, context),
+                          );
+                        },
+                      ),
                     ),
-                  ),
-                );
-              },
+                  );
+                },
+              ),
             ),
           ],
         ),