Want to highlight selected widget in flutter - flutter

Question

I have made an demo app where I have created a custom widget and using this custom widget many times. now I want to highlight widget with different colour than others on tap..like BottomNavigationBarItem showing selected barite with differ colour than other
what should I implement to do it...specially any short way so that it can work with many same widgets..
here is my simple coding..
my custom widget
class MyContainer extends StatelessWidget {
final VoidCallback ontap;
MyContainer({required this.ontap});
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(10),
child: GestureDetector(
onTap: ontap,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.circular(20),
//border:isselected==true? Border.all(width: 2,color: Colors.blue):null,
),
),
),
);
}
}
and here is home file
class _HomeScreenState extends State<HomeScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Expanded(
child: Row(
children: [
Expanded(child: MyContainer(
ontap: () {
setState(() {});
},
)),
Expanded(child: MyContainer(
ontap: () {
setState(() {});
},
))
],
)),
Expanded(child: MyContainer(
ontap: () {
setState(() {});
},
)),
],
),
);
}
}

Answer 1

You can use nullable int to hold selected index, and index can be considered as widget ID. Also pass the bool to show selected condition.
class MyContainer extends StatelessWidget {
final VoidCallback ontap;
bool isSelected;
MyContainer({
required this.ontap,
this.isSelected = false,
});
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(10),
child: GestureDetector(
onTap: ontap,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.circular(20),
border: isSelected == true
? Border.all(width: 2, color: Colors.blue)
: null,
),
),
),
);
}
}
class HomeScreen extends StatefulWidget {
HomeScreen({Key? key}) : super(key: key);
#override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int? selectedIndex;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Expanded(
child: Row(
children: [
Expanded(
child: MyContainer(
isSelected: selectedIndex == 1,
ontap: () {
selectedIndex = 1;
setState(() {});
},
),
),
Expanded(
child: MyContainer(
isSelected: selectedIndex == 2,
ontap: () {
selectedIndex = 2;
setState(() {});
},
),
)
],
)),
Expanded(
child: MyContainer(
isSelected: selectedIndex == 3,
ontap: () {
selectedIndex = 3;
setState(() {});
},
),
),
],
),
);
}
}