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,22 +80,20 @@ class _MyHomePageState extends State<MyHomePage> {
), ),
body: RefreshIndicator( body: RefreshIndicator(
onRefresh: _refreshGames, onRefresh: _refreshGames,
child: LayoutBuilder( child: SingleChildScrollView(
builder: (context, constraints) {
final cardWidth = constraints.maxWidth / 2;
final cardHeight = (cardWidth * 215) / 400; // Maintain aspect ratio
return SingleChildScrollView(
padding: const EdgeInsets.all(8), padding: const EdgeInsets.all(8),
child: Wrap( child: Column(
spacing: 8,
runSpacing: 8,
children: [ children: [
...games.values.map( for (var i = 0; i < games.length + 1; i += 2)
(game) => SizedBox( Padding(
width: cardWidth - 10, // Subtract spacing to fit 3 cards padding: const EdgeInsets.only(bottom: 8),
height: cardHeight - 10, child: Row(
child: GameCard( crossAxisAlignment: CrossAxisAlignment.start,
game: game, children: [
Expanded(
child: i < games.length
? GameCard(
game: games.values.elementAt(i),
onGameUpdated: (game) async { onGameUpdated: (game) async {
game = await GameRepository.upsert(game); game = await GameRepository.upsert(game);
setState(() { setState(() {
@@ -103,18 +101,13 @@ class _MyHomePageState extends State<MyHomePage> {
}); });
}, },
onDelete: () async { onDelete: () async {
await GameRepository.delete(game); await GameRepository.delete(games.values.elementAt(i));
setState(() { setState(() {
games.remove(game.name); games.remove(games.values.elementAt(i).name);
}); });
}, },
), )
), : NewGameCard(
),
SizedBox(
width: cardWidth - 10, // Subtract spacing to fit 3 cards
height: cardHeight - 10,
child: NewGameCard(
onGameCreated: (game) async { onGameCreated: (game) async {
game = await GameRepository.upsert(game); game = await GameRepository.upsert(game);
setState(() { setState(() {
@@ -123,10 +116,31 @@ class _MyHomePageState extends State<MyHomePage> {
}, },
), ),
), ),
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
),
],
),
),
], ],
), ),
);
},
), ),
), ),
); );

View File

@@ -181,9 +181,12 @@ class _GameCardState extends State<GameCard>
Positioned.fill( Positioned.fill(
child: ClipRRect( child: ClipRRect(
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(12),
child: Opacity(
opacity: 0.4,
child: Image.memory(widget.game.imageData!, fit: BoxFit.cover), child: Image.memory(widget.game.imageData!, fit: BoxFit.cover),
), ),
), ),
),
if (hasImage) if (hasImage)
Positioned.fill( Positioned.fill(
child: Container( child: Container(
@@ -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,