feat: container around bingo and remove vertical padding

Turtlepaw · Oct 27, 2024 · 270179f · 270179f
1 parent e4fbdf1
commit 270179f
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 35 deletions.
diff --git a/lib/components/communityChallenge.dart b/lib/components/communityChallenge.dart
@@ -134,8 +134,7 @@ class _CommunityChallengeState extends State<CommunityChallenge> {
                       mainAxisSize: MainAxisSize.max,
                       mainAxisAlignment: MainAxisAlignment.spaceBetween,
                       children: [
-                        SizedBox(
-                          width: 240,
+                        Expanded(
                           child: OverlapStack(
                             align: OverlapStackAlign.start,
                             minSpacing: 1,

diff --git a/lib/routes/challenges/bingo.dart b/lib/routes/challenges/bingo.dart
@@ -117,7 +117,7 @@ class _BingoCardWidgetState extends State<BingoCardWidget> {
         final crossAxisCount = (constraints.maxWidth / 100).floor();
 
         return Container(
-          padding: const EdgeInsets.all(10.0),
+          padding: const EdgeInsets.symmetric(horizontal: 10.0),
           child: ListView(
             shrinkWrap: true,
             physics: const ClampingScrollPhysics(),
@@ -143,22 +143,34 @@ class _BingoCardWidgetState extends State<BingoCardWidget> {
               const SizedBox(height: 15),
 
               // Main bingo card display based on the selected user's data
-              GridView.builder(
-                physics: const NeverScrollableScrollPhysics(),
-                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-                  crossAxisCount: 5,
-                  crossAxisSpacing: 5.0,
-                  mainAxisSpacing: 5.0,
-                  childAspectRatio: 0.73,
+              Container(
+                padding: const EdgeInsets.all(10.0),
+                decoration: BoxDecoration(
+                  color: theme.colorScheme.surfaceContainer,
+                  borderRadius: BorderRadius.circular(15),
+                  border: Border.all(
+                    color: theme.colorScheme.surfaceContainerHighest,
+                    width: 1.1,
+                    style: BorderStyle.solid,
+                    strokeAlign: BorderSide.strokeAlignCenter,
+                  )
                 ),
-                itemCount: _selectedBingoData!.activities.length,
-                shrinkWrap: true,
-                itemBuilder: (context, index) {
-                  final activity = _selectedBingoData!.activities[index];
-                  final isCompleted = _completedCards[index];
-                  final isAllowed = activity.type != BingoDataType.filled && selectedUser.id == pb.authStore.model?.id;
-
-                  return Stack(
+                child: GridView.builder(
+                  physics: const NeverScrollableScrollPhysics(),
+                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                    crossAxisCount: 5,
+                    crossAxisSpacing: 5.0,
+                    mainAxisSpacing: 5.0,
+                    childAspectRatio: 0.73,
+                  ),
+                  itemCount: _selectedBingoData!.activities.length,
+                  shrinkWrap: true,
+                  itemBuilder: (context, index) {
+                    final activity = _selectedBingoData!.activities[index];
+                    final isCompleted = _completedCards[index];
+                    final isAllowed = activity.type != BingoDataType.filled && selectedUser.id == pb.authStore.model?.id;
+
+                    return Stack(
                       alignment: Alignment.center,
                       children: [
                         // This AnimatedContainer only handles scale and rotation
@@ -210,29 +222,29 @@ class _BingoCardWidgetState extends State<BingoCardWidget> {
                                 }
                                     : null,
                                 child: Center(
-                                child: Column(
-                                  mainAxisAlignment: MainAxisAlignment.center,
-                                  children: [
-                                    Icon(
-                                      activity.type.asIcon(),
-                                      size: 40,
-                                      color: theme.colorScheme.onPrimary,
-                                    ),
-                                    const SizedBox(height: 10),
-                                    Text(
-                                      activity.amount.toString(),
-                                      textAlign: TextAlign.center,
-                                      style: theme.textTheme.labelLarge?.copyWith(
+                                  child: Column(
+                                    mainAxisAlignment: MainAxisAlignment.center,
+                                    children: [
+                                      Icon(
+                                        activity.type.asIcon(),
+                                        size: 40,
                                         color: theme.colorScheme.onPrimary,
                                       ),
-                                    ),
-                                  ],
+                                      const SizedBox(height: 10),
+                                      Text(
+                                        activity.amount.toString(),
+                                        textAlign: TextAlign.center,
+                                        style: theme.textTheme.labelLarge?.copyWith(
+                                          color: theme.colorScheme.onPrimary,
+                                        ),
+                                      ),
+                                    ],
+                                  ),
                                 ),
                               ),
                             ),
                           ),
                         ),
-                        ),
 
                         // Confetti effect for completed activity
                         if (isCompleted)
@@ -253,7 +265,8 @@ class _BingoCardWidgetState extends State<BingoCardWidget> {
                           ),
                       ],
                     );
-                },
+                  },
+                ),
               ),
 
               // Horizontal scroll of other users' bingo cards