Flutterでnend広告を実装する

nend公式にはFlutterでの実装方法が書いてなくて苦労したので、ここにやり方を残しておきます。

①Gradleの設定

以下ソースをrepositoriesに追加します。

※これは公式通りですが、2か所に登録しなきゃいけないとかどうとか・・

maven {
    // nendSDK
    url 'https://fan-adn.github.io/nendSDK-Android-lib/library'
}

dependenciesにも追加します。

dependencies {
    implementation 'net.nend.android:nend-sdk:8.1.0'
}

■build.gradle（プロジェクトレベル）

buildscript {
    ext.kotlin_version = '1.3.50'
    repositories {
        google()
        mavenCentral()
        maven {
            // nendSDK
            url 'https://fan-adn.github.io/nendSDK-Android-lib/library'
        }
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:4.1.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

allprojects {
    repositories {
        google()
        mavenCentral()
        maven {
            // nendSDK
            url 'https://fan-adn.github.io/nendSDK-Android-lib/library'
        }
    }
}

■build.gradle（アプリレベル）

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'net.nend.android:nend-sdk:8.1.0'
}

github.com

②プラグインの追加

以下コマンドを実行すると「nend_plugin:^バージョン」が追加されます。

flutter pub add nend_plugin

■pubspec.yaml

dependencies:
  nend_plugin: ^1.0.1

pub.dev

③「minSdkVersion」を21に変更。※古いバージョンだとエラーが出る・・

■build.gradle（アプリレベル）

defaultConfig {
    applicationId "com.example.koukokutest"
    minSdkVersion 21
    targetSdkVersion flutter.targetSdkVersion
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
}

④nend.dartを作ります。

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:nend_plugin/nend_plugin.dart';

//テスト用バナー広告ID
int spotId = 3174;
String apiKey = "c5cb8bc474345961c6e7a9778c947957ed8e1e4f";

//広告
class KoukokuNend extends StatefulWidget {
  const KoukokuNend({Key? key}) : super(key: key);

  @override
  _KoukokuNend createState() => _KoukokuNend();
}

class _KoukokuNend extends State<KoukokuNend> {
  late BannerAdController adController;

  @override
  Widget build(BuildContext context) {
    return BannerAd(
      bannerSize: BannerSize.type320x50,
      listener: _eventListener(),
      onCreated: (controller) {
        adController = controller;
        adController.load(spotId: spotId, apiKey: apiKey);
        adController.show();
      },
    );
  }

  BannerAdListener _eventListener() {
    return BannerAdListener(
      onLoaded: () => log('onLoaded'),
      onReceiveAd: () => log('onReceived'),
      onFailedToLoad: () => log('onFailedToLoad'),
      onAdClicked: () => log('onAdClicked'),
      onInformationClicked: () => log('onInformationClicked'),
    );
  }
}

⑤main.dart

import 'package:flutter/material.dart';
import 'nend.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: Stack(
          alignment: Alignment.center,
          children: const [
            Positioned(
              top: 20.0,
              width: 300.0,
              height: 50.0,
              child: MainContents(),
            ),
            Positioned(
              bottom: 0.0,
              child: KoukokuNend(),
            ),
          ],
          fit: StackFit.expand,
        ),
      ),
    );
  }
}

//メインコンテンツ
class MainContents extends StatelessWidget {
  const MainContents({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Text("ここにメインコンテンツを書く");
  }
}

これで完成！

こんな感じです。