I have a search bar like this in my Flutter project and it's working fine but I'm just wondering how can I keep X icon even though a user click "Enter" on their keyboard or when they click the screen outside of the search bar?.
Currently the X icon is showing only when a user tap on the search bar. Basically I want X Icon to appear as long as there is user text on the search bar.
Search Icon will appear back when ever the search bar is empty.
Any suggestion or help would be really appreciated.
Row(
children: [
Expanded(
child: Container(
padding: EdgeInsets.only(left: 20, right: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Container(
margin: EdgeInsets.only(bottom: 6),
child: TextFormField(
focusNode: _focusNode,
style: TextStyle(
fontSize: 16,
color: Colors.black
height: 1,
fontWeight: FontWeight.w100),
decoration: InputDecoration(
hintStyle: TextStyle(
color: Colors.black
fontSize: 16,
height: 1,
fontWeight: FontWeight.w100),
border: InputBorder.none,
hintText: "Search"),
onChanged: (text) {
loadData();
},
controller: search),
),
),
focused.value == true
? GestureDetector(
onTap: () {
search.clear();
FocusScope.of(context).requestFocus(
new FocusNode()); //remove focus
focused.value = false;
(context as Element).markNeedsBuild();
},
child: SvgPicture.asset(
iconsPath "close.svg",
color: Colors.black
width: 20,
),
)
: loading.value
? SpinKitFadingCube(
color: Colors.blue
size: 16.0,
)
: SvgPicture.asset(
iconsPath "search.svg",
color: Colors.black
width: 20,
)
],
),
),
),
],
),
CodePudding user response：
Use TextEditingController for check icon:
Try:
Row(
children: [
Expanded(
child: Container(
padding: EdgeInsets.only(left: 20, right: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Container(
margin: const EdgeInsets.only(bottom: 6),
child: TextFormField(
focusNode: _focusNode,
style: const TextStyle(
fontSize: 16,
color: Colors.black,
height: 1,
fontWeight: FontWeight.w100),
decoration: const InputDecoration(
hintStyle: TextStyle(
color: Colors.black,
fontSize: 16,
height: 1,
fontWeight: FontWeight.w100),
border: InputBorder.none,
hintText: "Search"),
onChanged: (text) {
setState(() {
// loadData();
});
},
controller: search),
),
),
search.text.isNotEmpty
? GestureDetector(
onTap: () {
search.clear();
FocusScope.of(context).requestFocus(
new FocusNode()); //remove focus
// _focusNode.hasFocus = false;
(context as Element).markNeedsBuild();
},
child: Icon(CupertinoIcons.clear),
)
: Icon(CupertinoIcons.search)
],
),
),
),
],
),
CodePudding user response：
In your current implementation, you have used "focused.value" instead try adding texteditingcontroller to Textformfield and check its value length.