-jio-start-block-type-2
¶ Flutter Support
-jio-style-title
¶ Introduction
Follow the below steps for integrating Jio Ads SDK for Flutter based Apps
Complete GETTING STARTED section and INITIALIZE SDK section before starting this section
-jio-end-block-type-2
-jio-start-block-type-2
¶ Android Native Ad Integration In Flutter
-jio-style-title
¶ Flutter Plugin Installation in Android Studio
a. Use below path for flutter plugin installation in android studio.
File->Settings->Plugins->Marketplace
b. Search for Dart and install it.
c. Search for Flutter and install it.
d. Flutter SDK installation
Install flutter SDK using this link extract it and put bin folder in your system variable path.
-jio-style-title
¶ Create Flutter Project
-jio-style-title
¶ Get Separate Package for Android and Flutter.
-jio-style-title
¶ Add code for Ad Integration in Android Package
we will be writing code for ad integration in android package which will be same as in native android code.
-jio-style-title
¶ Inflate Android Native View in Flutter app
In order to inflate the native UI element into the flutter app we have to use platform view of flutter.
-jio-end-block-type-2
-jio-start-block-type-2
¶ Sample Code for Dart
-jio-style-title
¶ Import Packages
1. Import following package.
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';-jio-style-title
¶ Import Methods
2. Implement a build() method.
class AdView extends StatelessWidget {
const DisplayBannerAdView({super.key});
@override
Widget build(BuildContext context) {
// This is used in the platform side to register the view.
const String viewType = 'adView';
// Pass parameters to the platform side.
const Map<String, dynamic> creationParams = <String, dynamic>{};
return PlatformViewLink(
viewType: viewType,
surfaceFactory:
(context, controller) {
return AndroidViewSurface(
controller: controller as AndroidViewController,
gestureRecognizers: const <Factory<OneSequenceGestureRecognizer>>{},
hitTestBehavior: PlatformViewHitTestBehavior.opaque,
);
},
onCreatePlatformView: (params) {
return PlatformViewsService.initSurfaceAndroidView(
id: params.id,
viewType: viewType,
layoutDirection: TextDirection.ltr,
creationParams: creationParams,
creationParamsCodec: const StandardMessageCodec(),
onFocus: () {
params.onFocusChanged(true);
},
)
..addOnPlatformViewCreatedListener(params.onPlatformViewCreated)
..create();
},
);
}
} -jio-end-block-type-2
-jio-start-block-type-2
¶ Sample Code for Android
In your native code, implement the following:
-jio-style-title
¶ 1.PlatformView Class
Extend io.flutter.plugin.platform.PlatformView to provide a reference to the android.view.View (for example, NativeView.kt):
Internal class NativeView(context: Context) : PlatformView {
private lateinit var jioAdView: JioAdView
private var adContainer: FrameLayout
private val TAG="Test"
override fun getView(): View {
return adContainer
}
override fun dispose() {}
init {
adContainer= FrameLayout(context)
showAd(context)
}
private fun showAd(context: Context) {
jioAdView =
JioAdView(context, "adspot_id",JioAdView.AD_TYPE)
jioAdView.setAdListener(object : JioAdListener(){
override fun onAdClosed(
jioAdView: JioAdView?,
isVideoCompleted: Boolean,
isEligibleForReward: Boolean
) {
Log.i(TAG, "Inside onAdClosed")
}
override fun onAdFailedToLoad(jioAdView: JioAdView?,jioAdError:JioAdError?)
{
Log.i(TAG, "Inside onAdFailedToLoad")
}
override fun onAdMediaEnd(jioAdView: JioAdView?) {
Log.i(TAG, "Inside onAdMediaEnd")
}
override fun onAdPrepared(jioAdView: JioAdView?) {
Log.i(TAG, "Inside onAdPrepared")
startShowAd()
}
override fun onAdRender(jioAdView: JioAdView?) {
Log.i(TAG, "Inside onAdClicked")
}
override fun onAdClicked(jioAdView: JioAdView?) {
Log.i(TAG, "Inside onAdClicked")
super.onAdClicked(jioAdView)
}
override fun onAdRefresh(jioAdView: JioAdView?) {
Log.i(TAG, "Inside onAdRefresh")
super.onAdRefresh(jioAdView)
}
})
jioAdView.cacheAd()
}
private fun startShowAd() {
if(jioAdView.getAdState() == JioAdView.AdState.PREPARED){
adContainer.addView(jioAdView)
jioAdView.loadAd()
}
}
}
-jio-style-title
¶ 2.Native View Class
Create a factory class that creates an instance of the NativeView created earlier (for example, NativeViewFactory.kt):
class NativeViewFactory() : PlatformViewFactory(StandardMessageCodec.INSTANCE){
override fun create(context: Context, viewId: Int, args: Any?): PlatformView {
return NativeView(context)
}
}-jio-style-title
¶ 3.Register PlatformView
Finally, register the platform view. You can do this in an app or a plugin. For app registration, modify the app’s main activity (for example, MainActivity.kt):
class MainActivity : FlutterActivity() {
override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
super.configureFlutterEngine(flutterEngine)
JioAds.getInstance().setLogLevel(JioAds.LogLevel.DEBUG)
JioAds.getInstance().setEnvironment(JioAds.Environment.PROD)
JioAds.getInstance().init(this)
//platform view
flutterEngine.platformViewsController.registry.registerViewFactory("adView", NativeViewFactory())
}
}
-jio-end-block-type-2