liquid-development/game-tracker
3
0
Fork 0
Code Issues 14 Pull Requests 7 Actions Releases 1 Activity

Merge pull request 'Skeleton für HomeView implementieren' (#27) from enhancement/26-skeleton-fuer-homeview-implementieren into development

Browse Source 
Reviewed-on: #27
Reviewed-by: mathiskir <mathis.kirchner.mk@gmail.com>
This commit was merged in pull request #27.
This commit is contained in:
Felix Kirchner
2025-11-17 12:58:28 +00:00
parent 729cd5eff1 2fc7eab1ac
commit fde5344244
2 changed files with 170 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
lib/presentation/views/main_menu/home_view.dart
View File

@@ -5,6 +5,7 @@ import 'package:game_tracker/presentation/widgets/quick_create_button.dart';
import 'package:game_tracker/presentation/widgets/tiles/info_tile.dart'; import 'package:game_tracker/presentation/widgets/tiles/info_tile.dart';
import 'package:game_tracker/presentation/widgets/tiles/quick_info_tile.dart'; import 'package:game_tracker/presentation/widgets/tiles/quick_info_tile.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'package:skeletonizer/skeletonizer.dart';
class HomeView extends StatefulWidget { class HomeView extends StatefulWidget {
const HomeView({super.key}); const HomeView({super.key});
@@ -16,6 +17,7 @@ class HomeView extends StatefulWidget {
class _HomeViewState extends State<HomeView> { class _HomeViewState extends State<HomeView> {
late Future<int> _gameCountFuture; late Future<int> _gameCountFuture;
late Future<int> _groupCountFuture; late Future<int> _groupCountFuture;
bool isLoading = true;
@override @override
initState() { initState() {
@@ -23,120 +25,165 @@ class _HomeViewState extends State<HomeView> {
final db = Provider.of<AppDatabase>(context, listen: false); final db = Provider.of<AppDatabase>(context, listen: false);
_gameCountFuture = db.gameDao.getGameCount(); _gameCountFuture = db.gameDao.getGameCount();
_groupCountFuture = db.groupDao.getGroupCount(); _groupCountFuture = db.groupDao.getGroupCount();
Future.wait([_gameCountFuture, _groupCountFuture]).then((_) async {
await Future.delayed(const Duration(milliseconds: 50));
if (mounted) {
setState(() {
isLoading = false;
});
}
});
} }
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return LayoutBuilder( return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) { builder: (BuildContext context, BoxConstraints constraints) {
return SingleChildScrollView( return Skeletonizer(
child: Column( effect: PulseEffect(
crossAxisAlignment: CrossAxisAlignment.center, from: Colors.grey[800]!,
children: [ to: Colors.grey[600]!,
Row( duration: const Duration(milliseconds: 800),
mainAxisAlignment: MainAxisAlignment.center, ),
children: [ enabled: isLoading,
FutureBuilder<int>( enableSwitchAnimation: true,
future: _gameCountFuture, switchAnimationConfig: const SwitchAnimationConfig(
builder: (context, snapshot) { duration: Duration(milliseconds: 200),
final int count = (snapshot.hasData) ? snapshot.data! : 0; switchInCurve: Curves.linear,
return QuickInfoTile( switchOutCurve: Curves.linear,
width: constraints.maxWidth * 0.45, transitionBuilder: AnimatedSwitcher.defaultTransitionBuilder,
height: constraints.maxHeight * 0.15, layoutBuilder: AnimatedSwitcher.defaultLayoutBuilder,
title: 'Games', ),
icon: Icons.groups_rounded, child: SingleChildScrollView(
value: count, child: Column(
); crossAxisAlignment: CrossAxisAlignment.center,
}, children: [
), Row(
SizedBox(width: constraints.maxWidth * 0.05), mainAxisAlignment: MainAxisAlignment.center,
FutureBuilder<int>(
future: _groupCountFuture,
builder: (context, snapshot) {
final int count =
(snapshot.connectionState == ConnectionState.done &&
snapshot.hasData)
? snapshot.data!
: 0;
return QuickInfoTile(
width: constraints.maxWidth * 0.45,
height: constraints.maxHeight * 0.15,
title: 'Groups',
icon: Icons.groups_rounded,
value: count,
);
},
),
],
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: InfoTile(
width: constraints.maxWidth * 0.95,
title: 'Recent Games',
icon: Icons.timer,
content: const Padding(
padding: EdgeInsets.symmetric(horizontal: 40.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
GameTile(
gameTitle: 'Gamenight',
gameType: 'Cabo',
ruleset: 'Lowest Points',
players: '5 Players',
winner: 'Leonard',
),
Padding(
padding: EdgeInsets.symmetric(vertical: 8.0),
child: Divider(),
),
GameTile(
gameTitle: 'Schoolbreak',
gameType: 'Uno',
ruleset: 'Highest Points',
players: 'The Gang',
winner: 'Lina',
),
SizedBox(height: 8),
],
),
),
),
),
InfoTile(
width: constraints.maxWidth * 0.95,
title: 'Quick Create',
icon: Icons.add_box_rounded,
content: Column(
spacing: 8,
children: [ children: [
Row( FutureBuilder<int>(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, future: _gameCountFuture,
children: [ builder: (context, snapshot) {
QuickCreateButton(text: 'Category 1', onPressed: () {}), final int count = (snapshot.hasData)
QuickCreateButton(text: 'Category 2', onPressed: () {}), ? snapshot.data!
], : 0;
return QuickInfoTile(
width: constraints.maxWidth * 0.45,
height: constraints.maxHeight * 0.15,
title: 'Games',
icon: Icons.groups_rounded,
value: count,
);
},
), ),
Row( SizedBox(width: constraints.maxWidth * 0.05),
mainAxisAlignment: MainAxisAlignment.spaceEvenly, FutureBuilder<int>(
children: [ future: _groupCountFuture,
QuickCreateButton(text: 'Category 3', onPressed: () {}), builder: (context, snapshot) {
QuickCreateButton(text: 'Category 4', onPressed: () {}), final int count =
], (snapshot.connectionState == ConnectionState.done &&
), snapshot.hasData)
Row( ? snapshot.data!
mainAxisAlignment: MainAxisAlignment.spaceEvenly, : 0;
children: [ return QuickInfoTile(
QuickCreateButton(text: 'Category 5', onPressed: () {}), width: constraints.maxWidth * 0.45,
QuickCreateButton(text: 'Category 6', onPressed: () {}), height: constraints.maxHeight * 0.15,
], title: 'Groups',
icon: Icons.groups_rounded,
value: count,
);
},
), ),
], ],
), ),
), Padding(
], padding: const EdgeInsets.symmetric(vertical: 16.0),
child: InfoTile(
width: constraints.maxWidth * 0.95,
title: 'Recent Games',
icon: Icons.timer,
content: const Padding(
padding: EdgeInsets.symmetric(horizontal: 40.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
GameTile(
gameTitle: 'Gamenight',
gameType: 'Cabo',
ruleset: 'Lowest Points',
players: '5 Players',
winner: 'Leonard',
),
Padding(
padding: EdgeInsets.symmetric(vertical: 8.0),
child: Divider(),
),
GameTile(
gameTitle: 'Schoolbreak',
gameType: 'Uno',
ruleset: 'Highest Points',
players: 'The Gang',
winner: 'Lina',
),
SizedBox(height: 8),
],
),
),
),
),
InfoTile(
width: constraints.maxWidth * 0.95,
title: 'Quick Create',
icon: Icons.add_box_rounded,
content: Column(
spacing: 8,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
QuickCreateButton(
text: 'Category 1',
onPressed: () {},
),
QuickCreateButton(
text: 'Category 2',
onPressed: () {},
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
QuickCreateButton(
text: 'Category 3',
onPressed: () {},
),
QuickCreateButton(
text: 'Category 4',
onPressed: () {},
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
QuickCreateButton(
text: 'Category 5',
onPressed: () {},
),
QuickCreateButton(
text: 'Category 6',
onPressed: () {},
),
],
),
],
),
),
],
),
), ),
); );
}, },

35
lib/presentation/widgets/game_tile.dart
View File

@@ -1,5 +1,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:game_tracker/core/custom_theme.dart'; import 'package:game_tracker/core/custom_theme.dart';
import 'package:skeletonizer/skeletonizer.dart';
class GameTile extends StatefulWidget { class GameTile extends StatefulWidget {
final String gameTitle; final String gameTitle;
@@ -48,9 +49,11 @@ class _GameTileState extends State<GameTile> {
borderRadius: BorderRadius.circular(4), borderRadius: BorderRadius.circular(4),
color: CustomTheme.primaryColor, color: CustomTheme.primaryColor,
), ),
child: Text( child: Skeleton.ignore(
widget.ruleset, child: Text(
style: const TextStyle(fontWeight: FontWeight.bold), widget.ruleset,
style: const TextStyle(fontWeight: FontWeight.bold),
),
), ),
), ),
Center( Center(
@@ -68,19 +71,21 @@ class _GameTileState extends State<GameTile> {
borderRadius: BorderRadius.circular(4), borderRadius: BorderRadius.circular(4),
color: Colors.yellow.shade300, color: Colors.yellow.shade300,
), ),
child: Row( child: Skeleton.ignore(
mainAxisAlignment: MainAxisAlignment.center, child: Row(
children: [ mainAxisAlignment: MainAxisAlignment.center,
const Icon(Icons.emoji_events, color: Colors.black, size: 20), children: [
Text( const Icon(Icons.emoji_events, color: Colors.black, size: 20),
widget.winner, Text(
textAlign: TextAlign.center, widget.winner,
style: const TextStyle( textAlign: TextAlign.center,
fontWeight: FontWeight.bold, style: const TextStyle(
color: Colors.black87, fontWeight: FontWeight.bold,
color: Colors.black87,
),
), ),
), ],
], ),
), ),
), ),
), ),