Same item repeating in list while using listview.separated

Question

For some reason, the list I am trying to display using listView.separated is repeating every item, as shown in screenshot below:

Expected behavior is to display every item only once with a divider, hence I went for listView.separated.

Current code to display this list is:

Widget proTile(Pro pro, BuildContext context) {

        return ListView.separated(
          separatorBuilder: (pro, context) => Divider(
            color: Colors.black,
          ),
          shrinkWrap: true,
          physics: ScrollPhysics(),
          itemCount: pros.length,
          itemBuilder: (context, index) =>
          (GestureDetector(
          child: new Container(padding: EdgeInsets.all(10.0),
          child: new Row(
          children: <Widget>[
            _getProfilePic(pro),
            new Padding(
              padding: EdgeInsets.only(left: 9.0),
            ),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  new Text(
                    '${pro.fullname}',
                   style: new TextStyle(
                     fontSize: 16.0
                   ),
                  ),
                  new Padding(
                    padding: EdgeInsets.only(top:3.0),
                    child: new Text(
                    '${pro.company}',
                    style: new TextStyle(
                      fontSize: 12.0
                    ),
                  )
                  ),
                ],
              ),
            ),
            new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new StarRating(starCount: 5,rating: pro.rating,color: Colors.amber),
                new Padding(
                  padding: EdgeInsets.only(top: 3.0),
                  child: new Text(
                ('${pro.reviewCount} reviews'),
                style: new TextStyle(
                  fontSize: 12.0
                ),),
                ),
              ],
            ),
          ],
          ),
          ),
            // Go to the profile page of the pro
            onTap:()  => Navigator.push(context,
                MaterialPageRoute(builder: (context) => ProfilePage(pro, this.fireBaseUser, this.user))
            )
        )
          )
        );
      }

// Returns a list view of pro list tiles
  Widget buildProList(List<dynamic> pros, BuildContext context) {
    List<Widget> proTiles = new List<Widget>();

    pros.forEach((pro) {
      proTiles.add(proTile(pro, context));
    });

    return new ListView(
      children: proTiles
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Center(
      child: buildProList(pros, context),
    );
  }

Looking for guidance here as where the problem could be and an appropriate solution on it.

---

data output :

Answer 1

You can just use your proTile method, right now you are creating a ListView.separated for each item , which is incorrect, try these changes:

remove the parameter

 Widget proTile(BuildContext context) {

Change your build method

 @override
 Widget build(BuildContext context) {
   return new Center(
     child: proTile(context),
   );
 }

Inside your proTile method, don't use fat arrow because you need to get the current object:

 itemBuilder: (context, index) {

      final pro = pros[index];
      return GestureDetector(
      child: new Container(padding: EdgeInsets.all(10.0),

       ...
  }