Question 263591 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to change the child of a listtile when tapped

searchResult = ['john','doe','smith'];
Expanded(
                  child: Container(
                    width: ScreenSize.screenWidth,
                    child: Center(
                      child:searchResult.isEmpty? Text("Oops! Looks like you have no friends at the moment.") : ListView.builder(itemCount: searchResult.length,itemBuilder: (context , index){
                        return ListTile(
                          
                          
                          title: Text(searchResult[index]['username']),
                          subtitle: Text(searchResult[index]['email']),
                          
                          trailing: GestureDetector(
                            onTap: () {
                              
                              
                              
                              
                            },
                            child: Icon(Icons.add_circle_outline)),
                            
                        );

                      })
                    ),
                  ),
                ),

In the above code i want to perform a function in the onTap which when tapped changes the icon of that particular list tile Only to a Icon(Icons.done).

I tried using the setState but couldnt figure it out.

Tags:

2

Answers


  1. 0

    Create a state level variable,

     bool isDone = false;

    Change the variable value on click on the button and change the value accordingly.

        searchResult = ['john','doe','smith']; 



Expanded( 
                  child: Container(
                    width: ScreenSize.screenWidth,
                    child: Center(
                      child:searchResult.isEmpty? Text("Oops! Looks like you have no friends at the moment.") : ListView.builder(itemCount: searchResult.length,itemBuilder: (context , index){
                        return ListTile(
                          
                          
                          title: Text(searchResult[index]['username']),
                          subtitle: Text(searchResult[index]['email']),
                          
                          trailing: GestureDetector(
                            onTap: () {
                              
                              setState((){
                                  isDone = true; 

                                })
                              
                              
                            },
                            child: Icon(isDone ?  Icons.done :  Icons.add_circle_outline)),
                            
                        );

                      })
                    ),
                  ),
                ),
    Login or Signup to reply.
  2. 0 
    class ListTileCustomWidget extends StatefulWidget {
  const ListTileCustomWidget({
    required this.email,
    required this.userName,
    super.key,
  });
  final String email;
  final String userName;

  @override
  State<ListTileCustomWidget> createState() => _ListTileCustomWidgetState();
}

class _ListTileCustomWidgetState extends State<ListTileCustomWidget> {
  bool _isDone = false;
  @override
  Widget build(BuildContext context) {
    return ListTile(
      trailing: GestureDetector(
        onTap: () {
          setState(() {
            _isDone = !_isDone;
          });
        },
        child: Icon(_isDone ? Icons.done : Icons.add_circle_outline),
      ),
      title: Text(widget.email),
      subtitle: Text(widget.userName),
    );
  }
}

    Now pass the value,

        Expanded( 
                          child: Container(
                            width: ScreenSize.screenWidth,
                            child: Center(
                              child:searchResult.isEmpty? Text("Oops! Looks like you have no friends at the moment.") : ListView.builder(
itemCount: searchResult.length,
itemBuilder: (context , index){
         return ListTileCustomWidget (
email: searchResult[index]['email'],
userName : searchResult[index]['username']
    );
 
                              })
                            ),
                          ),
                        ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search