use Skeletonizer for Layout
This commit is contained in:
Yannick
@@ -1,7 +1,11 @@
|
|||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:game_tracker/core/custom_theme.dart';
|
import 'package:game_tracker/data/db/database.dart';
|
||||||
|
import 'package:game_tracker/data/dto/game.dart';
|
||||||
|
import 'package:game_tracker/data/dto/group.dart';
|
||||||
|
import 'package:game_tracker/data/dto/player.dart';
|
||||||
import 'package:game_tracker/presentation/widgets/tiles/game_history_tile.dart';
|
import 'package:game_tracker/presentation/widgets/tiles/game_history_tile.dart';
|
||||||
import 'package:game_tracker/presentation/widgets/top_centered_message.dart';
|
import 'package:provider/provider.dart';
|
||||||
|
import 'package:skeletonizer/skeletonizer.dart';
|
||||||
|
|
||||||
class GameHistoryView extends StatefulWidget {
|
class GameHistoryView extends StatefulWidget {
|
||||||
const GameHistoryView({super.key});
|
const GameHistoryView({super.key});
|
||||||
@@ -11,194 +15,92 @@ class GameHistoryView extends StatefulWidget {
|
|||||||
}
|
}
|
||||||
|
|
||||||
class _GameHistoryViewState extends State<GameHistoryView> {
|
class _GameHistoryViewState extends State<GameHistoryView> {
|
||||||
final allGameData = [
|
late Future<List<Game>> _gameListFuture;
|
||||||
{
|
late final AppDatabase db;
|
||||||
'game': 'Schach',
|
|
||||||
'title': 'Abendpartie',
|
late final List<Game> skeletonData = List.filled(
|
||||||
'players': 2,
|
2,
|
||||||
'group': 'Familie',
|
Game(
|
||||||
'date': '01.06.2024',
|
name: 'Skeleton Game',
|
||||||
},
|
group: Group(
|
||||||
{
|
name: 'Skeleton Group',
|
||||||
'game': 'Monopoly',
|
members: [
|
||||||
'title': 'Wochenendspaß mit Gras du Saas',
|
Player(name: 'Skeleton Player 1'),
|
||||||
'players': 4,
|
Player(name: 'Skeleton Player 2'),
|
||||||
'group': 'Freunde',
|
],
|
||||||
'date': '28.05.2024',
|
),
|
||||||
},
|
winner: Player(name: 'Skeleton Player 1'),
|
||||||
{
|
),
|
||||||
'game': 'Catan',
|
);
|
||||||
'title': 'Strategieabend',
|
|
||||||
'players': 3,
|
|
||||||
'group': 'Brettspieler',
|
|
||||||
'date': '25.05.2024',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'game': 'Uno',
|
|
||||||
'title': 'Schnelle Runde',
|
|
||||||
'players': 5,
|
|
||||||
'group': 'Kollegen',
|
|
||||||
'date': '22.05.2024',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'game': 'Poker',
|
|
||||||
'title': 'Freitagspoker',
|
|
||||||
'players': 6,
|
|
||||||
'group': 'Pokerclub',
|
|
||||||
'date': '20.05.2024',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'game': 'Scrabble',
|
|
||||||
'title': 'Wortschlacht',
|
|
||||||
'players': 4,
|
|
||||||
'group': 'Familie',
|
|
||||||
'date': '18.05.2024',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'game': 'Risiko',
|
|
||||||
'title': 'Weltherrschaft',
|
|
||||||
'players': 5,
|
|
||||||
'group': 'Strategiegruppe',
|
|
||||||
'date': '15.05.2024',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'game': 'Zug um Zug',
|
|
||||||
'title': 'Zug-Abenteuer',
|
|
||||||
'players': 4,
|
|
||||||
'group': 'Reisende',
|
|
||||||
'date': '12.05.2024',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'game': 'Carcassonne',
|
|
||||||
'title': 'Plättchenlegen',
|
|
||||||
'players': 3,
|
|
||||||
'group': 'Brettspieler',
|
|
||||||
'date': '10.05.2024',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'game': 'Pandemie',
|
|
||||||
'title': 'Welt retten',
|
|
||||||
'players': 4,
|
|
||||||
'group': 'Koop-Team',
|
|
||||||
'date': '08.05.2024',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'game': 'Cluedo',
|
|
||||||
'title': 'Krimiabend',
|
|
||||||
'players': 6,
|
|
||||||
'group': 'Detektive',
|
|
||||||
'date': '05.05.2024',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'game': 'Dixit',
|
|
||||||
'title': 'Fantasiespiel',
|
|
||||||
'players': 5,
|
|
||||||
'group': 'Künstler',
|
|
||||||
'date': '02.05.2024',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'game': 'Azul',
|
|
||||||
'title': 'Plättchenmeister',
|
|
||||||
'players': 4,
|
|
||||||
'group': 'Familie',
|
|
||||||
'date': '30.04.2024',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'game': 'Splendor',
|
|
||||||
'title': 'Edelsteinhändler',
|
|
||||||
'players': 3,
|
|
||||||
'group': 'Freunde',
|
|
||||||
'date': '28.04.2024',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'game': '7 Wonders',
|
|
||||||
'title': 'Antike Reiche',
|
|
||||||
'players': 7,
|
|
||||||
'group': 'Geschichtsfreunde',
|
|
||||||
'date': '25.04.2024',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
late List<Map<String, dynamic>> suggestedGameData;
|
|
||||||
|
|
||||||
@override
|
@override
|
||||||
void initState() {
|
void initState() {
|
||||||
super.initState();
|
super.initState();
|
||||||
suggestedGameData = List.from(allGameData);
|
db = Provider.of<AppDatabase>(context, listen: false);
|
||||||
|
_gameListFuture = Future.delayed(
|
||||||
|
const Duration(milliseconds: 250),
|
||||||
|
() => db.gameDao.getAllGames(),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Scaffold(
|
return FutureBuilder<List<Game>>(
|
||||||
backgroundColor: CustomTheme.backgroundColor,
|
future: _gameListFuture,
|
||||||
body: Stack(
|
builder: (BuildContext context, AsyncSnapshot<List<Game>> snapshot) {
|
||||||
children: [
|
if (snapshot.hasError) {
|
||||||
Column(
|
return const Center(
|
||||||
children: [
|
heightFactor: 4,
|
||||||
Container(margin: const EdgeInsets.only(bottom: 75)),
|
child: Text(
|
||||||
Expanded(
|
'Error while loading recent games.',
|
||||||
child: gameHistoryListView(allGameData, suggestedGameData),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
Container(
|
|
||||||
margin: const EdgeInsets.only(top: 10, bottom: 10, left: 10, right: 10),
|
|
||||||
child: SearchBar(
|
|
||||||
leading: const Icon(Icons.search),
|
|
||||||
onChanged: (value) {
|
|
||||||
if (value.isEmpty) {
|
|
||||||
setState(() {
|
|
||||||
suggestedGameData.clear();
|
|
||||||
suggestedGameData.addAll(allGameData);
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
final suggestions = allGameData.where((currentGame) {
|
|
||||||
return currentGame['game'].toString().toLowerCase().contains(
|
|
||||||
value.toLowerCase(),
|
|
||||||
) ||
|
|
||||||
currentGame['title'].toString().toLowerCase().contains(
|
|
||||||
value.toLowerCase(),
|
|
||||||
) ||
|
|
||||||
currentGame['group'].toString().toLowerCase().contains(
|
|
||||||
value.toLowerCase(),
|
|
||||||
);
|
|
||||||
});
|
|
||||||
setState(() {
|
|
||||||
suggestedGameData.clear();
|
|
||||||
suggestedGameData.addAll(suggestions);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
),
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (snapshot.connectionState == ConnectionState.done &&
|
||||||
|
(!snapshot.hasData || snapshot.data!.isEmpty)) {
|
||||||
|
return const Center(
|
||||||
|
heightFactor: 4,
|
||||||
|
child: Text('No recent games available.'),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
final bool isLoading = snapshot.connectionState == ConnectionState.waiting;
|
||||||
|
final List<Game> games = (isLoading
|
||||||
|
? skeletonData
|
||||||
|
: (snapshot.data ?? [])
|
||||||
|
..sort((a, b) => b.createdAt.compareTo(a.createdAt)))
|
||||||
|
.take(2)
|
||||||
|
.toList();
|
||||||
|
|
||||||
|
return Skeletonizer(
|
||||||
|
effect: PulseEffect(
|
||||||
|
from: Colors.grey[800]!,
|
||||||
|
to: Colors.grey[600]!,
|
||||||
|
duration: const Duration(milliseconds: 800),
|
||||||
),
|
),
|
||||||
],
|
enabled: isLoading,
|
||||||
),
|
enableSwitchAnimation: true,
|
||||||
|
switchAnimationConfig: const SwitchAnimationConfig(
|
||||||
|
duration: Duration(milliseconds: 200),
|
||||||
|
switchInCurve: Curves.linear,
|
||||||
|
switchOutCurve: Curves.linear,
|
||||||
|
transitionBuilder: AnimatedSwitcher.defaultTransitionBuilder,
|
||||||
|
layoutBuilder: AnimatedSwitcher.defaultLayoutBuilder,
|
||||||
|
),
|
||||||
|
child: ListView.builder(
|
||||||
|
padding: const EdgeInsets.only(bottom: 85),
|
||||||
|
itemCount: games.length + 1,
|
||||||
|
itemBuilder: (BuildContext context, int index) {
|
||||||
|
if (index == games.length) {
|
||||||
|
return SizedBox(
|
||||||
|
height: MediaQuery.paddingOf(context).bottom - 20,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return GameHistoryTile(game: games[index]);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Widget gameHistoryListView(allGameData, suggestedGameData) {
|
|
||||||
if (suggestedGameData.isEmpty && allGameData.isEmpty) {
|
|
||||||
return const TopCenteredMessage(icon: Icons.error, title: 'Keine Spiele erstellt', message: '',);
|
|
||||||
} else if (suggestedGameData.isEmpty) {
|
|
||||||
return const TopCenteredMessage(icon: Icons.error, title: 'Keine Spiele mit den Suchparametern gefunden', message: '',);
|
|
||||||
}
|
|
||||||
|
|
||||||
return ListView.separated(
|
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
|
|
||||||
itemCount: suggestedGameData.length,
|
|
||||||
separatorBuilder: (context, index) => const Padding(
|
|
||||||
padding: EdgeInsets.symmetric(vertical: 8.0),
|
|
||||||
child: Divider(),
|
|
||||||
),
|
|
||||||
itemBuilder: (context, index) {
|
|
||||||
final currentGame = suggestedGameData[index];
|
|
||||||
return GameHistoryTile(
|
|
||||||
gameTitle: currentGame['title'],
|
|
||||||
gameType: currentGame['game'],
|
|
||||||
date: currentGame['date'],
|
|
||||||
groupName: currentGame['group'],
|
|
||||||
winner: 'ich',
|
|
||||||
);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user