diff --git a/README.md b/README.md index 08e7814..55c51b2 100644 --- a/README.md +++ b/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. diff --git a/lib/widgets/search_card.dart b/lib/widgets/search_card.dart index 07c8e60..f1a65fd 100644 --- a/lib/widgets/search_card.dart +++ b/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 { + 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,