Home > OS >  Flutter set container colors depends on state
Flutter set container colors depends on state

Time:01-05

im having a bit problem with my flutter project.

i have a task list screen and i want to change widget colors when task done, like disabled buttons(pale colors) but it can be tapped

this is my screen

codes

this is my widget

  return Container(
    margin: EdgeInsets.only(bottom: 10),
    padding: EdgeInsets.only(left: 15, top: 7, bottom: 7),
    height: GeneralConstants.instance.popupBoxHeight,
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(7),
        color: ColorConstants.instance.mainColor),
    child: InkWell(
      onTap: () {
        print("${baslik} Clicked");
      },
      child: Column(
        children: [
          SizedBox(
            height: 25,
            width: double.infinity,
            child: AutoSizeText(
              baslik,
              style: GoogleFonts.oswald(
                  color: ColorConstants.instance.headerColor, fontSize: 18),
            ),
          ),
          Expanded(
            child: IgnorePointer(
              ignoring: true,
              child: ListView(
                children: [
                  AutoSizeText(
                    govde,
                    style: GoogleFonts.openSans(
                        color: ColorConstants.instance.bodyColor, fontSize: 10),
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    ),
  );
} ```

CodePudding user response:

I have two solutions to solve it:

  1. You can send the row color from outside and if the task is done send a pale color. For more information please read this article.

  2. If you return null on InkWell onTap it becomes disabled and shows a pale color. But I'm sure InkWell shows a shadow when you click it, I suggest you use GestureDetector widget for a clickable widget.

CodePudding user response:

    Color rowColor;
    bool taskDoneStatus = false;  /* get status from api or any toher place.. */
    if(taskDoneStatus){
      rowColor = Colors.pinkAccent;
    }else{
      rowColor = Colors.grey;

    }
     return Container(
    margin: EdgeInsets.only(bottom: 10),
    padding: EdgeInsets.only(left: 15, top: 7, bottom: 7),
    height: GeneralConstants.instance.popupBoxHeight,
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(7),
        color: rowColor),
    child: InkWell(
      onTap: () {
        print("${baslik} Clicked");
      },
      child: Column(
        children: [
          SizedBox(
            height: 25,
            width: double.infinity,
            child: AutoSizeText(
              baslik,
              style: GoogleFonts.oswald(
                  color: ColorConstants.instance.headerColor, fontSize: 18),
            ),
          ),
          Expanded(
            child: IgnorePointer(
              ignoring: true,
              child: ListView(
                children: [
                  AutoSizeText(
                    govde,
                    style: GoogleFonts.openSans(
                        color: ColorConstants.instance.bodyColor, fontSize: 10),
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    ),
  );
} 
  •  Tags:  
  • Related