search: add timer to search only after 0.5s inactivity

lib/sheet.dart

@@ -1,3 +1,5 @@
+import 'dart:async';
+
 import 'package:flutter/material.dart';
 
 class Sheet {
@@ -37,33 +39,46 @@ class SheetsWidget extends StatefulWidget {
 class _SheetsWidgetState extends State<SheetsWidget> {
   late List<Sheet> filteredSheets;
   final TextEditingController _searchController = TextEditingController();
+  Timer? _debounce;
 
   @override
   void initState() {
     super.initState();
     filteredSheets = widget.sheets;
-    _searchController.addListener(_filterSheets);
+    _searchController.addListener(_onSearchChanged);
   }
 
   @override
   void dispose() {
+    _searchController.removeListener(_onSearchChanged);
     _searchController.dispose();
+    _debounce?.cancel();
     super.dispose();
   }
 
+  void _onSearchChanged() {
+    if (_debounce?.isActive ?? false) _debounce!.cancel();
+
+    _debounce = Timer(const Duration(milliseconds: 500), () {
+      _filterSheets();
+    });
+  }
+
   void _filterSheets() {
     setState(() {
       String query = _searchController.text.toLowerCase().trim();
       List<String> terms = query.split(RegExp(r'\s+')); // Split by whitespace
 
-      filteredSheets = widget.sheets.where((sheet) {
+      filteredSheets =
-        String name = sheet.name.toLowerCase();
+          widget.sheets.where((sheet) {
-        String composer = sheet.composerName.toLowerCase();
+            String name = sheet.name.toLowerCase();
+            String composer = sheet.composerName.toLowerCase();
 
-        // Each term must be found in either the name or composer
+            // Each term must be found in either the name or composer
-        return terms
+            return terms.every(
-            .every((term) => name.contains(term) || composer.contains(term));
+              (term) => name.contains(term) || composer.contains(term),
-      }).toList();
+            );
+          }).toList();
     });
   }
 
@@ -82,12 +97,13 @@ class _SheetsWidgetState extends State<SheetsWidget> {
             decoration: InputDecoration(
               hintText: 'Search...',
               prefixIcon: const Icon(Icons.search),
-              suffixIcon: _searchController.text.isNotEmpty
+              suffixIcon:
-                  ? IconButton(
+                  _searchController.text.isNotEmpty
-                      icon: const Icon(Icons.clear),
+                      ? IconButton(
-                      onPressed: _clearSearch,
+                        icon: const Icon(Icons.clear),
-                    )
+                        onPressed: _clearSearch,
-                  : null,
+                      )
+                      : null,
               border: OutlineInputBorder(
                 borderRadius: BorderRadius.circular(8.0),
               ),