How to put divider between few of list items in ListView.separated

Question

I want to put google ads after specific number of items list or in between the items list in ListView.separated.

I have attached an image to make it clear how I want to do it:

Source of the image is: this article

I want to add google ads in between item list in listview, please look at the example in the image attached. — maxwolf929, Jun 16 '19 at 14:36

score 12 · Accepted Answer · answered Jun 16 '19 at 17:04

First, I believe, you need to install a library to display Google AdMob ads. For instance - admob_flutter lib.

Then you only need to set up the separatorBuilder property of your ListView.separated widget.

e.g.

ListView.separated(
  itemCount: 25,
  separatorBuilder: (BuildContext context, int index) {
    if (index % 5 == 0) { // Display `AdmobBanner` every 5 'separators'.
      return AdmobBanner(
        adUnitId: /* AdMob Unit ID */,
        adSize: AdmobBannerSize.BANNER,
      );
    }
    return Divider();
  },
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text('item $index'),
    );
  },
)

This code is only an example, you might encounter Infinite Height layout errors as I am not aware of how admob_flutter widgets operate.

However, this should be enough to get you started with your idea.

Let me know if this helped.

Thank you for you answer, but unfortunately it didn't work as it was supposed to. — maxwolf929, Jun 17 '19 at 08:13
Solution is copy-paste from Flutter documentation: https://api.flutter.dev/flutter/widgets/ListView/ListView.separated.html — Boken, Feb 04 '20 at 01:02

How to put divider between few of list items in ListView.separated

1 Answers1