如何在 listview.builder 中显示原生广告与分页一起颤动？答案

【问题标题】：How to Show native ads in listview.builder in flutter with pagination?如何在 listview.builder 中显示原生广告与分页一起颤动？
【发布时间】：2020-08-17 00:30:14
【问题描述】：

我正在使用下面的代码来检索 Flutter 应用程序中的列表，使用 Firestore 作为数据库的分页，它工作正常。我指的是原生广告的 flutter_native_admob 依赖项。但我不知道如何在listview.builder 中实现它，同时我需要实现分页。就像在 instagram 中一样，在一定数量的帖子之后，原生广告会出现，我需要以类似的方式显示添加。这怎么可能？

  _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,                         );

              }),)
                        ),

我知道如何创建 admob 帐户并在应用程序中初始化 flutter_native_admob，但不知道如何将其放入列表中，就像 instagram 和分页一样。

【问题讨论】：

有什么解决办法吗？我也在寻找同样的东西。

标签： firebase flutter google-cloud-firestore pagination native-ads

【解决方案1】：

您可以在循环中添加一个计数器变量，然后在最终列表中添加小部件之前，您可以检查每当计数器变量是 5 的倍数时添加一个广告小部件，否则添加一个普通小部件，这将在您的列表中添加广告每 5 个普通小部件后。

您可以查看以下内容以供参考： https://medium.com/@vitopiegari/embedding-ads-into-flutters-widget-tree-with-admob-flutter-ae59c3a66492

【讨论】：

【解决方案2】：

用ListView.separated代替ListView.builder。

然后，您可以在 separatorBuilder 属性中添加广告。

例如：

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,
          ),

【讨论】：