Right now I'm have a search bar with a search icon on the right but I'm just wondering how to make the cancel icon appear when the user type something instead of just showing the search icon the whole time.
And when the user click cancels icon then, it'll clear the text with data and Search icon will show again.
child: TextFormField(
focusNode: _focusNode,
style: TextStyle(
fontSize: 16,
color: color.state == 'dark'
? Colors.white
: Colors.black,
height: 1,
fontWeight: FontWeight.w100),
decoration: InputDecoration(
hintStyle: TextStyle(
color: color.state == 'dark'
? Color(0xFFA19E9C)
: Color(0xFF858585),
fontSize: 16,
height: 1,
fontWeight: FontWeight.w100),
border: InputBorder.none,
hintText: "Search"),
onChanged: (text) {
loadData();
},
controller: search,),
),
),
loading.value
? SpinKitFadingCube(
color: colorPrimary,
size: 16.0,
)
:
GestureDetector(
onTap: () {
search.clear();
loadData();
},
child: SvgPicture.asset(
iconsPath + "search.svg",
color: color.state == 'dark'
? Colors.white
: Color(0xFF282828),
width: 20,
),
),
``
There is already built-in widget CupertinoSearchTextField
that offer similar kind of functionality.
Example code:
class MyPrefilledSearch extends StatefulWidget {
const MyPrefilledSearch({Key? key}) : super(key: key);
@override
State<MyPrefilledSearch> createState() => _MyPrefilledSearchState();
}
class _MyPrefilledSearchState extends State<MyPrefilledSearch> {
@override
Widget build(BuildContext context) {
return CupertinoSearchTextField(
onChanged: (String value) {
print('The text has changed to: $value');
},
onSubmitted: (String value) {
print('Submitted text: $value');
},
);
}
}
More about CupertinoSearchTextField
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.