Flutter Integration Guide #

This document explains how to integrate the GliaPlayer Flutter SDK, a WebView-based video ad player, into a Flutter project.

Table of Contents #

• Requirements
• Step 1: Set up GitHub Credentials
• Step 2: Configure Gradle Repository
• Step 3: Add SDK Dependency
• Step 4: Create Android Platform View
• Step 5: Register Platform View
• Step 6: Create Flutter Widget
• Step 7: UI Integration
• FAQ & Troubleshooting

Requirements #

• Flutter SDK >=3.3.0
• Android minSdk 23+ (Required by GliaPlayer)
• iOS platform 14+ (Required by GliaPlayer)

Step 1: Configure Google Mobile Ads SDK #

1.1 Android #

In android/app/src/main/AndroidManifest.xml, add this config:

<application>
    <meta-data
        android:name="com.google.android.gms.ads.INTEGRATION_MANAGER"
        android:value="webview"/>
</application>

1.2 Create PlatformView #

In ios/Runner/Info.plist, add this config:

<dict>
	<key>GADIntegrationManager</key>
	<string>webview</string>
</dict>

Step 2: Add Google Mobile Ads SDK Dependencies #

Modify pubspec.yaml, add dependencies #

dependencies:
  google_mobile_ads: ^7.0.0

Step 3: Usage #

Usage Example #

1. Ensure that MobileAds is initialized in main.dart:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await MobileAds.instance.initialize();
  runApp(MyApp());
}

2. Usage:

import 'package:gliaplayer/gliaplayer.dart';

// In your widget tree
Widget build(BuildContext context) {
  return Column(
    children: [
      // Other widgets...

      // GliaPlayer - Android only
      GliaPlayer(
            androidSlotKey: 'gliacloud_app_test',
            iOSSlotKey: 'gliacloud_app_test',
        ),

      // Other widgets...
    ],
  );
}

Verification Steps #

1. Run flutter clean && flutter pub get.
2. Run flutter build apk --debug to confirm the build succeeds.
3. Run flutter run -d android on an Android device.
4. Confirm that the GliaPlayer is displaying correctly.

References #

• Google Mobile Ads - WebView integration