Implemented compact mode for match tiles

This commit is contained in:
2026-01-09 20:04:10 +01:00
parent a9d2325eee
commit 3d510d5b3d
2 changed files with 63 additions and 2 deletions

View File

@@ -89,6 +89,7 @@ class _HomeViewState extends State<HomeView> {
Padding( Padding(
padding: const EdgeInsets.only(top: 8.0), padding: const EdgeInsets.only(top: 8.0),
child: MatchTile( child: MatchTile(
compact: true,
width: constraints.maxWidth * 0.95, width: constraints.maxWidth * 0.95,
match: recentMatches[0], match: recentMatches[0],
onTap: () { onTap: () {
@@ -105,6 +106,7 @@ class _HomeViewState extends State<HomeView> {
Padding( Padding(
padding: const EdgeInsets.only(top: 8.0), padding: const EdgeInsets.only(top: 8.0),
child: MatchTile( child: MatchTile(
compact: true,
width: constraints.maxWidth * 0.95, width: constraints.maxWidth * 0.95,
match: recentMatches[1], match: recentMatches[1],
onTap: () { onTap: () {

View File

@@ -10,12 +10,15 @@ import 'package:intl/intl.dart';
/// creation date, associated group, winner, and players. /// creation date, associated group, winner, and players.
/// - [match]: The match data to be displayed. /// - [match]: The match data to be displayed.
/// - [onTap]: The callback invoked when the tile is tapped. /// - [onTap]: The callback invoked when the tile is tapped.
/// - [width]: Optional width for the tile.
/// - [compact]: Whether to display the tile in a compact mode
class MatchTile extends StatefulWidget { class MatchTile extends StatefulWidget {
const MatchTile({ const MatchTile({
super.key, super.key,
required this.match, required this.match,
required this.onTap, required this.onTap,
this.width, this.width,
this.compact = false,
}); });
/// The match data to be displayed. /// The match data to be displayed.
@@ -24,8 +27,12 @@ class MatchTile extends StatefulWidget {
/// The callback invoked when the tile is tapped. /// The callback invoked when the tile is tapped.
final VoidCallback onTap; final VoidCallback onTap;
/// Optional width for the tile.
final double? width; final double? width;
/// Whether to display the tile in a compact mode
final bool compact;
@override @override
State<MatchTile> createState() => _MatchTileState(); State<MatchTile> createState() => _MatchTileState();
} }
@@ -88,7 +95,22 @@ class _MatchTileState extends State<MatchTile> {
const SizedBox(width: 6), const SizedBox(width: 6),
Expanded( Expanded(
child: Text( child: Text(
group.name, '${group.name}${widget.match.players != null ? ' + ${widget.match.players?.length}' : ''}',
style: const TextStyle(fontSize: 14, color: Colors.grey),
overflow: TextOverflow.ellipsis,
),
),
],
),
const SizedBox(height: 12),
] else if (widget.compact) ...[
Row(
children: [
const Icon(Icons.person, size: 16, color: Colors.grey),
const SizedBox(width: 6),
Expanded(
child: Text(
'${widget.match.players!.length} ${loc.players}',
style: const TextStyle(fontSize: 14, color: Colors.grey), style: const TextStyle(fontSize: 14, color: Colors.grey),
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
), ),
@@ -135,9 +157,46 @@ class _MatchTileState extends State<MatchTile> {
), ),
), ),
const SizedBox(height: 12), const SizedBox(height: 12),
] else ...[
Container(
padding: const EdgeInsets.symmetric(
vertical: 8,
horizontal: 12,
),
decoration: BoxDecoration(
color: Colors.amber.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: Colors.amber.withValues(alpha: 0.3),
width: 1,
),
),
child: Row(
children: [
const Icon(
Icons.watch_later,
size: 20,
color: Colors.amber,
),
const SizedBox(width: 8),
Expanded(
child: Text(
loc.match_in_progress,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: CustomTheme.textColor,
),
overflow: TextOverflow.ellipsis,
),
),
],
),
),
const SizedBox(height: 12),
], ],
if (_allPlayers.isNotEmpty) ...[ if (_allPlayers.isNotEmpty && widget.compact == false) ...[
Text( Text(
loc.players, loc.players,
style: const TextStyle( style: const TextStyle(