How to add circleAvatar with listView layout

Question

I am trying to display the contact list with gesture detector but I am unable to add the CircleAvatar image icon before the contact name. Here is the code:

return Scaffold(
        body: new ListView.builder(
      //return ListView.builder(
        itemCount: _contacts!.length,
        itemBuilder: (BuildContext context, int index) {

       return new GestureDetector(
        child: SizedBox(
           height: 75.0,
           child: Text(_contacts![index].displayName),
            
        ),

      onTap: () {
        speak(_contacts![index].displayName);
      },
      onDoubleTap: (){
        speak("double tapped");
      },

    );}));

user_17169037 · Answer

return  GestureDetector(
      onTap:(){},
        child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
        children:[
       CircularAvatar(child:Image.network(_contacts![index].imageurl
)),
Text(_contacts![index].displayName)
       ]
        ),

user_13997210 · Answer

Try below code I have try using GestureDetector and ListTile

Your List

const subjects = [
  'Flutter',
  'Java',
  'Node',
  'PHP',
  'Dart',
  'JavaScript',
  'HTML',
  'CSS',
  'Python',
  'Ruby',
  'React',
];

Your Widget Using GestureDetector

Padding(
    padding: const EdgeInsets.all(10),
    child: ListView.builder(
      itemCount: subjects.length,
      itemBuilder: (context, index) {
        final category = subjects[index];
        return GestureDetector(
          onTap: () {
            print(category);
          },
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: Row(
              children: [
                CircleAvatar(
                  child: Icon(
                    Icons.person,
                  ),
                ),
                SizedBox(
                  width: 10,
                ),
                Text(
                  category,
                  style: const TextStyle(
                    color: Colors.black,
                    fontSize: 15,
                  ),
                ),
              ],
            ),
          ),
        );
      },
    ),
  ),

Your Result Screen Using GestureDetector ->

Your Widget Using ListTile

If you want to add first character of your name/subject in CircleAvatar check leading property code

Padding(
    padding: const EdgeInsets.all(10),
    child: ListView.builder(
      itemCount: subjects.length,
      itemBuilder: (context, index) {
        final category = subjects[index];
        return ListTile(
          onTap: () {
            print(category);
          },
          leading: CircleAvatar(
            child: Text(category[0]),
          ),
          title: Text(
            category,
            style: const TextStyle(
              color: Colors.black,
              fontSize: 15,
            ),
          ),
        );
      },
    ),
  ),

Your Result Screen Using ListTile ->

How to add circleAvatar with listView layout

2 Answers