Home > Software design >  Action for press IconButton in flutter
Action for press IconButton in flutter

Time:10-08

I have a problem for click the button and change it. and onPressed is work and print 'press' but widgets not change. I have this part code : . . . . . . . .

. . .

. . . . . . . . .

. . . . .

. . . . . . . . . . . . .

. . . . . . .

. . . . . .

Container(
     width: pageWidth * 0.45,
     height: pageWidth * 0.128,
     decoration: BoxDecoration(
        color: isFollowing
          ? MyColors.white
          : MyColors.orange,
          border: Border.all( color: MyColors.lightGrey, width: 1),
          borderRadius: BorderRadius.circular(15),
        ),
   child: Padding(
     padding: EdgeInsets.only(right: pageWidth * 0.12),
       child: Row(
      children: [
      IconButton(
       padding: EdgeInsets.zero,
      constraints: BoxConstraints(),
      onPressed: () {
     print("press");
     setState(() {
    isFollowing = !isFollowing;  }); },
    icon: SvgPicture.asset(
    isFollowing? addCircle : heart ,
      width: pageWidth * 0.05,
      height: pageWidth * 0.05,
     color: isFollowing ? MyColors.black : MyColors.white
        ),
        ),
      Text( isFollowing
        ?"follow"
        : "unfollow",
      style: TextStyle(
     color: isFollowing
      ? Colors.black
      : Colors.white,
      fontWeight: FontWeight.bold)),
                                  ],
                                ),
                              ),
                            ),

so can anyone help me please how can I do it?

CodePudding user response:

You can create a boolean to see if the user is following and then set parameter according to it.

bool isFollowing = false;
...
Container(
  width: pageWidth * 0.45,
  height: pageWidth * 0.128,
  decoration: BoxDecoration(
    color: isFollowing ? MyColors.orange : ? MyColors.white,
    border: Border.all(
      color: MyColors.lightGrey, width: 1),
    borderRadius: BorderRadius.circular(15),
  ),
  child: Padding(
    padding: EdgeInsets.only(right: pageWidth * 0.12),
    child: Row(
      children: [
        IconButton(
          padding: EdgeInsets.zero,
          constraints: 
            BoxConstraints(),
          onPressed: () {
            setState((){
              if(isFollowing){
                isFollowing = false;
              }
              else{
                isFollowing = true;
              }
              // you can do this in a single line by doing this,
              // isFollowing = isFollowing ? false : true; 
            });
          },
          icon: SvgPicture.asset(
            addCircle,
            width: pageWidth * 0.05,
            height: pageWidth * 0.05,
          ),
        ),
        Text(isFollowing ? " unfollow " : "  follow ",
          style: TextStyle(
          color: isFollowing ? Colors.white : Colors.black,
          ),
        ),
      ],
    ),
  ),
),
  • Related