How do i make an onTap toggle Icon to switch between two 'username' and 'Anonymous on Flutter?

Question

I am making a Charity App project, and I am struggling to figure out how to have an anonymous button before someone submits their donation. I want the anonymous option to display before someone submits their donation, as well as on the public feed, where no one can see their username. Just like GoFundMe's anonymous toggle button.

I tried making a checkbox widget with a setState fucntion to change to the Users_tile on the public feed. But I can figure out why its not displaying. I also tried it with an if/else statement but I couldn't figure it out.

---

ListTile(
              leading: GestureDetector(
                onTap: () {},
                child: Row(
                  children: [
                    Icon(Icons.kayaking, size: 30,),
                      
                SizedBox(width: 4,),
                      
                //username
                Text(widget.post.username,               
                  style: TextStyle(
                    //color: AppColors.blue,
                    fontSize: 15,
                    //fontFamily: 'lexend'
                    ),
                  ),
                      
                  const Spacer(),
                      
                  // buttons -> more options: delete
                  GestureDetector(
                    onTap: () => _showOptions(),
                    child: Icon(Icons.more_horiz,color: AppColors.blue,
                    ),
                    )
                  ]
                )
             ),
            ),

            else...[ 

            ListTile(
              leading: GestureDetector(
                onTap: () {},
                child: Row(
                  children: [
                    Icon(Icons.skateboarding, size: 30,),
                      
                SizedBox(width: 4,),
                      
                //username
                Text('Anonymous',               
                  style: TextStyle(
                    //color: AppColors.blue,
                    fontSize: 15,
                    //fontFamily: 'lexend'
                    ),
                  ),
                      
                  const Spacer(),
                      
                  // buttons -> more options: delete
                  GestureDetector(
                    onTap: () {},
                    child: Icon(Icons.more_horiz,color: AppColors.blue,
                    ),
                    )
                  ]
                )
              ),
            ), 

            ],

                Checkbox(
                   value: anonCheck, 
                   // 53:39
                    onChanged: (bool? value) {
                     setState(() {
                       anonCheck = value;
                      });
                      },
                        //activeColor: AppColors.blue,
                        //checkColor: AppColors.white,
                                ),

I also put the Checkbox widget I used.

If anyone could help it would be greatly appreciated

I tried a boolean with an if/else statement but I couldn't get it to work.

Answer 1

To show different text value due to checkbox interaction, I recommend this approach. First of all I didn't see any need to use if/else statement and you can just use Ternary Operator to switch text value. To learn more about ternary Operator you can use this link. Beside that If you use ListTile, you can handle your widgets in three position of Leading, title and trailing, so in your example code, you can omit the Row widget. I have written an example code according to your provided one that you can find it below:

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var _anonCheck = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            InkWell(
              onTap: () {},
              child: SizedBox(
                width: 300,
                child: ListTile(
                  leading: Icon(_anonCheck ? Icons.skateboarding : Icons.kayaking, size: 30),
                  title: Text(
                    _anonCheck ? 'Anonymous' : 'UserName',
                  ),
                  trailing: IconButton(
                    onPressed: () {},
                    icon: const Icon(Icons.more_horiz),
                    color: Colors.blue,
                  ),
                ),
              ),
            ),
            Checkbox(
              value: _anonCheck,
              onChanged: (value) => setState(() {
                _anonCheck = value!;
              }),
            )
          ],
        ),
      ),
    );
  }
}

If you expect more, feel free to leave comment and I would be happy to provide you more code.