In this lesson you will learn how to implement the Facebook Audience in Flutter. If you are an independent developer looking for additional revenue, you can do so by adding Facebook ads to your mobile Flutter application.
1. Optional package
To set up advertisements in your Flutter application there is a special package that makes your life easier, the facebook_audience_network package.
Add this package to the pubspec.yaml file of your Flutter project.
Dependencies: awe:sdk: flutterfacebook_audience_network : ^0.8.0
2. Adding banner ads to the Flutter application
Banner ads take up space in the layout of the application, at the top or bottom of the device screen. They remain on screen as long as the user communicates with the application and can be refreshed automatically over time.
Before using the FacebookBannerAd widget in your code, import the Facebook Audience Network package.
Importpackage:facebook_audience_network/facebook_audience_network.dart.
Now, when importing the Facebook Audience Network pack, we can use the FacebookBannerAd widget to add a banner.
Scaffolding(
appBar : AppBar (
title : Text (Home),
centerTitle : true,
),
//Banner Widget///
bottomNavigationBar : FacebookBannerAd (
bannerSize : BannerSize.STANDARD,
keepAlive : true,
placementId : Your placement number,
),
In the code above we added the banner widget to the bottom navigation bar, which is owned by the Scaffold widget. It adds the banner widget at the bottom of the screen (preferred position), although you can add it wherever you want.
Banner widget properties
- bannerSize – The size of the widget you want to add. It takes the BannerSize feature with possible options such as STANDARD, MEDIUM_RECTANGLE and WIDE.
- KeepAlive is a feature that keeps banner ads visible while scrolling (in Flutter ListView.builder and Stream refreshes the screen while scrolling).
- placement identification for the placement of banners.
The image below shows what the banner ads look like when they are displayed in the application.
3. Add interstitial advertising
Interstitial ads are full screen interactive ads that cover the interface of the main application or website. These ads appear between content, so are placed at transition points or natural pauses, for example. B. between events or game levels.
To add a Flutter interspatial ad to a project, you must first create a method to name the ad. When the advertisement has been successfully downloaded, it will be shown to the user.
showInter() {FacebookInterstitialAd.loadInterstitialAd(placementId: Your placementId, listener: (result, value) {if (result == InterstitialAdResult.LOADED)FacebookInterstitialAd.showInterstitialAd(delay: 2000);},)
FacebookInterstitialAd.loadInterstitialAd() has the following properties :
- placementId is your placement to show ads in the application, and you can make some profit from it.
- listener – this property has two parameters: the result and the value (error). We use the result parameter to display the screen (if the screen is loaded and available).
4. Creation of a button for displaying interim advertising.
To display interstitial advertising, we call the showInter() method when the button is pressed. Here is an example of marking the showInter() function when the button is pressed().
Raised button (
pressed : ( ) {
showInter() ;
},
child : Text(Show Interstitial Ad),
)
Example of complete code
Below is a full example code that you can run to see how it works. It shows both the banner and the intermediate piece.
import ‘package:flutter/material.dart’ ;
import ‘package:facebook_audience_network/facebook_audience_network.dart’ ;
void main() {
runApp(MyApp());
}
The MyApp class extends the StatelessWidget {
@override
Widget build(BuildContext context) {
gives MaterialApp(
home : Body(),
) ;
}
}.
The Body Class expands StatefulWidget {
@override
_BodyState createState() => _BodyState() ;
}.
_BodyState class expands State{
@override
void initState() {
super.initState();
FacebookAudienceNetwork.init();
}.
showInter() {FacebookInterstitialAd.loadInterstitialAd(placementId: Your placementId, listener: (result, value) {if (result == InterstitialAdResult.LOADED)FacebookInterstitialAd.showInterstitialAd(delay: 2000);},)
@overrideWidget build(BuildContext context) {return Scaffold(appBar : AppBar(title: Text(Home),centerTitle: Where,),bottomNavigationBar : FacebookBannerAd (bannerSize: BannerSize.STANDARD, keepAlive: where, placementId: your placementId,), bodies: Centre(child : Column. Children: Text (Testing Facebook Audience Network), Elevated button (onPressed:() {showInter();},child: text (ShowInterior),)
I hope you found this lesson about Flutter useful. If you want to know more about Flutter, see the other Flutter tutorials on this page. Some of them contain video tutorials.
Have fun developing mobile applications with Flutter!
Related Tags:
hidden gps tracker for car with audio,best car gps tracker no monthly fee,best hidden gps tracker for car in india,fleet tracking obd,linxup gps vehicle tracker reviews,americaloc gl300w mini portable gps tracker,vehicle tracking device no monthly fee,vyncs gps tracker,gps tracker for car walmart,motosafety gps tracker,spy tracker for car,personal gps tracker,gps tracker no monthly fee,spy tracking devices,gps tracker device,where to place gps tracker on vehicle,how do trackers work in cars,can police put tracker on your car,what to do if you find a tracker on your car,gps tracker for car best buy,micro gps tracking device,secret tracking device for car,landairsea 54 gps tracker,best car gps tracker 2020,gps tracking device for car,best gps tracker for car in india 2019,best car tracker app