Implement some sort of filtering

lib/main.dart

@@ -3,6 +3,7 @@ import 'package:gamer_updater/db.dart';
 import 'package:gamer_updater/game.dart';
 import 'package:gamer_updater/widgets/new_game_card.dart';
 import 'package:gamer_updater/widgets/game_card.dart';
+import 'dart:async';
 
 void main() async {
   await DB.init();
@@ -54,6 +55,9 @@ class MyHomePage extends StatefulWidget {
 
 class _MyHomePageState extends State<MyHomePage> {
   late Map<String, Game> games = {};
+  String searchQuery = "";
+  final TextEditingController _searchController = TextEditingController();
+  Timer? _debounce;
 
   @override
   void initState() {
@@ -61,13 +65,20 @@ class _MyHomePageState extends State<MyHomePage> {
     _refreshGames();
   }
 
+  @override
+  void dispose() {
+    _searchController.dispose();
+    _debounce?.cancel();
+    super.dispose();
+  }
+
   Future<void> _refreshGames() async {
     final games = await GameRepository.getAll();
     games.forEach((key, game) {
       game.updateActualVersion().then((_) {
         GameRepository.upsert(game);
         setState(() {
-          games[game.name] = game;
+          this.games[game.name] = game;
         });
       });
     });
@@ -76,6 +87,24 @@ class _MyHomePageState extends State<MyHomePage> {
     });
   }
 
+  List<Game> get filteredGames {
+    if (searchQuery.isEmpty) {
+      return games.values.toList();
+    }
+    return games.values.where((game) => 
+      game.name.toLowerCase().contains(searchQuery.toLowerCase())
+    ).toList();
+  }
+
+  void _onSearchChanged(String value) {
+    if (_debounce?.isActive ?? false) _debounce!.cancel();
+    _debounce = Timer(const Duration(milliseconds: 100), () {
+      setState(() {
+        searchQuery = value;
+      });
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -86,48 +115,81 @@ class _MyHomePageState extends State<MyHomePage> {
           IconButton(icon: const Icon(Icons.refresh), onPressed: _refreshGames),
         ],
       ),
-      body: RefreshIndicator(
-        onRefresh: _refreshGames,
-        child: SingleChildScrollView(
-          padding: const EdgeInsets.all(8),
-          child: Wrap(
-            spacing: 8,
-            runSpacing: 8,
-            children: [
-              ...games.values.map(
-                (game) => SizedBox(
-                  width: (MediaQuery.of(context).size.width - 24) / 2,
-                  child: GameCard(
-                    game: game,
-                    onGameUpdated: (game) async {
-                      game = await GameRepository.upsert(game);
-                      setState(() {
-                        games[game.name] = game;
-                      });
-                    },
-                    onDelete: () async {
-                      await GameRepository.delete(game);
-                      setState(() {
-                        games.remove(game.name);
-                      });
-                    },
-                  ),
+      body: Column(
+        children: [
+          Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: TextField(
+              controller: _searchController,
+              decoration: InputDecoration(
+                hintText: 'Search games...',
+                prefixIcon: const Icon(Icons.search),
+                suffixIcon: searchQuery.isNotEmpty 
+                  ? IconButton(
+                      icon: const Icon(Icons.clear),
+                      onPressed: () {
+                        _searchController.clear();
+                        setState(() {
+                          searchQuery = "";
+                        });
+                      },
+                    )
+                  : null,
+                border: OutlineInputBorder(
+                  borderRadius: BorderRadius.circular(10),
                 ),
               ),
-              SizedBox(
-                width: (MediaQuery.of(context).size.width - 24) / 2,
-                child: NewGameCard(
-                  onGameCreated: (game) async {
-                    game = await GameRepository.upsert(game);
-                    setState(() {
-                      games[game.name] = game;
-                    });
-                  },
-                ),
-              ),
-            ],
+              onChanged: _onSearchChanged,
+            ),
           ),
-        ),
+          Expanded(
+            child: RefreshIndicator(
+              onRefresh: _refreshGames,
+              child: SingleChildScrollView(
+                padding: const EdgeInsets.all(8),
+                child: Wrap(
+                  spacing: 8,
+                  runSpacing: 8,
+                  children: [
+                    ...filteredGames.map(
+                      (game) => SizedBox(
+                        key: ValueKey(game.name),
+                        width: (MediaQuery.of(context).size.width - 24) / 2,
+                        child: GameCard(
+                          key: ValueKey('card_${game.name}'),
+                          game: game,
+                          onGameUpdated: (game) async {
+                            game = await GameRepository.upsert(game);
+                            setState(() {
+                              games[game.name] = game;
+                            });
+                          },
+                          onDelete: () async {
+                            await GameRepository.delete(game);
+                            setState(() {
+                              games.remove(game.name);
+                            });
+                          },
+                        ),
+                      ),
+                    ),
+                    SizedBox(
+                      width: (MediaQuery.of(context).size.width - 24) / 2,
+                      child: NewGameCard(
+                        onGameCreated: (game) async {
+                          game = await GameRepository.upsert(game);
+                          setState(() {
+                            games[game.name] = game;
+                          });
+                        },
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ),
+        ],
       ),
     );
   }