How to Show native ads in listview.builder in flutter with pagination?

Question

I am using below code to retrieve list in flutter application using pagination with firestore as database, which working fine. I am referring flutter_native_admob dependency for the native ads. but I am not able to get the idea how I can implement it in a listview.builder and at the same time I need to implement the pagination. Like in instagram, as after certain number of posts, the native ad shows up, I need to show the add in similar fashion. How is that possible?

  _getProducts() async {
    query = Firestore.instance.collection("users").document(uid).collection('my_favorites').orderBy("timestamp", descending: true).limit(5);
    setState(() {

      _loadingnotifications = true ;
    });

    QuerySnapshot _querySnapshot = await query.getDocuments();


    _lastDocument = _querySnapshot.documents[_querySnapshot.documents.length - 1];

    _notifications = _querySnapshot.documents;
    setState(() {
      _loadingnotifications = false;
    });

  }

  _getMoreNotifications() async {
    print("new docs loaded");
    if(_moreProductsAvailable == false ){
      return;
    }

    if(_loadingMore == true ){

      return;
    }

    _loadingMore = true;
  
    query = Firestore.instance.collection("users").document(uid).collection('my_favorites').orderBy("timestamp", descending: true).startAfter([_lastDocument.data['timestamp']]).limit(5);
    QuerySnapshot _querySnapshot = await query.getDocuments();

    if (_querySnapshot.documents.length <5){
      _moreProductsAvailable = false;
    }
    _lastDocument = _querySnapshot.documents[_querySnapshot.documents.length - 1];

    _notifications.addAll(_querySnapshot.documents);
  
    setState(() {
          _loadingnotifications = false;
    });

    _loadingMore = false;


  }

LISTVIEW.BUILDER

Flexible(
                          child:_loadingnotifications == true ? Container(child: Center(child: Text("Loading..."),),) :Container(child:  _notifications.length == 0? Center(
                          child: Text("No Marked Posts Yet!"),) :
             new ListView.builder(
              controller: _scrollController,
              itemCount: _notifications.length,
              itemBuilder: (BuildContext ctx, int index){


                String itemTitle = _notifications[index].data['itemTitle'];
               

                              return ItemCard(itemTitle: itemTitle,                         );

              }),)
                        ),

I know how to create the admob account and initialize flutter_native_admob in application, but not getting any idea how to put it in list just like instagram alongwith pagination.

Strickland

Any solutions? I'm looking for the same thing. – Hosier

Answer 1

You can add a counter variable in the loop and before adding widgets in the final List you can check that whenever the counter variable is a multiple of 5 add a ad widget else add a normal widget, this will add ads in your List after every 5 normal widgets.

You can check this for reference: https://medium.com/@vitopiegari/embedding-ads-into-flutters-widget-tree-with-admob-flutter-ae59c3a66492

Spoilsman

Answer 2

Instead of ListView.builder, use ListView.separated.

Then, in separatorBuilder property you can add the Ads.

For example:

ListView.separated(
            physics: BouncingScrollPhysics(),
            shrinkWrap: true,
            itemBuilder: (context, i) {
              return ListTile();
            },
            separatorBuilder: (context, index) {
              if (index % 10 == 9 && index != 0) return BannerAd();
              return const SizedBox();
            },
            itemCount: _listLength,
          ),

Chery