Plugin to integrate Facebook Native Banner Ad

Last update: May 13, 2020

Related tags

Overview

flutter_fbaudience_network

Plugin to integrate Facebook Native Ad to Flutter application

Warning: The plugin is based on Flutter PlatformView (AndroidView) to create a custom widget from Native View. Therefore, only Android is supported at the moment. For iOS, wait for Flutter team to implement iOSView equivalent.

Getting Started

For help getting started with Flutter, view our online documentation.

How it works

The plugin provides FBNativeBannerAd widget, that can add to anywhere in Flutter application.

Integrate banner view widget

FBNativeBannerAd is a standalone widget. Its height is fixed plus padding, so you don't need to worry about the height

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example app'),
      ),
      body: ListView(
        children: <Widget>[
          Container(
            height: 150.0,
            color: Colors.green,
            margin: EdgeInsets.only(bottom: 20.0),
          ),
          Container(
            height: 150.0,
            color: Colors.green,
            margin: EdgeInsets.only(bottom: 20.0),
          ),
          Container(
            height: 150.0,
            color: Colors.green,
            margin: EdgeInsets.only(bottom: 20.0),
          ),
          FBNativeBannerAd(
            placementID: placementID, // required params from Facebook
            padding: EdgeInsets.all(8.0), // content padding apply for native view
            margin: EdgeInsets.only(bottom: 20.0),
            style: AdStyle( // using AdStyle to change some views
              titleColor: Colors.white,
              socialTextColor: Colors.blueGrey,
              backgroundColor: Colors.black,
            ),
            onCreate: (NativeAdController controller) {
              // controller.loadAd(); // Keep controller, then you can re-load the add any time
            },
          ),
          Container(
            height: 150.0,
            color: Colors.green,
            margin: EdgeInsets.only(bottom: 20.0),
          ),
          Container(
            height: 150.0,
            color: Colors.green,
            margin: EdgeInsets.only(bottom: 20.0),
          ),
          Container(
            height: 150.0,
            color: Colors.green,
            margin: EdgeInsets.only(bottom: 20.0),
          ),
          Container(
            height: 150.0,
            color: Colors.green,
            margin: EdgeInsets.only(bottom: 20.0),
          ),
        ],
      ),
    ),
  );
}

FBNativeBannerAd widget contains some properties:

placementID: required placement ID from Facebook. If you want to run test ads, please use "YOUR_PLACEMENT_ID"
style: use this to change title, social text and background color

Features Request

As the plugin is not completed yet (Android only), so it will be actively updated

Feel free to email me about the features you want to include in the plugin, I am happy to discuss.

react-native native module for In App Purchase.

Documentation Published in website. Announcement Version 8.0.0 is currently in release candidate. The module is completely rewritten with Kotlin and S

Dec 31, 2022

Flutter native ads - Show AdMob Native Ads use PlatformView

flutter_native_ads Flutter plugin for AdMob Native Ads. Compatible with Android and iOS using PlatformView. Android iOS Getting Started Android Androi

Dec 20, 2022

Flutter plugin to simply integrate Agora Video Calling or Live Video Streaming to your app with just a few lines of code.

Agora UI Kit for Flutter Instantly integrate Agora video calling or video streaming into your Flutter application. Getting started Requirements An Ago

Dec 16, 2022

Flutter Plugin for Facebook App Events

facebook_app_events Flutter plugin for Facebook App Events. An app event is an action that takes place in your app or on your web page such as a perso

Jan 3, 2023

A flutter plugin to add login with facebook in your flutter app

Features Login on iOS, Android and Web. Express login on Android. Granted and declined permissions. User information, picture profile and more. Provid

Jan 6, 2023

In this video we will learn how to Integrate NodeJS Login and Register API in our Flutter application using JWT Token Authentication.

Flutter Login & Register with Node JS Rest API In this video we will learn how to Integrate NodeJS Login and Register API in our Flutter application u

Nov 28, 2022

A most easily usable RESAS API wrapper in Dart. With this library, you can easily integrate your application with the RESAS API.

A most easily usable RESAS API wrapper library in Dart! 1. About 1.1. What Is RESAS? 1.2. Introduction 1.2.1. Install Library 1.2.2. Import It 1.2.3.

Apr 7, 2022

Integrate any icons you like to your flutter app

Flutter Tutorial - Icons - Custom & Plugin Icons Integrate any icons you like to your flutter app - Material Icons, Beautiful Icons & Custom Icons. ⚡

Dec 28, 2021

The flutter_ibm_watson makes it easy to integrate IBM Watson

Flutter Ibm Watson Installation Add this to your package's pubspec.yaml file: dependencies: flutter_ibm_watson: ^0.0.1 You can install packages fro

Nov 4, 2022

Comments

cannot build on Ios

this is the error output

** BUILD FAILED **

Xcode's output: ↳ === BUILD TARGET Runner OF PROJECT Runner WITH CONFIGURATION Debug === /Users/tudeob/flutter_ios_dub2/ios/Runner/GeneratedPluginRegistrant.m:18:2: warning: missing submodule 'flutter_fbaudience_network.FlutterFBAudienceNetworkPlugin' [-Wincomplete-umbrella] #import <flutter_fbaudience_network/FlutterFBAudienceNetworkPlugin.h> ^ ~ In file included from /Users/tudeob/flutter_ios_dub2/ios/Runner/GeneratedPluginRegistrant.m:18: /Users/tudeob/flutter_ios_dub2/build/ios/Debug-iphoneos/flutter_fbaudience_network/flutter_fbaudience_network.framework/Headers/FlutterFbaudienceNetworkPlugin.h:3:1: error: duplicate interface definition for class 'FlutterFbaudienceNetworkPlugin' @interface FlutterFbaudienceNetworkPlugin : NSObject ^ In module 'flutter_fbaudience_network' imported from /Users/tudeob/flutter_ios_dub2/ios/Runner/GeneratedPluginRegistrant.m:18: /Users/tudeob/flutter_ios_dub2/build/ios/Debug-iphoneos/flutter_fbaudience_network/flutter_fbaudience_network.framework/Headers/FlutterFbaudienceNetworkPlugin.h:3:12: note: previous definition is here @interface FlutterFbaudienceNetworkPlugin : NSObject ^ /Users/tudeob/flutter_ios_dub2/ios/Runner/GeneratedPluginRegistrant.m:52:4: error: unknown receiver 'FlutterFBAudienceNetworkPlugin'; did you mean 'FlutterFbaudienceNetworkPlugin'? [FlutterFBAudienceNetworkPlugin registerWithRegistrar:[registry registrarForPlugin:@"FlutterFBAudienceNetworkPlugin"]]; ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FlutterFbaudienceNetworkPlugin In file included from /Users/tudeob/flutter_ios_dub2/ios/Runner/GeneratedPluginRegistrant.m:18: /Users/tudeob/flutter_ios_dub2/build/ios/Debug-iphoneos/flutter_fbaudience_network/flutter_fbaudience_network.framework/Headers/FlutterFbaudienceNetworkPlugin.h:3:12: note: 'FlutterFbaudienceNetworkPlugin' declared here @interface FlutterFbaudienceNetworkPlugin : NSObject ^ /Users/tudeob/flutter_ios_dub2/ios/Runner/GeneratedPluginRegistrant.m:52:4: error: definition of 'FlutterFbaudienceNetworkPlugin' must be imported from module 'flutter_fbaudience_network.FlutterFbaudienceNetworkPlugin' before it is required [FlutterFBAudienceNetworkPlugin registerWithRegistrar:[registry registrarForPlugin:@"FlutterFBAudienceNetworkPlugin"]]; ^ In module 'flutter_fbaudience_network' imported from /Users/tudeob/flutter_ios_dub2/ios/Runner/GeneratedPluginRegistrant.m:18: /Users/tudeob/flutter_ios_dub2/build/ios/Debug-iphoneos/flutter_fbaudience_network/flutter_fbaudience_network.framework/Headers/FlutterFbaudienceNetworkPlugin.h:3:12: note: previous definition is here @interface FlutterFbaudienceNetworkPlugin : NSObject ^ 1 warning and 3 errors generated.

what is the problem ..? : (

opened by cadinz 2
i can not get display

FBNativeBannerAd( placementID: "1907860066008761_1918078734986894", // required params from Facebook padding: EdgeInsets.all(8.0), // content padding apply for native view margin: EdgeInsets.only(bottom: 20.0), style: AdStyle( // using AdStyle to change some views titleColor: Colors.white, socialTextColor: Colors.blueGrey, backgroundColor: Colors.black, ), onCreate: (NativeAdController controller) { controller.loadAd(); // Keep controller, then you can re-load the add any time }, ),

=============================================== It show error like

aunching lib/main.dart on SM N910L in debug mode... Initializing gradle... 0.6s Resolving dependencies... 2.8s Gradle task 'assembleDebug'... Gradle task 'assembleDebug'... Done 7.4s Built build\app\outputs\apk\debug\app-debug.apk. Installing build\app\outputs\apk\app.apk... 11.8s W/DisplayListCanvas( 4238): DisplayListCanvas is started on unbinded RenderNode (without mOwningView) D/ViewRootImpl( 4238): MSG_RESIZED_REPORT: ci=Rect(0, 96 - 0, 0) vi=Rect(0, 96 - 0, 0) or=2 I/Timeline( 4238): Timeline: Activity_idle id: android.os.BinderProxy@f533a61 time:9814244 Syncing files to device SM N910L... 1.4s

🔥 To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R". An Observatory debugger and profiler on SM N910L is available at: http://127.0.0.1:61984/ For a more detailed help message, press "h". To detach, press "d"; to quit, press "q". D/SecWifiDisplayUtil( 4238): Metadata value : none I/System.out( 4238): ============= style {titleColor=#ffffffff, backgroundColor=#ff000000, socialTextColor=#ff607d8b} W/ProxyCache( 4238): Unable to create external cache directory I/ProxyCache( 4238): Proxy cache server started. Ping it... D/ProxyCache( 4238): Open connection to http://127.0.0.1:42940/ping I/WebViewFactory( 4238): Loading com.google.android.webview version 72.0.3626.105 (code 362610500) I/System.out( 4238): (HTTPLog)-Static: isSBSettingEnabled false I/System.out( 4238): (HTTPLog)-Static: isSBSettingEnabled false D/ProxyCache( 4238): Accept new socket Socket[address=/127.0.0.1,port=33156,localPort=42940] I/ProxyCache( 4238): Request to cache proxy:GetRequest{rangeOffset=0, partial=false, uri='ping'} D/ProxyCache( 4238): Opened connections: 0 D/ProxyCache( 4238): Ping response: ping ok, pinged? true I/cr_LibraryLoader( 4238): Time to load native libraries: 2 ms (timestamps 6076-6078) I/chromium( 4238): [INFO:library_loader_hooks.cc(42)] Chromium logging enabled: level = 0, default verbosity = 0 I/cr_LibraryLoader( 4238): Expected native library version number "72.0.3626.105", actual native library version number "72.0.3626.105" D/AdInternalSettings( 4238): Test mode device hash: 6e9cf036-11b5-405a-ab57-b40ea4c58216 D/AdInternalSettings( 4238): When testing your app with Facebook's ad units you must specify the device hashed ID to ensure the delivery of test ads, add the following code before loading an ad: AdSettings.addTestDevice("6e9cf036-11b5-405a-ab57-b40ea4c58216"); W/System.err( 4238): remove failed: ENOENT (No such file or directory) : /data/user/0/com.example.tessapp/shared_prefs/WebViewChromiumPrefs.xml.bak W/System.err( 4238): remove failed: ENOENT (No such file or directory) : /data/user/0/com.example.tessapp/shared_prefs/FBAdPrefs.xml.bak D/SensorManager( 4238): registerListener :: 0, ICM20610 Acceleration Sensor, 200000, 0, D/SensorManager( 4238): registerListener :: 3, ICM20610 Gyroscope Sensor, 200000, 0, D/IS_UNITY( 4238): false D/ViewRootImpl( 4238): #1 mView = com.android.internal.policy.PhoneWindow$DecorView{cb89882 V.E...... R.....ID 0,0-0,0} D/mali_winsys( 4238): new_window_surface returns 0x3000, [2560x344]-format:1 D/libEGL ( 4238): eglInitialize EGLDisplay = 0xb327e994 W/DisplayListCanvas( 4238): DisplayListCanvas is started on unbinded RenderNode (without mOwningView) D/SensorManager( 4238): unregisterListener :: D/SensorManager( 4238): unregisterListener :: D/ViewRootImpl( 4238): MSG_RESIZED_REPORT: ci=Rect(0, 0 - 0, 0) vi=Rect(0, 0 - 0, 0) or=2 D/libEGL ( 4238): eglInitialize EGLDisplay = 0xb327ea84 D/libEGL ( 4238): eglInitialize EGLDisplay = 0xb327ea84 D/SensorManager( 4238): registerListener :: 0, ICM20610 Acceleration Sensor, 200000, 0, D/SensorManager( 4238): registerListener :: 3, ICM20610 Gyroscope Sensor, 200000, 0, D/IS_UNITY( 4238): false I/cr_BrowserStartup( 4238): Initializing chromium process, singleProcess=true W/System.err( 4238): remove failed: ENOENT (No such file or directory) : /data/user/0/com.example.tessapp/shared_prefs/SDKIDFA.xml.bak D/SecWifiDisplayUtil( 4238): Metadata value : none D/SensorManager( 4238): unregisterListener :: D/SensorManager( 4238): unregisterListener :: D/ConnectivityManager( 4238): requestNetwork; getAppId(CallingUid) : 10268, CallingPid : 4238 I/System.out( 4238): (HTTPLog)-Static: isSBSettingEnabled false I/System.out( 4238): (HTTPLog)-Static: isSBSettingEnabled false W/cr_CrashFileManager( 4238): /data/user/0/com.example.tessapp/cache/WebView/Crash Reports does not exist or is not a directory W/System.err( 4238): remove failed: ENOENT (No such file or directory) : /data/user/0/com.example.tessapp/shared_prefs/com.facebook.ads.FEATURE_CONFIG.xml.bak I/System.out( 4238): nativeBannerAd onError The display format in the ad request does not match the display format specified for this placement. Each placement can only be used with a single display format. You can create multiple placements in order to use multiple display formats. Lost connection to device.

============================================

How can I add banner facebook to flutter

opened by sokkhimk 2

Can not change style

i already change the style, but it still won't change. the background still black

 FBNativeBannerAd(
            placementID: placementID, // required params from Facebook
            padding: EdgeInsets.all(8.0), // content padding apply for native view
            margin: EdgeInsets.only(bottom: 0.0),
            style: new AdStyle( // using AdStyle to change some views
              titleColor: Colors.black,
              socialTextColor: Colors.blueGrey,
              backgroundColor: Colors.white,

            ),
            onCreate: (NativeAdController controller) {
              print("add created");
            
            },
          ),

opened by karnadii 1

Owner

Duy Duong

GitHub

Facebook based-app - A Facebook based app which actually looks like Facebook

Facebook based mobile application This project is a mobile application which act

3 Nov 23, 2022

Admob Flutter plugin that shows banner ads using native platform views.

Looking for Maintainers. Unfortunately I haven't been able to keep up with demand for features and improvments. If you are interested in helping maint

418 Dec 3, 2022

A flutter plugin to get facebook deep links and log app events using the latest Facebook SDK to include support for iOS 14

Facebook Sdk For Flutter LinkedIn GitHub facebook_sdk_flutter allows you to fetch deep links, deferred deep links and log facebook app events. This wa