use Skeletonizer for Layout
This commit is contained in:
Yannick
@@ -1,7 +1,11 @@
|
||||
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/top_centered_message.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:skeletonizer/skeletonizer.dart';
|
||||
|
||||
class GameHistoryView extends StatefulWidget {
|
||||
const GameHistoryView({super.key});
|
||||
@@ -11,194 +15,92 @@ class GameHistoryView extends StatefulWidget {
|
||||
}
|
||||
|
||||
class _GameHistoryViewState extends State<GameHistoryView> {
|
||||
final allGameData = [
|
||||
{
|
||||
'game': 'Schach',
|
||||
'title': 'Abendpartie',
|
||||
'players': 2,
|
||||
'group': 'Familie',
|
||||
'date': '01.06.2024',
|
||||
},
|
||||
{
|
||||
'game': 'Monopoly',
|
||||
'title': 'Wochenendspaß mit Gras du Saas',
|
||||
'players': 4,
|
||||
'group': 'Freunde',
|
||||
'date': '28.05.2024',
|
||||
},
|
||||
{
|
||||
'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;
|
||||
late Future<List<Game>> _gameListFuture;
|
||||
late final AppDatabase db;
|
||||
|
||||
late final List<Game> skeletonData = List.filled(
|
||||
2,
|
||||
Game(
|
||||
name: 'Skeleton Game',
|
||||
group: Group(
|
||||
name: 'Skeleton Group',
|
||||
members: [
|
||||
Player(name: 'Skeleton Player 1'),
|
||||
Player(name: 'Skeleton Player 2'),
|
||||
],
|
||||
),
|
||||
winner: Player(name: 'Skeleton Player 1'),
|
||||
),
|
||||
);
|
||||
|
||||
@override
|
||||
void 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
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: CustomTheme.backgroundColor,
|
||||
body: Stack(
|
||||
children: [
|
||||
Column(
|
||||
children: [
|
||||
Container(margin: const EdgeInsets.only(bottom: 75)),
|
||||
Expanded(
|
||||
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);
|
||||
});
|
||||
},
|
||||
return FutureBuilder<List<Game>>(
|
||||
future: _gameListFuture,
|
||||
builder: (BuildContext context, AsyncSnapshot<List<Game>> snapshot) {
|
||||
if (snapshot.hasError) {
|
||||
return const Center(
|
||||
heightFactor: 4,
|
||||
child: Text(
|
||||
'Error while loading recent games.',
|
||||
),
|
||||
);
|
||||
}
|
||||
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