Why is my star system isnt work in flutter - flutter

Question

This is my code for making the star turn yellow and grey consistently, but it didn't work. Why?
Widget placeButton(BuildContext context, String name, String image, String id) {
var color;
var isClicked = true;
return Column(children: [
Padding(
padding: const EdgeInsets.fromLTRB(130.0, 0.0, 130.00, 0.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: SizedBox(
height: 300,
width: 400,
child: GestureDetector(
onTap: () {
Navigator.pushNamed(context, id);
},
child: Card(
child: ListTile(
title: Padding(
padding: const EdgeInsets.fromLTRB(20, 5, 20, 0),
child: Text(AppLocalizations.of(context)!.translate(name),
style: TextStyle(fontFamily: 'Manrope', fontSize: 18)),
),
subtitle: Image.network(
image,
height: 250,
),
),
),
),
),
),
),
Container(
height: 40,
width: 200,
padding: EdgeInsets.only(top: 0),
color: Colors.white,
child: ListTile(
leading: Text(
"Rating:",
style: TextStyle(fontFamily: 'Klasik'),
),
trailing: IconButton(
splashRadius: 20,
icon: Icon(Icons.star_border_outlined, color: color),
onPressed: () {
if (isClicked) {
color = Colors.grey;
isClicked = !isClicked;
} else {
color = Colors.yellow;
isClicked = !isClicked;
}
},
),
),
),
]);
}
P/S: Feel free to ask me about the code below. I tried setState but it didn't work. It returns error like this:
The function 'setState' isn't defined.
Try importing the library that defines 'setState', correcting the name to the name of an existing function, or defining a function named 'setState'.

Answer 1

setState is only available within the scope of a StatefulWidget. You might want change the StatelessWidget to a stateful one. Once that's done, you'll need to introduce the variables color and isClicked outside of the build method or any other method that's called from build (such as placeButton in this example). Then you can call setState and change those values.
Here's a simplified example
class MyWidget extends StatefulWidget {
#override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
// Define these outside of your build method
Color color = Colors.grey;
bool isClicked = false;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(child: placeButton(context, 'name', 'image', 'id')),
);
}
Widget placeButton(
BuildContext context,
String name,
String image,
String id,
) {
// rest of your function...
onPressed: () {
// Use setState to change the values
setState(() {
if (isClicked) {
color = Colors.grey;
isClicked = !isClicked;
} else {
color = Colors.yellow;
isClicked = !isClicked;
}
});
},
}
}
When using setState, Flutter will run the build function again and notice the values of color and isClicked have changed and use those new values to update the UI.