Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor home tournament card #141

Merged
merged 3 commits into from
Nov 19, 2024
Merged

Refactor home tournament card #141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3bc3876
Refactor home tournament card
cp-mayank Nov 19, 2024
a7f736a
Merge branch 'main' into Mayank/Refactor-tournament-card
cp-mayank Nov 19, 2024
5795229
Minor changes
cp-mayank Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
150 changes: 80 additions & 70 deletions khelo/lib/ui/flow/home/components/tournament_item.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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,
});
Expand All @@ -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);
}
Expand All @@ -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,
Expand Down Expand Up @@ -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));
}
}
}
1 change: 1 addition & 0 deletions khelo/lib/ui/flow/home/home_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down
5 changes: 1 addition & 4 deletions khelo/lib/ui/flow/home/view_all/home_view_all_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
Loading