[Flutter/Android] Ad loads but is not visible until I scroll list

[kacpeer23]

Hey, I have problem with ads in my flutter app. Sometimes when advertisement loads it's not visible until I scroll list where is this ad placed. When I scroll list ad appears. I'm using google_mobile_ads 2.4.0 version. I have native ads in my application. This issue occurs on android.

[darshankawar]

@kacpeer23
Can you provide us a complete runnable minimal reproducible code sample along flutter doctor -v that shows the reported behavior ?

[kacpeer23]

@darshankawar
This is my Ad class:

class AdvertisementTile extends StatefulWidget {
  static RxBool forceRefresh = false.obs;

  AdvertisementTile({Key? key}) : super(key: key);

  @override
  State<AdvertisementTile> createState() => _AdvertisementTileState();
}

class _AdvertisementTileState extends State<AdvertisementTile> with AutomaticKeepAliveClientMixin {
  final EmailsController ctrl = Get.find<EmailsController>();
  late NativeAd native;
  bool isDarkMode = false;
  RxBool isAdLoaded = false.obs;
  RxBool isAdVisible = false.obs;
  RxBool adError = false.obs;
  StreamSubscription<dynamic>? _forceRefreshSubscription;

  @override
  void initState() {
    _forceRefreshSubscription?.cancel();
    _forceRefreshSubscription = AdvertisementTile.forceRefresh.listen((forceRefresh) {
      if (forceRefresh) {
        setState(() {
          isAdLoaded.value = false;
          isAdVisible.value = false;
          adError.value = false;
          _prepareNativeAd();
        });
      }
      AdvertisementTile.forceRefresh.value = false;
    });

    _prepareNativeAd();
    super.initState();
  }

  void _prepareNativeAd() {
    native = NativeAd.fromAdManagerRequest(//my configuration);
  }

  @override
  Widget build(BuildContext context) {
    isDarkMode = context.isDarkMode;
    native.customOptions = {'darkMode': isDarkMode};
    native.load();
    super.build(context);
 return Obx(() {
      return Visibility(
        visible: !adError.value,
        child: Stack(children: [
          Positioned.fill(
            child: Container(
                margin: const EdgeInsets.only(top: 4.3, bottom: 8.3, left: 5.3, right: 5.3),
                decoration: BoxDecoration(
                    color: context.theme.scaffoldBackgroundColor, borderRadius: BorderRadius.circular(16))),
          ),
          Container(
            decoration:
                BoxDecoration(color: context.theme.scaffoldBackgroundColor, borderRadius: BorderRadius.circular(16)),
            margin: const EdgeInsets.only(
              left: 5.3,
              right: 5.3,
              top: 4.3,
              bottom: 8.3,
            ),
            width: Get.width,
            height: 70,
            child: Obx(() {
              return Stack(children: [
                isAdLoaded.value ? AdWidget(ad: native) : Container(),
                Visibility(
                  visible: !isAdVisible.value,
                  child: const Center(
                    child: CircularProgressIndicator(),
                  ),
                )
              ]);
            }),
          ),
        ]),
      );
    });
  }

There is no logs about error or something. I have correct response from fromAdManagerRequest and ad should be visible, but it is not until I scroll

[Wes1324]

I have implemented banner ads within a scroll view and am experiencing the same issue. I'm reluctant to push the ad implementation to production because the ads are not rendered until you scroll to them and then they take a few seconds to appear, which looks really janky.

I raised this on StackOverflow and included a link to a YouTube video of the behaviour I'm experiencing.

[KristijanZic]

I experience the same issue with ads in the ListView. It takes 2-5 seconds to load an ad, by that time the user has scrolled trough and none of the ads were loaded or shown.

[huycozy]

Closing this issue in favor of #887 since that issue is described in detail along with minimal sample code for further action. Please follow up on it for updates.