How to get value from a list of values in flutter

Viewed 278

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),
            ),
          ],
        ),
      ),
    );
  }
}
1 Answers

At first, you need to convert your widget to a StatefulWidget. Then, you need to wrap with InkWell widget for each Text and Icon widget. And they will all have isSelected properties themselves.

It will look like this:

class VisitTypeFees extends StatefulWidget {
  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
  _VisitTypeFeesState createState() => _VisitTypeFeesState();
}

class _VisitTypeFeesState extends State<VisitTypeFees> {
  bool iconSelected;
  bool firstTextSelected;
  bool seccondTextSelected;

  @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: widget.onSelected ? kSecondaryColor : Colors.white,
            borderRadius: BorderRadius.circular(10),
            boxShadow: [kDefaultShadow]),
        child: Row(
          children: [
            InkWell(
              onTap: () {
                // icon selected!
                setState(() {
                  iconSelected = true;
                  firstTextSelected = false;
                  seccondTextSelected = false;
                });
              },
              child: Container(
                height: getProportionateScreenHeight(50),
                width: getProportionateScreenHeight(50),
                decoration: BoxDecoration(
                    color: widget.onSelected
                        ? Colors.white
                        : kPrimaryLightColor.withOpacity(0.6),
                    borderRadius: BorderRadius.circular(10)),
                child: Icon(
                  widget.icon,
                  color: widget.onSelected ? kSecondaryColor : kPrimaryColor,
                ),
              ),
            ),
            SizedBox(
              width: getProportionateScreenWidth(7.5),
            ),
            InkWell(
              onTap: () {
                // first text - title and subtitle selected!
                setState(() {
                  iconSelected = false;
                  firstTextSelected = true;
                  seccondTextSelected = false;
                });
              },
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    widget.title,
                    style: TextStyle(
                        color: widget.onSelected ? Colors.white : Colors.black,
                        fontSize: getProportionateScreenWidth(15),
                        fontWeight: FontWeight.w600),
                  ),
                  Text(
                    widget.subTitle,
                    style: TextStyle(
                        color: widget.onSelected ? Colors.white : kTextColor,
                        fontSize: getProportionateScreenWidth(12),
                        fontWeight: FontWeight.w500),
                  ),
                ],
              ),
            ),
            Spacer(),
            InkWell(
              onTap: () {
                // second text - amount selected.
                setState(() {
                  iconSelected = false;
                  firstTextSelected = false;
                  seccondTextSelected = true;
                });
              },
              child: Text(
                widget.amount,
                style: TextStyle(
                    color: widget.onSelected ? Colors.white : kPrimaryColor,
                    fontSize: getProportionateScreenWidth(15),
                    fontWeight: FontWeight.bold),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Related