Monday, 5 August 2019

Facebook Audience Network plugin for Flutter applications



facebook_audience_network

Facebook Audience Network plugin for Flutter applications.
Note: Currently only Android platform is supported.















Getting Started

1. Initialization:

For testing purposes you need to obtain the hashed ID of your testing device. To obtain the hashed ID:
  1. Call FacebookAudienceNetwork.init() during app initialization.
  2. Place the FacebookBannerAd widget in your app.
  3. Run the app.
The hased id will be in printed to the logcat. Paste that onto the testingId parameter.
FacebookAudienceNetwork.init(
  testingId: "37b1da9d-b48c-4103-a393-2e095e734bd6",
);
Dart

2. Show Banner Ad:

Container(
  alignment: Alignment(0.5, 1),
  child: FacebookBannerAd(
    placementId: "YOUR_PLACEMENT_ID",
    bannerSize: BannerSize.STANDARD,
    listener: (result, value) {
      switch (result) {
        case BannerAdResult.ERROR:
          print("Error: $value");
          break;
        case BannerAdResult.LOADED:
          print("Loaded: $value");
          break;
        case BannerAdResult.CLICKED:
          print("Clicked: $value");
          break;
        case BannerAdResult.LOGGING_IMPRESSION:
          print("Logging Impression: $value");
          break;
      }
    },
  ),
)
Dart

3. Show Interstitial Ad:

FacebookInterstitialAd.loadInterstitialAd(
  placementId: "YOUR_PLACEMENT_ID",
  listener: (result, value) {
    if (result == InterstitialAdResult.LOADED)
      FacebookInterstitialAd.showInterstitialAd(delay: 5000);
  },
);
Dart

4. Show Rewarded Video Ad:

FacebookRewardedVideoAd.loadRewardedVideoAd(
  placementId: "YOUR_PLACEMENT_ID",
  listener: (result, value) {
    if(result == RewardedVideoResult.LOADED)
      FacebookRewardedVideoAd.showRewardedVideoAd();
    if(result == RewardedVideoResult.VIDEO_COMPLETE)
      print("Video completed");
  },
);
Dart

5. Show In-Stream Video Ad:

Make sure the width and height is 300 at minimum.
FacebookInStreamVideoAd(
  placementId: "YOUR_PLACEMENT_ID",
  height: 300,
  listener: (result, value) {
    if (result == InStreamVideoAdResult.VIDEO_COMPLETE) {
      setState(() {
        _videoComplete = true;
      });
    }
  },
)
Dart

6. Show Native Ad:

FacebookNativeAd(
  placementId: "YOUR_PLACEMENT_ID",
  adType: NativeAdType.NATIVE_AD,
  width: double.infinity,
  height: 300,
  backgroundColor: Colors.blue,
  titleColor: Colors.white,
  descriptionColor: Colors.white,
  buttonColor: Colors.deepPurple,
  buttonTitleColor: Colors.white,
  buttonBorderColor: Colors.white,
  listener: (result, value) {
    print("Native Ad: $result --> $value");
  },
),
Dart

7. Show Native Banner Ad:

Use NativeBannerAdSize to choose the height for Native banner ads. height property is ignored for native banner ads.
FacebookNativeAd(
  placementId: "YOUR_PLACEMENT_ID",
  adType: NativeAdType.NATIVE_BANNER_AD,
  bannerAdSize: NativeBannerAdSize.HEIGHT_100,
  width: double.infinity,
  backgroundColor: Colors.blue,
  titleColor: Colors.white,
  descriptionColor: Colors.white,
  buttonColor: Colors.deepPurple,
  buttonTitleColor: Colors.white,
  buttonBorderColor: Colors.white,
  listener: (result, value) {
    print("Native Ad: $result --> $value");
  },
),
Dart
Check out the example for complete implementation.

Future Work

Implement for iOS platform.

GitHub

Latest commit to the master branch on 6-23-2019
Download as zip