Unable to empty stored string of a variable after textEditingController.clear() - flutter

Question

I am trying to build an animated search widget. When I use this widget in a different screen, I am storing the text of the textEditingController searchController of this search widget in a String variable searchText. The searchText variable is updating fine when I assign it the value of the searchController.text during the onChanged function call of the widget. However, when I click on the icon button of the search widget, I am clearing the searchController but it is not updating the value of the searchText variable. What I understand is that the clear() action is not a part of the onChanged() call.
How do I update the value of the searchText variable when the searchController.clear() is called in the onPressed call of the icon button? I am implementing Tween animation in the onPressed function of the icon button, so I am not sure if I can/should be using it to update the value of the string variable.
My Code
girls_screen.dart
import 'package:animation_search_bar/animation_search_bar.dart';
import 'package:flutter/material.dart';
import 'package:switch_circle_color/model/girls.dart';
import 'package:switch_circle_color/screens/gender.dart';
import 'package:switch_circle_color/screens/girls_cart.dart';
import 'package:switch_circle_color/screens/search_widget.dart';
import 'package:switch_circle_color/screens/selected_girl_details.dart';
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
import '../global_variables/global_variables.dart';
int distance = 15;
int age = 25;
String sortCriterion = "distance";
bool isSingle = false;
bool isSerious = false;
int count = 0;
String searchText = "";
List<Girls> allGirls = [
Girls("Reshmita", 25, 33, "Married", "Serious"),
Girls("Ankita", 17, 26, "Single", "Serious"),
Girls("Rupali", 42, 28, "Single", "Casual"),
Girls("Monica", 50, 24, "Single", "Casual"),
Girls("Sakshi", 9, 27, "Married", "Casual"),
];
List<Girls> filteredGirlsbyDistance = [];
List<Girls> filteredGirlsbyAge = [];
List<Girls> filteredGirls = [];
List<Girls> filteredGirlsbySerious = [];
List<Girls> filteredGirlsbySingle = [];
//List<Girls> girlsCart = [];
void addGirlToCart(Girls girl) {
girlsCart.add(girl);
cartValue = cartValue + girl.age;
}
void removeGirlsfromCart(Girls girl) {
girlsCart.remove(girl);
cartValue = cartValue - girl.age;
}
String selectedGirlName = "";
int? selectedGirlDistance;
void populateFilteredGirls(int dis, int ag) {
filteredGirlsbyDistance.clear();
filteredGirlsbyAge.clear();
filteredGirlsbySingle.clear();
filteredGirlsbySerious.clear();
filteredGirls.clear();
//int len = filteredGirls.length;
for (int i = 0; i < allGirls.length; i++) {
if (allGirls[i].distance <= dis) {
filteredGirlsbyDistance.add(allGirls[i]);
}
}
filteredGirls = filteredGirlsbyDistance;
for (int i = 0; i < filteredGirls.length; i++) {
if (filteredGirls[i].age <= ag) {
filteredGirlsbyAge.add(filteredGirls[i]);
}
}
filteredGirls = filteredGirlsbyAge;
//len = filteredGirls.length;
if (isSingle == true) {
for (int i = 0; i < filteredGirls.length; i++) {
if (filteredGirls[i].status.toLowerCase() == "single") {
filteredGirlsbySingle.add(filteredGirls[i]);
}
}
filteredGirls = filteredGirlsbySingle;
}
if (isSerious == true) {
for (int i = 0; i < filteredGirls.length; i++) {
if (filteredGirls[i].lookingFor.toLowerCase() == "serious") {
filteredGirlsbySerious.add(filteredGirls[i]);
}
}
filteredGirls = filteredGirlsbySerious;
}
//filteredGirls = filteredGirls.toSet().toList();
}
class GirlsResultGrid extends StatefulWidget {
GirlsResultGrid({Key? key}) : super(key: key);
#override
State<GirlsResultGrid> createState() => _GirlsResultGridState();
}
class _GirlsResultGridState extends State<GirlsResultGrid> {
//late final GlobalKey<AnimationLimiterState> _key
#override
Widget build(BuildContext context) {
return Expanded(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: AnimationLimiter(
key: ValueKey("list $count"),
child: GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 5,
mainAxisSpacing: 5,
childAspectRatio: 2,
children: List.generate(filteredGirls.length, (index) {
return AnimationConfiguration.staggeredGrid(
columnCount: 2,
position: index,
duration: const Duration(milliseconds: 375),
child: SlideAnimation(
child: FadeInAnimation(
child: ListTile(
leading: InkWell(
child: const Icon(Icons.girl_outlined),
onTap: () {
removeGirlsfromCart(filteredGirls[index]);
},
),
trailing: InkWell(
child: Text("${filteredGirls[index].distance} km away"),
onTap: () {
addGirlToCart(filteredGirls[index]);
},
),
title: Text("${filteredGirls[index].name}"),
subtitle: Text(
"${filteredGirls[index].age} years old, ${filteredGirls[index].status}, ${filteredGirls[index].lookingFor}"),
onTap: () {
// setState(() {
// selectedGirlName = filteredGirls[index].name;
// selectedGirlDistance = filteredGirls[index].distance;
// });
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SelectedGirlDetails(
girl: filteredGirls[index],
)));
},
),
),
),
);
}),
//itemCount: ,
//itemBuilder: (BuildContext context, int index) {
),
),
),
);
}
}
class GirlsScreen extends StatefulWidget {
GirlsScreen({Key? key}) : super(key: key);
#override
State<GirlsScreen> createState() => _GirlsScreenState();
}
class _GirlsScreenState extends State<GirlsScreen> {
TextEditingController searchTextEditingController = TextEditingController();
void changeDistance(double num) {
setState(() {
distance = num.round();
populateFilteredGirls(distance, age);
count++;
});
}
void changeAgeLimit(double a) {
setState(() {
age = a.round();
populateFilteredGirls(distance, age);
count++;
});
}
#override
void initState() {
super.initState();
//filteredGirls = allGirls;
distance = 20;
age = 28;
sortCriterion = "distance";
isSingle = false;
isSerious = false;
(sortCriterion == "distance")
? allGirls.sort((a, b) => a.distance.compareTo(b.distance))
: allGirls.sort((a, b) => a.age.compareTo(b.age));
populateFilteredGirls(distance, age);
}
// Widget buildResult(BuildContext context) {
// }
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: [
Padding(padding: EdgeInsets.all(10)),
// ElevatedButton(
// onPressed: () {
// Navigator.push(context,
// MaterialPageRoute(builder: (context) => GenderScreen()));
// },
// child: Text("Go to Gender Screen")),
// Padding(padding: EdgeInsets.all(30)),
SearchWidget(
searchController: searchTextEditingController,
onChanged: (p0) {
setState(() {
searchText = p0;
});
},
),
Text("Girl searched is: $searchText"),
Padding(padding: EdgeInsets.all(10)),
Text("Set max distance"),
Padding(padding: EdgeInsets.all(10)),
Slider(
min: 1.0,
max: 100.0,
divisions: 100,
activeColor: Colors.green,
inactiveColor: Colors.orange,
label: 'Set distance value',
value: distance.toDouble(),
onChanged: (value) {
changeDistance(value);
},
),
Padding(padding: EdgeInsets.all(10)),
Text("Current distance is $distance kms"),
Padding(padding: EdgeInsets.all(10)),
Text("Set max age"),
Padding(padding: EdgeInsets.all(10)),
Slider(
min: 18.0,
max: 60.0,
divisions: 42,
activeColor: Colors.green,
inactiveColor: Colors.orange,
label: 'Set age limit',
value: age.toDouble(),
onChanged: (value) {
changeAgeLimit(value);
},
),
Padding(padding: EdgeInsets.all(10)),
Text("Age limit is $age years"),
Padding(padding: EdgeInsets.all(10)),
Text("Sort by:"),
Padding(padding: EdgeInsets.all(7.5)),
ListTile(
//minLeadingWidth: 30,
title: Text("Age"),
leading: Radio(
value: "age",
groupValue: sortCriterion,
onChanged: (value) {
setState(() {
sortCriterion = value.toString();
allGirls.sort((a, b) => a.age.compareTo(b.age));
populateFilteredGirls(distance, age);
count++;
});
},
),
),
Padding(padding: EdgeInsets.all(7.5)),
ListTile(
//minLeadingWidth: 30,
title: Text("Distance"),
leading: Radio(
value: "distance",
groupValue: sortCriterion,
onChanged: (value) {
setState(() {
sortCriterion = value.toString();
allGirls.sort((a, b) => a.distance.compareTo(b.distance));
populateFilteredGirls(distance, age);
count++;
});
},
),
),
Padding(padding: EdgeInsets.all(10)),
Text("Is Single?"),
Padding(padding: EdgeInsets.all(2.5)),
InkWell(
onTap: () {
setState(() {
isSingle = !isSingle;
populateFilteredGirls(distance, age);
count++;
});
},
child: (isSingle == false)
? Icon(Icons.check_box_outline_blank)
: Icon(Icons.check_box),
),
Padding(padding: EdgeInsets.all(5)),
Text("Is Serious?"),
Padding(padding: EdgeInsets.all(2.5)),
InkWell(
onTap: () {
setState(() {
isSerious = !isSerious;
populateFilteredGirls(distance, age);
count++;
});
},
child: (isSerious == false)
? Icon(Icons.check_box_outline_blank)
: Icon(Icons.check_box),
),
Padding(padding: EdgeInsets.all(10)),
//buildResult(context),
GirlsResultGrid(),
Padding(padding: EdgeInsets.all(25)),
ElevatedButton(
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => GirlsCart()));
},
child: Text("Go to Girls Cart")),
Padding(padding: EdgeInsets.all(25)),
],
),
));
}
}
search_widget.dart
import 'package:flutter/material.dart';
class SearchWidget extends StatefulWidget {
Function(String)? onChanged;
TextEditingController? searchController;
VoidCallback? onTap;
SearchWidget({
Key? key,
this.onChanged,
this.searchController,
this.onTap,
}) : super(key: key);
#override
State<SearchWidget> createState() => _SearchWidgetState();
}
class _SearchWidgetState extends State<SearchWidget>
with SingleTickerProviderStateMixin {
late Animation<double> animation;
late AnimationController animController;
bool isForward = false;
//TextEditingController searchController = TextEditingController();
#override
void initState() {
// TODO: implement initState
super.initState();
animController = AnimationController(
vsync: this,
duration: Duration(milliseconds: 500),
);
final curvedAnimation =
CurvedAnimation(parent: animController, curve: Curves.easeOutExpo);
animation = Tween<double>(begin: 0, end: 150).animate(curvedAnimation)
..addListener(() {
setState(() {});
});
}
#override
Widget build(BuildContext context) {
return Material(
child: Padding(
padding: const EdgeInsets.all(25.0),
child: Container(
width: 220,
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
width: animation.value,
decoration: BoxDecoration(
color: Colors.black87,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
bottomLeft: Radius.circular(50),
),
),
child: Padding(
padding: EdgeInsets.only(left: 20, bottom: 5),
child: TextField(
//autofocus: true,
controller: widget.searchController,
onChanged: widget.onChanged,
cursorColor: Colors.white54,
style: TextStyle(color: Colors.white54, fontSize: 12),
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Search girls...",
hintStyle: TextStyle(color: Colors.white30),
),
),
),
),
Container(
width: 50,
height: 53,
decoration: BoxDecoration(
color: Colors.black87,
borderRadius: animation.value > 1
? BorderRadius.only(
topLeft: Radius.circular(0),
bottomRight: Radius.circular(50),
bottomLeft: Radius.circular(0),
topRight: Radius.circular(50),
)
: BorderRadius.circular(50),
),
child: IconButton(
onPressed: () {
if (!isForward) {
animController.forward();
isForward = true;
} else if (isForward &&
widget.searchController!.text != "") {
widget.searchController!.clear();
} else {
animController.reverse();
isForward = false;
}
},
icon: (!isForward)
? Icon(
Icons.search,
color: Colors.white54,
)
: Icon(
Icons.close_rounded,
color: Colors.white54,
),
),
),
],
),
),
),
);
}
}
Video for reference
https://vimeo.com/735839961

Answer 1

Realized the solution. I added a Voidcallback parameter to the widget, which is called once the cross icon button is tapped on.
In girls_screen.dart
SearchWidget(
searchController: searchTextEditingController,
onChanged: (p0) {
setState(() {
searchText = p0;
});
},
onTap: () {
if (searchText != "") {
setState(() {
searchText = "";
});
}
},
),
In search_widget.dart
child: IconButton(
onPressed: () {
if (!isForward) {
animController.forward();
isForward = true;
} else if (isForward &&
widget.searchController!.text != "") {
widget.searchController!.clear();
} else {
animController.reverse();
isForward = false;
}
widget.onTap!();
},