design: update lottery_output UI (#10)

ThomasDevApps · Apr 27, 2024 · 0c32537 · 0c32537
1 parent c880054
commit 0c32537
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 46 deletions.
diff --git a/.github/workflows/testing.yml b/.github/workflows/testing.yml
@@ -7,9 +7,9 @@ name: testing
 
 on:
   push:
-    branches: ["main"]
+    branches: [ "main" ]
   pull_request:
-    branches: [ "main", "dev" ]
+    branches: [ "main" ]
 
 jobs:
   test-flutter:

diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -137,7 +137,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.0.9"
+    version: "0.0.10"
   matcher:
     dependency: transitive
     description:

diff --git a/lib/src/view/items/lottery_number_item.dart b/lib/src/view/items/lottery_number_item.dart
@@ -40,6 +40,7 @@ class LotteryNumberItem extends StatelessWidget {
               style: TextStyle(
                 fontSize: 18,
                 color: decoration.foregroundColor,
+                fontWeight: FontWeight.bold,
               ),
             ),
           ),

diff --git a/lib/src/view/widgets/lottery_output.dart b/lib/src/view/widgets/lottery_output.dart
@@ -32,7 +32,7 @@ class LotteryOutputsDecoration {
     this.constraints = const BoxConstraints(minWidth: 250),
     this.borderRadius,
     this.crossAxisCount = 5,
-    this.childAspectRatio = 1 / 1.4,
+    this.childAspectRatio = 1 / 1.25,
   });
 }
 
@@ -99,7 +99,7 @@ class LotteryOutputs extends StatelessWidget {
                         behavior: ScrollConfiguration.of(context).copyWith(
                           scrollbars: false,
                         ),
-                        child: _OutputsGridView(
+                        child: _OutputsWrap(
                           scrollController: scrollController,
                           outputsSorted: outputSorted,
                           decoration: decoration,
@@ -118,59 +118,77 @@ class LotteryOutputs extends StatelessWidget {
 }
 
 /// Widget to display [outputsSorted] in the [GridView].
-class _OutputsGridView extends StatelessWidget {
+class _OutputsWrap extends StatelessWidget {
   final ScrollController scrollController;
   final Map<int, int> outputsSorted;
   final LotteryOutputsDecoration decoration;
 
-  const _OutputsGridView({
+  const _OutputsWrap({
     required this.scrollController,
     required this.outputsSorted,
     required this.decoration,
   });
 
   @override
   Widget build(BuildContext context) {
-    return GridView.builder(
+    return SingleChildScrollView(
       controller: scrollController,
-      itemCount: outputsSorted.length,
-      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-        crossAxisCount: decoration.crossAxisCount,
-        childAspectRatio: decoration.childAspectRatio,
-      ),
-      itemBuilder: (context, index) => Card(
-        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
-        color: decoration.primary.shade600,
-        elevation: 0,
-        child: Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 10),
-          child: FittedBox(
-            fit: BoxFit.scaleDown,
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                Text(
-                  outputsSorted.keys.elementAt(index).toString(),
-                  style: TextStyle(
-                    color: decoration.foregroundColor,
-                    fontWeight: FontWeight.w400,
-                    fontSize: 18,
-                  ),
-                ),
-                const SizedBox(height: 5),
-                Text(
-                  '(${outputsSorted.values.elementAt(index).toString()}x)',
-                  style: TextStyle(
-                    color: (decoration.foregroundColor ??
-                            Theme.of(context).colorScheme.onBackground)
-                        .withOpacity(0.75),
-                    fontSize: 13,
+      child: Wrap(
+        spacing: 4.0,
+        runSpacing: 12.0,
+        children: [
+          ...outputsSorted.keys.map((key) {
+            final value = outputsSorted[key]!;
+            return LayoutBuilder(
+              builder: (context, constraint) {
+                return ConstrainedBox(
+                  constraints: BoxConstraints(
+                    minWidth: 80,
+                    maxWidth: (constraint.maxWidth / 4) - 4,
+                  ).normalize(),
+                  child: AspectRatio(
+                    aspectRatio: 1 / 1.15,
+                    child: Card(
+                      shape: RoundedRectangleBorder(
+                        borderRadius: BorderRadius.circular(16),
+                      ),
+                      color: decoration.primary.shade600,
+                      elevation: 0,
+                      child: Padding(
+                        padding: const EdgeInsets.symmetric(
+                          horizontal: 8,
+                          vertical: 8,
+                        ),
+                        child: Column(
+                          mainAxisAlignment: MainAxisAlignment.center,
+                          children: [
+                            Text(
+                              key.toString(),
+                              style: TextStyle(
+                                color: decoration.foregroundColor,
+                                fontWeight: FontWeight.bold,
+                                fontSize: 18,
+                              ),
+                            ),
+                            const SizedBox(height: 5),
+                            Text(
+                              '(${value}x)',
+                              style: TextStyle(
+                                color: (decoration.foregroundColor ??
+                                    Theme.of(context).colorScheme.onBackground),
+                                fontSize: 13,
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
+                    ),
                   ),
-                ),
-              ],
-            ),
-          ),
-        ),
+                );
+              },
+            );
+          }),
+        ],
       ),
     );
   }

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,6 +1,6 @@
 name: lottery
 description: "A new Flutter project."
-version: 0.0.9
+version: 0.0.10
 
 environment:
   sdk: '>=3.3.3 <4.0.0'