Google Rewarded Ads in Flutter - Complete guide with Setup • codefittings.com

Spread the love

Google Rewarded Ads

Implementing google rewarded ads in flutter is quite easy now as google has provided powerful library for implementing google rewarded ads in our application and make revenue from it. To implement google rewarded ads in your project, follow this article and make sure that you do all steps same as I shown in this article.

We will be implementing google rewarded ads in two parts

1. Setting up our app to show google ads.

2. Show google rewarded ads.

1. Setup App to show Google Ads

1. Run below command with flutter to add google_mobile_ads in you project:

$ flutter pub add google_mobile_ads

1. Add following under dependencies in your project’s pubspec.yaml file.

dependencies:

google_mobile_ads : ^1.0.0

Now, run flutter pub get

2. Now we have to make some changes in our app level build.gradle file

compileSdkVersion 31

defaultConfig {

applicationId “com.example.googleAds”

minSdkVersion 19

targetSdkVersion 31

multiDexEnabled true

versionCode flutterVersionCode.toInteger()

versionName flutterVersionName

}

Make sure that you have compileSdkVersion 28 or higher and minSdkVersion 19 or higher.

3. Add AdMob ID in AndroidMenifest file.

<!– Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713 –>

<meta-data

android:name=”com.google.android.gms.ads.APPLICATION_ID”

android:value=”ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy”/>

Now Almost all setup is Done. It’s time to use this in our code to show Ads.

2. Show Google Interstitial Ads

Let’s have one stateful widget to load and show our google rewarded ads.

import 'package:flutter/material.dart';

import 'package:google_mobile_ads/google_mobile_ads.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Make one variable of type RewardedAd and on of type bool. here, Variable of type RewardedAd will hold our rewarded ad and type bool will hold true if our rewarded ad is loaded else false.

Now add loadRewarded() method in this widget.

import 'package:flutter/material.dart';

import 'package:google_mobile_ads/google_mobile_ads.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  RewardedAd? rewardedAd;
  bool isRewardedAdLoaded=false;
  
  void loadRewarded()
  {
    
  }
  
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Now add Following code into our loadRewarded() method.

void loadRewarded() {
  RewardedAd.load(
    adUnitId: "ca-app-pub-3940256099942544/5224354917",
    request: const AdRequest(),
    rewardedAdLoadCallback: RewardedAdLoadCallback(
      onAdLoaded: (ad) {
        print("Ad Loaded");
        setState(() {
          rewardedAd = ad;
          isRewardedAdLoaded = true;
        });
      },
      onAdFailedToLoad: (error) {
        print("Ad Failed to Load");
      },
    ),
  );
}

Let’s call this method in didChangeDependencies() method in our class.

@override
void didChangeDependencies() {
  // TODO: implement didChangeDependencies
  super.didChangeDependencies();
  loadInterstitial();
}

Now our ad should load. it’s time to show it.

Let’s have one button in our screen which will show interstitial ad on pressed.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: ElevatedButton(
        onPressed: () {
          if (isRewardedAdLoaded) {
            rewardedAd!.show(
              onUserEarnedReward: (adWithoutView, reward) {
                print("Give Reward to user");
              },
            );
          }
        },
        child: const Text("Show Ads"),
      ),
    ),
  );
}

Job Done!!

Full code looks like this:

import 'package:flutter/material.dart';

import 'package:google_mobile_ads/google_mobile_ads.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  RewardedAd? rewardedAd;
  bool isRewardedAdLoaded = false;

  void loadRewarded() {
    RewardedAd.load(
      adUnitId: "ca-app-pub-3940256099942544/5224354917",
      request: const AdRequest(),
      rewardedAdLoadCallback: RewardedAdLoadCallback(
        onAdLoaded: (ad) {
          print("Ad Loaded");
          setState(() {
            rewardedAd = ad;
            isRewardedAdLoaded = true;
          });
        },
        onAdFailedToLoad: (error) {
          print("Ad Failed to Load");
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            if (isRewardedAdLoaded) {
              rewardedAd!.show(
                onUserEarnedReward: (adWithoutView, reward) {
                  print("Give Reward to user");
                },
              );
            }
          },
          child: const Text("Show Ads"),
        ),
      ),
    );
  }
}

That’s all we need to load and show google interstitial ad in flutter. Hope this helps you. Happy Coding!!

Spread the love

Google Rewarded Ads in Flutter – Complete guide with Setup