Fix the god damn grid

This commit is contained in:
2025-02-22 17:00:16 +01:00
parent e5fc67ef43
commit 4f1a947d2b
2 changed files with 73 additions and 52 deletions

View File

@@ -32,7 +32,7 @@ class MyApp extends StatelessWidget {
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
), ),
textTheme: const TextTheme( textTheme: const TextTheme(
titleLarge: TextStyle(fontSize: 22, fontWeight: FontWeight.bold), titleLarge: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
bodyLarge: TextStyle(fontSize: 18), bodyLarge: TextStyle(fontSize: 18),
bodyMedium: TextStyle(fontSize: 16), bodyMedium: TextStyle(fontSize: 16),
bodySmall: TextStyle(fontSize: 14), bodySmall: TextStyle(fontSize: 14),
@@ -80,53 +80,67 @@ class _MyHomePageState extends State<MyHomePage> {
), ),
body: RefreshIndicator( body: RefreshIndicator(
onRefresh: _refreshGames, onRefresh: _refreshGames,
child: LayoutBuilder( child: SingleChildScrollView(
builder: (context, constraints) { padding: const EdgeInsets.all(8),
final cardWidth = constraints.maxWidth / 2; child: Column(
final cardHeight = (cardWidth * 215) / 400; // Maintain aspect ratio children: [
return SingleChildScrollView( for (var i = 0; i < games.length + 1; i += 2)
padding: const EdgeInsets.all(8), Padding(
child: Wrap( padding: const EdgeInsets.only(bottom: 8),
spacing: 8, child: Row(
runSpacing: 8, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
...games.values.map( Expanded(
(game) => SizedBox( child: i < games.length
width: cardWidth - 10, // Subtract spacing to fit 3 cards ? GameCard(
height: cardHeight - 10, game: games.values.elementAt(i),
child: GameCard( onGameUpdated: (game) async {
game: game, game = await GameRepository.upsert(game);
onGameUpdated: (game) async { setState(() {
game = await GameRepository.upsert(game); games[game.name] = game;
setState(() { });
games[game.name] = game; },
}); onDelete: () async {
}, await GameRepository.delete(games.values.elementAt(i));
onDelete: () async { setState(() {
await GameRepository.delete(game); games.remove(games.values.elementAt(i).name);
setState(() { });
games.remove(game.name); },
}); )
}, : NewGameCard(
onGameCreated: (game) async {
game = await GameRepository.upsert(game);
setState(() {
games[game.name] = game;
});
},
),
), ),
), const SizedBox(width: 8),
Expanded(
child: i + 1 < games.length
? GameCard(
game: games.values.elementAt(i + 1),
onGameUpdated: (game) async {
game = await GameRepository.upsert(game);
setState(() {
games[game.name] = game;
});
},
onDelete: () async {
await GameRepository.delete(games.values.elementAt(i + 1));
setState(() {
games.remove(games.values.elementAt(i + 1).name);
});
},
)
: const SizedBox(), // Empty space for odd number of items
),
],
), ),
SizedBox( ),
width: cardWidth - 10, // Subtract spacing to fit 3 cards ],
height: cardHeight - 10, ),
child: NewGameCard(
onGameCreated: (game) async {
game = await GameRepository.upsert(game);
setState(() {
games[game.name] = game;
});
},
),
),
],
),
);
},
), ),
), ),
); );

View File

@@ -181,7 +181,10 @@ class _GameCardState extends State<GameCard>
Positioned.fill( Positioned.fill(
child: ClipRRect( child: ClipRRect(
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(12),
child: Image.memory(widget.game.imageData!, fit: BoxFit.cover), child: Opacity(
opacity: 0.4,
child: Image.memory(widget.game.imageData!, fit: BoxFit.cover),
),
), ),
), ),
if (hasImage) if (hasImage)
@@ -193,16 +196,16 @@ class _GameCardState extends State<GameCard>
begin: Alignment.topCenter, begin: Alignment.topCenter,
end: Alignment.bottomCenter, end: Alignment.bottomCenter,
colors: [ colors: [
Colors.transparent, Colors.black.withAlpha(110),
Colors.black.withOpacity(0.7), Colors.black.withAlpha(90),
Colors.black.withOpacity(0.9), Colors.black.withAlpha(70),
], ],
), ),
), ),
), ),
), ),
Padding( Padding(
padding: const EdgeInsets.all(16.0), padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 24.0),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
@@ -260,7 +263,7 @@ class _GameCardState extends State<GameCard>
], ],
), ),
), ),
const SizedBox(height: 8), const SizedBox(height: 16),
Row( Row(
children: [ children: [
SizedBox( SizedBox(
@@ -283,6 +286,7 @@ class _GameCardState extends State<GameCard>
), ),
], ],
), ),
const SizedBox(height: 12),
Row( Row(
children: [ children: [
SizedBox( SizedBox(
@@ -304,6 +308,7 @@ class _GameCardState extends State<GameCard>
), ),
], ],
), ),
const SizedBox(height: 12),
Row( Row(
children: [ children: [
SizedBox( SizedBox(
@@ -324,7 +329,9 @@ class _GameCardState extends State<GameCard>
), ),
], ],
), ),
const SizedBox(height: 16),
const Divider(), const Divider(),
const SizedBox(height: 16),
TextField( TextField(
controller: _versionRegexController, controller: _versionRegexController,
focusNode: _versionRegexFocus, focusNode: _versionRegexFocus,