Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 418
maxwolf929 Avatar asked Dec 14 '22 11:12

maxwolf929


1 Answers

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.

like image 72
George Avatar answered Jan 19 '23 00:01

George