Facebook Audience Network In Flutter

In this tutorial, you are going to learn how to implement Facebook Audience Network In Flutter. If you are an indie developer and want to generate some side revenue you can do it by adding Facebook ads to your Flutter App.

1. Adding Package

To implement ads to your Flutter App there's a special package to make your life easy, the package is facebook_audience_network.

Add this package to your pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  facebook_audience_network: ^0.8.0

2. Adding Banner Ad In Flutter App

Banner ads occupy a spot within an app's layout, either at the top or bottom of the device screen. They stay on screen while users are interacting with the app, and can refresh automatically after a certain period of time.

Before Adding, Import Facebook Audience Network Package.

Scaffold(
      appBar: AppBar(
        title: Text("Home"),
        centerTitle: true,
      ),
//Banner Widget//
      bottomNavigationBar: FacebookBannerAd(
        bannerSize: BannerSize.STANDARD,
        keepAlive: true,
        placementId: "Your Placement ID",
      ),

Now in the above codes, we have added Banner Widget in bottomNavigationBar which is the property of Scaffold Widget, it will add Banner Widget at the bottom of the screen (preferred to be at the bottom), you can add the Banner Widget wherever you want to just use it as a widget.

Properties Of Banner Widget-

• bannerSize: The size of the widget you want to add and it takes the property of BannerSize and you have options like STANDARD, MEDIUM_RECTANGLE, and LARGE.
• keepAlive: It's the property to keep the Banner Ad alive on scrolling (as in Flutter ListView.builder or Stream refresh the screen on the scroll.)
• placementId: Your Placement to show ad on the app and you can generate some revenue.

In this way, you will be able to add Banner Ad in your Flutter App.

Below is the output of the above code we have written.

3. Adding Interstitial Ad

Interstitial ads are interactive, full-screen ads that cover the interface o

f their host app or site. These ads appear between content, so they place at natural transition points or breaks, such as in between activities or game levels

Now to add an Interstitial Ad in our Flutter Way we first have to create a method to call the ad and if the ad is loaded and available then it will be shown to the user.

showInter() {
  FacebookInterstitialAd.loadInterstitialAd(
    placementId: "Your Placement Id",
    listener: (result, value) {
      if (result == InterstitialAdResult.LOADED)
        FacebookInterstitialAd.showInterstitialAd(delay: 2000);
    },
  );
}

In the given above code, we have created a method showInter() and in this method, we have another method that we have imported from the package. We have an if statement that if the ad is available and has loaded then it will be shown to the user.

FacebookInterstitialAd.loadInterstitialAd() has the following property-

placementId: Your Placement to show ad on the app and you can generate some revenue.

listener: now this property takes two parameters i.e the result and value(error). We will use the result parameter to show the ads (if the ad is loaded and available).

 

4. Creating Button To Show Interstitial Ad

Now if you want to show the ad you have to assign the above method a button so that when the user presses the button, it will show the Interstitial Ad.

RaisedButton(
              onPressed: () {
                showInter();
              },
              child: Text("Show Interstitial Ad"),
            )

Above we have created a Raised Button and assigned the onPressed to the method we have created in Step 3. Now whenever the user presses the button the ad will be shown.

Below is the result of the above code we have written.

[video width="480" height="852" mp4="https://www.appsdeveloperblog.com/wp-content/uploads/2020/12/Fan-Ads-1.mp4" poster="https://www.appsdeveloperblog.com/wp-content/uploads/2020/12/Banner.jpg"][/video]

In this way, we have successfully implemented the Facebook Audience Network Ad in our Flutter App with the use of a simple package.

Complete Code:

Below is a complete code example for you to run and see how it works, it will show both the Banner and Interstitial Ad.

import 'package:flutter/material.dart';
import 'package:facebook_audience_network/facebook_audience_network.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Body(),
    );
  }
}

class Body extends StatefulWidget {
  @override
  _BodyState createState() => _BodyState();
}

class _BodyState extends State<Body> {
  @override
  void initState() {
    super.initState();
    FacebookAudienceNetwork.init();
  }

  showInter() {
    FacebookInterstitialAd.loadInterstitialAd(
      placementId: "Your Placement ID",
      listener: (result, value) {
        if (result == InterstitialAdResult.LOADED)
          FacebookInterstitialAd.showInterstitialAd(delay: 2000);
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home"),
        centerTitle: true,
      ),
      bottomNavigationBar: FacebookBannerAd(
        bannerSize: BannerSize.STANDARD,
        keepAlive: true,
        placementId: "Your Placement ID",
      ),
      body: Center(
        child: Column(
          children: [
            Text("Facebook Audience Network Testing"),
            RaisedButton(
              onPressed: () {
                showInter();
              },
              child: Text("Show Interstitial Ad"),
            )
          ],
        ),
      ),
    );
  }
}