How to show an AdMob Native Ad between the content inside of GridView.builder?

Question

I have a wallpaper app that shows pictures from Firestore in homescreen and I am using the flutter_native_admob package to show native and the ads are working fine.

I already tried using the package staggered_grid_view but it didn't work, the package breaks everytime I change the value in StaggeredGridTile from 1 to 2 to show the native ad instead of grids and even if I set a number to show the ad after x pictures, it show in wrong places scrolling.

What I needed:

class HomeScreen extends StatefulWidget {

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

class _HomeScreenState extends State<HomeScreen> {

  final nativeAdmob = NativeAdmob();
  int counter = 0;
  double result;
  int num = 4;


  @override
  Widget build(BuildContext context) {

    Widget _buildGrid(int index){


      return Container(
        color: Colors.green,
        child: Center(
          child: Text("$index"),
        ),
      );

      /*

    // I need to show this widget between the content
    NativeAdmobBannerView(
      adUnitID: "ca-app-pub-3940256099942544/2247696110", // Test
      style: BannerStyle.light,
      showMedia: true,
    )

     */

    }

    return Scaffold(
      appBar: AppBar(
        title: Text('Grid with Native Ad'),
        centerTitle: true,
      ),
      body: Container(
        child: StaggeredGridView.countBuilder(
            crossAxisSpacing: 3.0,
            mainAxisSpacing: 3.0,
            itemCount: 20,
            itemBuilder: (context, index){

              return _buildGrid(index);

            },
          crossAxisCount: 2,
          staggeredTileBuilder: (int index){

              return StaggeredTile.count(
                  1,
                  1
              );
            },
          ),

        )
       );
  }

}

Plop

Did u find any solution? I am looking for same thing... – Jerid

Unfortunately, no. – Plop

Any solution? Looking for the the same – Lumper

Answer 1

I have done like this and has been working for me

import 'package:flutter/material.dart';
import 'package:staggeredgridview/images.dart';
import 'package:transparent_image/transparent_image.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:flutter_native_admob/flutter_native_admob.dart';
import 'package:flutter_native_admob/native_admob_controller.dart';
import 'package:cached_network_image/cached_network_image.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _list = List<IMageClass>();

  static const _adUnitID = "ca-app-pub-3940256099942544/8135179316";

  final _nativeAdController = NativeAdmobController();
  double _height = 0;

  @override
  void initState() {
    super.initState();
    _getData();
  }

  Widget Images(int index) {
    return CachedNetworkImage(
      imageUrl: _list[index].images,
      imageBuilder: (context, imageProvider) => Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: imageProvider,
            fit: BoxFit.cover,
          ),
        ),
      ),
      placeholder: (context, url) => Image.asset('assets/images/logo.png'),
      errorWidget: (context, url, error) => Icon(Icons.error),
    );
  }

  List<String> imageList = [
    'https://images.unsplash.com/photo-1515886657613-9f3515b0c78f',
    'https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e',
    'https://images.unsplash.com/photo-1513956589380-bad6acb9b9d4',
    'https://images.unsplash.com/photo-1521577352947-9bb58764b69a',
    'https://images.unsplash.com/photo-1488161628813-04466f872be2',
    'https://images.unsplash.com/photo-1501196354995-cbb51c65aaea',
  ];

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

      if (i != 0) {
        if (i % 4 == 3) {
          image.type = "GoogleAd";
        } else {
          image.type = "";
          image.images = imageList[i];
        }
        _list.add(image);
      } else {
        image.type = "";
        image.images = imageList[i];
        _list.add(image);
      }
    }
  }

  Widget _getAdContainer() {
    return Container(
      height: 250,
      child: NativeAdmob(
        // Your ad unit id
        adUnitID: "ca-app-pub-3940256099942544/8135179316",
        controller: _nativeAdController,
        type: NativeAdmobType.banner,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          margin: EdgeInsets.all(12),
          child: StaggeredGridView.countBuilder(
            crossAxisSpacing: 3.0,
            mainAxisSpacing: 3.0,
            // controller: scrollController,
            itemCount: _list.length,
            physics: ScrollPhysics(),
            itemBuilder: (context, index) {
              if (_list[index].type != "GoogleAd")
                return Images(index);
              else
                return _getAdContainer();
            },
            crossAxisCount: 2,
            staggeredTileBuilder: (int index) {
              if (_list[index].type != "GoogleAd")
                return StaggeredTile.count(1, 1);
              else
                return StaggeredTile.count(2, 1);
              // return StaggeredTile.count(1, 1);
            },
          )),
    );
  }
}
class IMageClass {
  String images;
  String type;
}

This is the output

Nieshanieto

Can you provide us a full example? It helps a lot. Thanks in advance. – Interpellant

Here is the full code @richie. Enjoy the code. Happy Coding :) – Nieshanieto

@SujanTuladhar can this be implemented to listview builder which has pagination like this #63443672 – Anacrusis

Hi did any one knows that why ads are shown in testId but not in real id. Please if any one knows help me out. – Erotic

Did you check with google ad id is it test or real ad id? – Nieshanieto

Answer 2

You should consider using a staggered grid view in order to achieve this. You can refer to the link for staggered grid view

Use it and set a custom cross axis count to achieve what you are looking for.

Fibula

Staggered grid package that's exactly what I tried, could you give some example in code? – Plop