CODEWITHSUNDEEP
flutterflutter-layout
maxwolf929
maxwolf929

Reputation: 55

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

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:

enter image description here

Source of the image is: this article

Upvotes: 4

Views: 7382

Answers (1)

Egor
Egor

Reputation: 10344

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.

Upvotes: 12

Related Questions