Loading Arena Widget In Flutter Apps.

About Arena

It helps to drive more engagement and transactions to your website and app. With many features such as content-wall, live blog, live chat and monetisation seamlessly with smooth integration and robust dashboard.

Integrating Arena In Flutter.

Simply Create an account on arena at https://dashboard.arena.im/auth/login with google or email. This is how your dashboard would look like. Now you have different features on the left panel that you can explore.

For the starters I would like to integrate the content-wall in my app, procedure for all remains the same.

To do that click on the third icon that says engagement and you will see bellow screen.

Follow to it click on create a new content wall.

You can now explore many options and integrate stream of your choice.

Let’s go for youtube first and here I am adding Marvel’s Youtube Channel and Save it afterwards. followed by a saved button.

NOTE: You may somewhere get an option to add a domain name to whitelist the wall. The reason is the wall would only run on your domain and won’t run on other places, if you don’t have a domain write the package name of your app.

Copy the embedded code and keep it safe.

Flutter app.

Now in your flutter app create a file called area_screen.dart and add a stateful widget to it. (Can be stateless as well) depends upon your choice.

import 'package:flutter/material.dart';
class ArenaScreen extends StatefulWidget {
  const ArenaScreen({ Key? key }) : super(key: key);
  @override
  State<ArenaScreen> createState() => _ArenaScreenState();
}
class _ArenaScreenState extends State<ArenaScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

Run this command for this package InAppWebView:

With Flutter:

$flutter pub add flutter_inappwebview

This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  flutter_inappwebview: ^5.4.0+2

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Initialise the webview controller.

InAppWebViewController? webViewController;

Initialise the options that would be required for some settings for the webview behaviour depending upon the platform.

InAppWebViewGroupOptions options = InAppWebViewGroupOptions(       crossPlatform: InAppWebViewOptions( 

//to use the OverrideUrlMethod (No specific use here)
useShouldOverrideUrlLoading: true,
//This is must as it will disable any autoplay that arena would go //for
mediaPlaybackRequiresUserGesture: true, 
//Setting this to false would have white or black background //depending on theme
transparentBackground: true), 

android: AndroidInAppWebViewOptions(         
useHybridComposition: true,       
),       
ios: IOSInAppWebViewOptions(         
allowsInlineMediaPlayback: true,       
));

Adding the webview widget:

InAppWebView( 
initialData: InAppWebViewInitialData(data: "" ),initialOptions: options,)

Now we need to add our embed widget that we copied from Arena to the data.

InAppWebView( 
initialData: InAppWebViewInitialData(data: " <div class="arena-embed-widget" data-publisher="student-17593" data-type="social-wall" data-showtitle="true" data-lang="en-us" data-timeline="LkvomUW"></div><script src="https://go.arena.im/public/js/arena.widget.embed.lib.js"></script>" ),initialOptions: options,)

Well we are almost there. You would think that this would make the widget displayed in the Webview but it won’t since flutter will try to run it on localhost Arena won’t we able to whitelist your app.

So it is Important that you make Arena and flutter know that it is loading or displaying locally so you need to add base url parameter to it.

InAppWebView( 
initialData: InAppWebViewInitialData(data: " <div class="arena-embed-widget" data-publisher="student-17593" data-type="social-wall" data-showtitle="true" data-lang="en-us" data-timeline="LkvomUW"></div><script src="https://go.arena.im/public/js/arena.widget.embed.lib.js"></script>" ,
//Must required statement.
baseUrl: Uri.parse("file:///html_asset/")
),initialOptions: options,)

Now we are there. Your WebView still needs to be styled so that it displays everything according to the mobile screen not web.

InAppWebView( 
initialData: InAppWebViewInitialData(data: " <html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
background-color : white
}
.arena-widget--social-wall--card {
background-color:blue !important;
margin-top: -3px !important;
}
.arena-widget--social-wall--card-info{
background-color:black !important;
}
.arena-widget--social-wall--card--description span{
color:white !important
}
.arena-widget--social-wall--card--description span .linkified{
color:white !important
}
.arena-widget--social-wall--card--user--info--name{
color:white !important;
}
.style__WidgetPoweredBy-iHBeMe  {
display:none!important;
}
.kWkzjk{
display:none!important;
}.widget--poweredby{
display:none!important;
}
</style>
</head>
<body>
<div class="arena-embed-widget" data-publisher="student-17593" data-type="social-wall" data-showtitle="true" data-lang="en-us" data-timeline="LkvomUW"></div><script src="https://go.arena.im/public/js/arena.widget.embed.lib.js"></script>
</body>
</html>
" ,
//Must required statement.
baseUrl: Uri.parse("file:///html_asset/")
),initialOptions: options,)

AND IT’S DONE!