chore: improvements + update design (#13)

• Improvements • Update design of cards and LotteryLastGridDrawn
ThomasDevApps · Apr 29, 2024 · 825a32f · 825a32f
1 parent 65965b8
commit 825a32f
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 20 deletions.
diff --git a/example/assets/preview.png b/example/assets/preview.png
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -23,7 +23,14 @@ class MyApp extends StatelessWidget {
       title: 'Flutter Demo',
       theme: ThemeData.dark(
         useMaterial3: true,
-      ).copyWith(cardColor: Colors.grey.shade900),
+      ).copyWith(
+        cardColor: Colors.grey.shade900,
+        cardTheme: CardTheme(
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(24),
+          ),
+        ),
+      ),
       home: LotteryScreen(
         cardColor: Colors.grey.shade900,
         numberOutputs: LotteryOutputs(

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

diff --git a/lib/src/view/screens/lottery_screen.dart b/lib/src/view/screens/lottery_screen.dart
@@ -3,6 +3,9 @@ import 'package:lottery/lottery.dart';
 import 'package:lottery/src/core/constants/constants.dart';
 
 class LotteryScreen extends StatelessWidget {
+  /// Label of the lottery..
+  final String? label;
+
   /// Background color of the screen.
   final Color? backgroundColor;
 
@@ -29,6 +32,7 @@ class LotteryScreen extends StatelessWidget {
 
   const LotteryScreen({
     super.key,
+    this.label,
     this.backgroundColor,
     this.cardColor,
     required this.numberOutputs,
@@ -83,6 +87,11 @@ class LotteryScreen extends StatelessWidget {
                 child: SingleChildScrollView(
                   child: Column(
                     children: [
+                      Text(
+                        label ?? 'Lottery',
+                        style: Theme.of(context).textTheme.displaySmall,
+                      ),
+                      const SizedBox(height: 16),
                       LotteryLastGridDrawn(
                         numberDecoration: numberDecoration,
                         specialNumberDecoration: specialNumberDecoration,

diff --git a/lib/src/view/widgets/lottery_last_grid_drawn.dart b/lib/src/view/widgets/lottery_last_grid_drawn.dart
@@ -17,17 +17,32 @@ class LotteryLastGridDrawn extends StatelessWidget {
     this.cardColor,
   });
 
+  Radius _getRadius(BuildContext context) {
+    final shape = Theme.of(context).cardTheme.shape;
+    if (shape != null && shape is RoundedRectangleBorder) {
+      return shape.borderRadius.resolve(TextDirection.ltr).topRight;
+    } else {
+      return const Radius.circular(24);
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     final gridModel = Lottery().gridsFromCsv.first;
-    return Card(
-      color: cardColor,
-      child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            Row(
+    final radius = _getRadius(context);
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Card(
+          color: cardColor,
+          margin: EdgeInsets.zero,
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.vertical(top: radius),
+          ),
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+            child: Row(
+              mainAxisSize: MainAxisSize.min,
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
                 const Icon(Icons.info_outline_rounded),
@@ -38,15 +53,28 @@ class LotteryLastGridDrawn extends StatelessWidget {
                 ),
               ],
             ),
-            const SizedBox(height: 16),
-            GridItem(
+          ),
+        ),
+        Card(
+          margin: EdgeInsets.zero,
+          color: cardColor,
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.only(
+              topRight: radius,
+              bottomLeft: radius,
+              bottomRight: radius,
+            ),
+          ),
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
+            child: GridItem(
               gridModel: gridModel,
               numberDecoration: numberDecoration,
               specialNumberDecoration: specialNumberDecoration,
             ),
-          ],
+          ),
         ),
-      ),
+      ],
     );
   }
 }
diff --git a/lib/src/view/widgets/lottery_output.dart b/lib/src/view/widgets/lottery_output.dart
@@ -55,9 +55,10 @@ class LotteryOutputs extends StatelessWidget {
       width: decoration.width ?? MediaQuery.of(context).size.width / 5.5,
       child: Card(
         color: Theme.of(context).cardTheme.color ?? Theme.of(context).cardColor,
-        shape: RoundedRectangleBorder(
-          borderRadius: decoration.borderRadius ?? BorderRadius.circular(10),
-        ),
+        shape: Theme.of(context).cardTheme.shape ??
+            RoundedRectangleBorder(
+              borderRadius: BorderRadius.circular(24.0),
+            ),
         clipBehavior: Clip.hardEdge,
         child: Padding(
           padding: const EdgeInsets.only(left: 8.0),
@@ -78,8 +79,10 @@ class LotteryOutputs extends StatelessWidget {
                   padding: const EdgeInsets.only(right: 5.0),
                   child: RawScrollbar(
                     controller: scrollController,
-                    thumbVisibility: true,
-                    thumbColor: Colors.white,
+                    thumbColor: Theme.of(context)
+                        .colorScheme
+                        .onBackground
+                        .withOpacity(0.5),
                     radius: const Radius.circular(20),
                     child: Padding(
                       padding: const EdgeInsets.only(left: 5.0, right: 10.0),

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