I have three containers with different information(Strings and Icon) in each and that I want to put in a column.
I want to get the value of the clicked one and want to change the color of the container when clicked, how can I do that, please?
Also, I want to get the value of the strings selected
I think it's simple but I seem not to find a way to do that.
This is my Container widget:
class VisitTypeFees extends StatelessWidget {
const VisitTypeFees({
Key key,
this.onSelected = false,
this.title,
this.subTitle,
this.amount,
this.icon,
}) : super(key: key);
final bool onSelected;
final String title, subTitle, amount;
final IconData icon;
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () {},
child: Container(
height: getProportionateScreenHeight(65),
width: SizeConfig.screenWidth - 20,
padding: EdgeInsets.symmetric(
horizontal: getProportionateScreenWidth(10),
vertical: getProportionateScreenWidth(7.5),
),
decoration: BoxDecoration(
color: onSelected ? kSecondaryColor : Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [kDefaultShadow]
),
child: Row(
children: [
Container(
height: getProportionateScreenHeight(50),
width: getProportionateScreenHeight(50),
decoration: BoxDecoration(
color: onSelected
? Colors.white
: kPrimaryLightColor.withOpacity(0.6),
borderRadius: BorderRadius.circular(10)),
child: Icon(
icon,
color: onSelected ? kSecondaryColor : kPrimaryColor,
),
),
SizedBox(
width: getProportionateScreenWidth(7.5),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
title,
style: TextStyle(
color: onSelected ? Colors.white : Colors.black,
fontSize: getProportionateScreenWidth(15),
fontWeight: FontWeight.w600),
),
Text(
subTitle,
style: TextStyle(
color: onSelected ? Colors.white : kTextColor,
fontSize: getProportionateScreenWidth(12),
fontWeight: FontWeight.w500),
),
],
),
Spacer(),
Text(
amount,
style: TextStyle(
color: onSelected ? Colors.white : kPrimaryColor,
fontSize: getProportionateScreenWidth(15),
fontWeight: FontWeight.bold),
),
],
),
),
);
}
}