I am making a flutter app and I want to show adds in the app. This is my first time working with admob. I created a test ad and it worked. I try to implement bloc because this app will eventually get big. But when I try to do that, it is not working.

Here is my home screen ui. Commented code here is the working one without bloc.

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

import 'bloc/ad_bloc.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final AdSize adSize = AdSize.banner;
  BannerAd? _bannerAd;

  final String adUnitId = Platform.isAndroid
      // Use this ad unit on Android...
      ? 'ca-app-pub-3940256099942544/6300978111'
      // ... or this one on iOS.
      : 'ca-app-pub-3940256099942544/2934735716';

  @override
  void initState() {
    // _loadAd();
    context
        .read<AdBloc>()
        .add(AdInit(adSize: AdSize.banner, adUnitId: adUnitId));
    super.initState();
  }

  @override
  void dispose() {
    _bannerAd!.dispose();
    super.dispose();
  }

  // Loads a banner ad.
  // void _loadAd() {
  //   final bannerAd = BannerAd(
  //     size: adSize,
  //     adUnitId: adUnitId,
  //     request: const AdRequest(),
  //     listener: BannerAdListener(
  //       // Called when an ad is successfully received.
  //       onAdLoaded: (ad) {
  //         if (!mounted) {
  //           ad.dispose();
  //           return;
  //         }
  //         setState(() {
  //           _bannerAd = ad as BannerAd;
  //         });
  //       },
  //       // Called when an ad request failed.
  //       onAdFailedToLoad: (ad, error) {
  //         debugPrint('BannerAd failed to load: $error');
  //         ad.dispose();
  //       },
  //     ),
  //   );

  //   // Start loading.
  //   bannerAd.load();
  // }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: const Color(0xFFD9D9D9),
        appBar: AppBar(
          backgroundColor: const Color(0xFFF24405),
          centerTitle: true,
          title: const Text('Topup Card Scanner'),
        ),
        body: BlocConsumer<AdBloc, AdState>(
          listener: (context, state) {
            if (state is AdLoadSuccess) {
              _bannerAd = state.bannerAd;
              print('adloaded:::::::::::::: $_bannerAd');
            }

            if (state is AdLoadingError) {
              print('ERROR:::::::::::::::: ${state.message}');
            }
          },
          builder: (context, state) {
            return Column(
              children: [
                const Expanded(
                  child: Center(
                    child: Text('Home Screen'),
                  ),
                ),
                state is AdLoadSuccess
                    ? Expanded(
                        child: Align(
                          alignment: Alignment.bottomCenter,
                          child: AdWidget(ad: _bannerAd!),
                        ),
                      )
                    : Container(),
              ],
            );
          },
        ),
      ),
    );
  }
}

And this is the bloc I created

import 'package:bloc/bloc.dart';
import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:meta/meta.dart';

part 'ad_event.dart';
part 'ad_state.dart';

class AdBloc extends Bloc<AdEvent, AdState> {
  AdBloc() : super(AdInitial()) {
    on<AdInit>(initiateAdmob);
  }

  initiateAdmob(AdInit event, Emitter<AdState> emit) async {
    try {
      emit(AdLoading());
      final bannerAd = BannerAd(
        size: event.adSize,
        adUnitId: event.adUnitId,
        request: const AdRequest(),
        listener: BannerAdListener(
          // Called when an ad is successfully received.
          onAdLoaded: (ad) {
            // if (!mounted) {
            //   ad.dispose();
            //   return;
            // }
            // setState(() {
            // BannerAd? bAd;
            // bAd = ad as BannerAd;
            // if (ad == null) {
            //   ad.dispose();
            // }
            // else {
            //   print('BannerADD:::::::::::::::::::::: $bAd');
            //   emit(AdLoadSuccess(bannerAd: bAd!));
            // }

            // });
            emit(AdLoadSuccess(bannerAd: ad as BannerAd));
          },
          // Called when an ad request failed.
          onAdFailedToLoad: (ad, error) {
            debugPrint('BannerAd failed to load: $error');
            ad.dispose();
            emit(AdLoadingError(message: error.toString()));
          },
        ),
      );

      // Start loading.
      bannerAd.load();
      // print('ad::::::::: $bAd');

      // if (bAd != null) emit(AdLoadSuccess(bannerAd: bAd!));
    } catch (e) {
      emit(AdLoadingError(message: e.toString()));
    }
  }
}

sorry if this is a messy code. I left the comments to your reference.

I don’t know this is doable with bloc I just tried anyway.
Any info will help me to solve this issue.

Thankyou. 🙂