Merge pull request #141 from canopas/Mayank/Refactor-tournament-card

Refactor home tournament card
canopas · Nov 19, 2024 · 293bd5d · 293bd5d
2 parents 29feef1 + 5795229
commit 293bd5d
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 74 deletions.
diff --git a/khelo/lib/ui/flow/home/components/tournament_item.dart b/khelo/lib/ui/flow/home/components/tournament_item.dart
@@ -1,4 +1,5 @@
 import 'package:cached_network_image/cached_network_image.dart';
+
 import 'package:data/api/tournament/tournament_model.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
@@ -17,11 +18,11 @@ import '../../../../gen/assets.gen.dart';
 class TournamentItem extends StatefulWidget {
   final TournamentModel tournament;
   final EdgeInsets margin;
-  final Color? background;
+  final Size? size;
 
   const TournamentItem({
     super.key,
-    this.background,
+    this.size,
     required this.tournament,
     this.margin = EdgeInsets.zero,
   });
@@ -44,13 +45,11 @@ class _TournamentItemState extends State<TournamentItem> {
   void _initializeImageProvider(String? imageUrl) {
     if (imageUrl != null) {
       imageProvider = CachedNetworkImageProvider(imageUrl);
-      if (widget.background == null) {
-        imageProvider!.createPaletteGenerator().then((generatedPalette) {
-          if (mounted) {
-            setState(() => palette = generatedPalette);
-          }
-        });
-      }
+      imageProvider!.createPaletteGenerator().then((generatedPalette) {
+        if (mounted) {
+          setState(() => palette = generatedPalette);
+        }
+      });
     } else {
       setState(() => imageProvider = null);
     }
@@ -67,74 +66,94 @@ class _TournamentItemState extends State<TournamentItem> {
 
   @override
   Widget build(BuildContext context) {
-    final (titleColor, dateAndTypeColor, backgroundColor) = _getColors();
+    final width = widget.size?.width ?? context.mediaQuerySize.width;
+    final (titleColor, dateAndTypeColor) = _getTextColors();
     return OnTapScale(
       onTap: () => AppRoute.tournamentDetail(tournamentId: widget.tournament.id)
           .push(context),
       child: Container(
-        width: context.mediaQuerySize.width * 0.85,
-        padding: EdgeInsets.all(16),
+        height: width / 2,
+        width: width,
         margin: widget.margin,
+        clipBehavior: Clip.antiAlias,
+        alignment: Alignment.bottomCenter,
         decoration: BoxDecoration(
-          color: widget.background ?? backgroundColor,
+          color: context.colorScheme.containerNormalOnSurface,
           borderRadius: BorderRadius.circular(16),
-          border: Border.all(color: context.colorScheme.outline),
         ),
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
+        child: Stack(
           children: [
-            _bannerImage(widget.tournament.banner_img_url),
-            const SizedBox(height: 16),
-            _titleAndStatus(
-              title: widget.tournament.name,
-              status: widget.tournament.status,
-              titleColor: widget.background != null
-                  ? context.colorScheme.textPrimary
-                  : titleColor,
-            ),
-            const SizedBox(height: 8),
-            _dateAndType(
-              startTime: widget.tournament.start_date,
-              endTime: widget.tournament.end_date,
-              type: widget.tournament.type,
-              dateAndTypeColor: widget.background != null
-                  ? context.colorScheme.textDisabled
-                  : dateAndTypeColor,
+            _bannerImage(widget.tournament.banner_img_url, width),
+            _gradient(context, width),
+            Padding(
+              padding: const EdgeInsets.all(16),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                mainAxisAlignment: MainAxisAlignment.end,
+                children: [
+                  _titleAndStatus(
+                    title: widget.tournament.name,
+                    status: widget.tournament.status,
+                    titleColor: titleColor,
+                  ),
+                  const SizedBox(height: 4),
+                  _dateAndType(
+                    startTime: widget.tournament.start_date,
+                    endTime: widget.tournament.end_date,
+                    type: widget.tournament.type,
+                    dateAndTypeColor: dateAndTypeColor,
+                  ),
+                ],
+              ),
             ),
           ],
         ),
       ),
     );
   }
 
-  Widget _bannerImage(String? bannerUrl) {
-    return Container(
-      height: 98,
-      width: context.mediaQuerySize.width - 32,
-      decoration: BoxDecoration(
-        color: context.colorScheme.containerNormalOnSurface,
-        borderRadius: BorderRadius.circular(8),
-        image: bannerUrl == null || imageProvider == null
-            ? null
-            : DecorationImage(
-                image: imageProvider!,
-                fit: BoxFit.fill,
-              ),
+  Widget _gradient(BuildContext context, double width) {
+    final dominant =
+        palette?.dominantColor?.color ?? context.colorScheme.primary;
+    return Align(
+      alignment: Alignment.bottomCenter,
+      child: Container(
+        height: width / 2,
+        width: width,
+        decoration: BoxDecoration(
+          gradient: LinearGradient(
+            begin: Alignment.topCenter,
+            end: Alignment.bottomCenter,
+            colors: [
+              dominant.withOpacity(0),
+              dominant.withOpacity(0.5),
+              dominant,
+            ],
+          ),
+        ),
       ),
-      child: bannerUrl == null
-          ? Center(
-              child: SvgPicture.asset(Assets.images.icTournaments,
-                  height: 32,
-                  width: 32,
-                  colorFilter: ColorFilter.mode(
-                    context.colorScheme.textPrimary,
-                    BlendMode.srcATop,
-                  )),
-            )
-          : null,
     );
   }
 
+  Widget _bannerImage(String? bannerUrl, double width) {
+    return bannerUrl == null
+        ? Center(
+            child: SvgPicture.asset(Assets.images.icTournaments,
+                height: 32,
+                width: 32,
+                colorFilter: ColorFilter.mode(
+                  context.colorScheme.textPrimary,
+                  BlendMode.srcATop,
+                )),
+          )
+        : CachedNetworkImage(
+            imageUrl: bannerUrl,
+            fit: BoxFit.cover,
+            width: width,
+            height: width / 2,
+          );
+  }
+
   Widget _titleAndStatus(
       {required String title,
       required TournamentStatus status,
@@ -191,30 +210,21 @@ class _TournamentItemState extends State<TournamentItem> {
             ]));
   }
 
-  (Color, Color, Color) _getColors() {
+  (Color, Color) _getTextColors() {
     final dominant =
         palette?.dominantColor?.color ?? context.colorScheme.primary;
 
     if (dominant == context.colorScheme.primary) {
       return (
         context.colorScheme.onPrimary,
-        context.colorScheme.onPrimary.withOpacity(0.8),
-        dominant,
+        context.colorScheme.onPrimary.withOpacity(0.8)
       );
     }
 
     if (dominant.computeLuminance() < 0.5) {
-      return (
-        Colors.white,
-        Colors.white.withOpacity(0.8),
-        dominant.withOpacity(0.85),
-      );
+      return (Colors.white, Colors.white.withOpacity(0.8));
     } else {
-      return (
-        Colors.black.withOpacity(0.87),
-        Colors.black.withOpacity(0.6),
-        dominant.withOpacity(0.89),
-      );
+      return (Colors.black.withOpacity(0.87), Colors.black.withOpacity(0.6));
     }
   }
 }
diff --git a/khelo/lib/ui/flow/home/home_screen.dart b/khelo/lib/ui/flow/home/home_screen.dart
@@ -161,6 +161,7 @@ class _HomeScreenState extends ConsumerState<HomeScreen> {
               children: tournaments
                   .map((tournament) => TournamentItem(
                         tournament: tournament,
+                        size: Size.fromWidth(360),
                         margin: EdgeInsets.symmetric(horizontal: 8),
                       ))
                   .toList(),

diff --git a/khelo/lib/ui/flow/home/view_all/home_view_all_screen.dart b/khelo/lib/ui/flow/home/view_all/home_view_all_screen.dart
@@ -81,10 +81,7 @@ class _HomeViewAllScreenState extends ConsumerState<HomeViewAllScreen> {
                     : state.matches.length)) {
               if (widget.isTournament) {
                 final tournament = state.tournaments[index];
-                return TournamentItem(
-                  tournament: tournament,
-                  background: context.colorScheme.containerLow,
-                );
+                return TournamentItem(tournament: tournament);
               } else {
                 final match = state.matches[index];
                 return MatchDetailCell(