Add clearable search button to home search bar

README.md

@@ -42,3 +42,6 @@ A few resources to get you started if this is your first Flutter project:
 For help getting started with Flutter, view our 
 [online documentation](https://flutter.io/docs), which offers tutorials, 
 samples, guidance on mobile development, and a full API reference.
+
+## Update
+- Added a clearable search field in the home screen search card, making it easier to reset search text quickly.

lib/widgets/search_card.dart

@@ -1,7 +1,35 @@
 import 'package:flutter/material.dart';
 
-class SearchCard extends StatelessWidget {
-  final TextEditingController _searchControl = new TextEditingController();
+class SearchCard extends StatefulWidget {
+  @override
+  _SearchCardState createState() => _SearchCardState();
+}
+
+class _SearchCardState extends State<SearchCard> {
+  final TextEditingController _searchControl = TextEditingController();
+  bool _hasText = false;
+
+  void _onTextChanged() {
+    final hasTextNow = _searchControl.text.isNotEmpty;
+    if (hasTextNow != _hasText) {
+      setState(() {
+        _hasText = hasTextNow;
+      });
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _searchControl.addListener(_onTextChanged);
+  }
+
+  @override
+  void dispose() {
+    _searchControl.removeListener(_onTextChanged);
+    _searchControl.dispose();
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -38,10 +66,20 @@ class SearchCard extends StatelessWidget {
               Icons.search,
               color: Colors.black,
             ),
-            suffixIcon: Icon(
-              Icons.filter_list,
-              color: Colors.black,
-            ),
+            suffixIcon: _hasText
+                ? IconButton(
+                    icon: Icon(
+                      Icons.clear,
+                      color: Colors.black,
+                    ),
+                    onPressed: () {
+                      _searchControl.clear();
+                    },
+                  )
+                : Icon(
+                    Icons.filter_list,
+                    color: Colors.black,
+                  ),
             hintStyle: TextStyle(
               fontSize: 15.0,
               color: Colors.black,