Merge pull request #27 from dagimg-dot/feat/clear-button

feat: add clear button for the search box (resolves #26)
dagmawibabi · Sep 4, 2024 · 35f5509 · 35f5509
2 parents 78f0149 + c2031e0
commit 35f5509
Showing 1 changed file with 30 additions and 0 deletions.
diff --git a/lib/components/search_box.dart b/lib/components/search_box.dart
@@ -17,6 +17,24 @@ class SearchBox extends StatefulWidget {
 }
 
 class _SearchBoxState extends State<SearchBox> {
+  @override
+  void initState() {
+    super.initState();
+    widget.searchTermController.addListener(() {
+      setState(() {});
+    });
+  }
+
+  @override
+  void dispose() {
+    widget.searchTermController.dispose();
+    super.dispose();
+  }
+
+  void clearSearchQuery() {
+    widget.searchTermController.clear();
+  }
+
   @override
   Widget build(BuildContext context) {
     return Container(
@@ -64,6 +82,18 @@ class _SearchBoxState extends State<SearchBox> {
                   hintText: "Search...",
                   hintStyle: TextStyle(color: Colors.grey[700]),
                   border: InputBorder.none,
+                  contentPadding: const EdgeInsets.symmetric(vertical: 15.0),
+                  suffixIcon: widget.searchTermController.text.isNotEmpty
+                      ? IconButton(
+                          onPressed: () {
+                            clearSearchQuery();
+                          },
+                          icon: const Icon(
+                            Icons.clear,
+                            color: Colors.grey,
+                          ),
+                        )
+                      : null,
                 ),
                 onSubmitted: (searchTerm) {
                   widget.searchFunction(resetPagination: true);