Insert ad for each x item in the list

Question

Good evening, I’m having a little trouble adding an ad to every x item on my list.

Searching I found this piece of code

void _getData() {
    for (int i = 0; i < imageList.length; i++) {
      var image = ImageClass();

      if (i != 0) {
        if (i % 5 == 0) {
          //Below image.type = "GoogleAds" is Going to the show Ads
          image.type = "GoogleAd";
        } else {
          //Below image.type is Goign to SHow Images
          image.type = "";
          image.images = imageList[i];
        }
        _list.add(image);
      } else {
        image.type = "";
        image.images = imageList[i];
        _list.add(image);
      }
    }
  }

But how do I implement this in my code? I’ve tried several solutions and it never works by Random. Either stay in one location, or keep repeating every item in the list.

This is my code that plays and adds the ad container.

Widget adsContainer() {
    return Container(
      height: 250,
      child: NativeAdmob(
       adUnitID: _adUnitID,
        controller: _nativeAdController,
        type: NativeAdmobType.full,
      ),
    );
  }

 @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
        ListView.builder(
              itemCount: list == null ? 0 : list .length,
              itemBuilder: (context, index) {
               return InkWell(
          onTap: () {
            print(list[index].id);
            Navigator.of(context).push(MaterialPageRoute(builder: (context) => DetailPage(text: list[index].id)));
          }, child: Stack(children: [
                  _imageSpace(list[index].image),
                  _colorsSpace(list[index].colors),
                  _nameSpace(list[index].name),
                  _infoSpace(list[index].info),
                ]));
              },
            ),
           adsContainer(), //displaying ad on bottom of everything
          ],
        ),
      ),
    );
  }
}

Answer 1

You can make use of ListView.separated, so it is better organized your code and easier understanding and separation of what is a list item and what is an ad.

I’ll leave below an example based on what you need:

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: YellowBird(),
      ),
    );
  }
}

class YellowBird extends StatefulWidget {
  const YellowBird({ Key key }) : super(key: key);

  @override
  _YellowBirdState createState() => _YellowBirdState();
}

class _YellowBirdState extends State<YellowBird> {
  final List<int> entries = List.generate(20, (int index) => index);
  
  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      padding: const EdgeInsets.all(8),
      itemCount: entries.length,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          height: 50,
          color: Colors.amber,
          child: Center(child: Text('Item ${entries[index]}')),
        );
      },
      separatorBuilder: (BuildContext context, int index) {
        if (index % 5 == 0)
          return Container(
            child: Text("Anúncio aqui"),
            height: 30, 
            color: Colors.red);
        else
          return Container();
      }
    );
  }
}

You can test by Dartpad