よく寝てよく遊びよくサボる

趣味のAndroidアプリ開発の話や、その他諸々の情報について掲載していきます。自らの備忘の面が強いので情報の正確性は保証できませんが、誰かの役に立てば是幸い。(リンクはご自由に!)

flutterでfirebase_admob

毎回忘れるので、備忘的に。

2020年3月29日断面。

 

flutterでfirebase_admobを利用するには次の処理が必要。(Android向け)

※fireabase側(Webサイトでプロジェクトを追加したりする)の設定・登録は終わっている前提。

※以下の記載で、「#元からある行」と言うのは、今回のadmob追加とは関係のない行です。(追加する場所の参考として記載しているもの。当然ですが人によって中身は違うと思います。)

 

①pubspec.yamlへの追加(パッケージの追加)

dependencies: #この行は最初からあるはず
#〜既存の行〜
firebase_admob: ^0.9.3 #バージョンは最新のを取得するようにしましょう!

⇨画面右上の「Packages get」を押下して、パッケージをゲット。

 

②AndroidManifest.xmlへの追加

app->src->main->AndroidManifest.xmlへ次の記載を追加。

<manifest xmlns:android="http://schemas.android.com/apk/res/android" #元からある行
〜          #元からある行
<application #元からある行
〜          #元からある行
  <meta-data #元からある行
  android:name="flutterEmbedding" #元からある行
 android:value="2"
/> #元からある行

<!--Admob用に追加-->
<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-################~##########"/>
<meta-data
android:name="com.google.android.gms.ads.AD_MANAGER_APP"
android:value="true"/>
<!--Admob対応ここまで-->


</application> #元からある行
</manifest>   #元からある行

 

google-services.jsonの追加

firebaseのページで、そのアプリ専用のgoogle-services.jsonファイルを取得して、android->appのフォルダ内へコピペする。

 

④build.gradleへの追加×2←詳細はfirebaseのページを見るのが良さそう

build.gradleは2つあるのでややこしいですが。

androidフォルダの直下にある方のbuild.gradleへの追加。

buildscript { #元からある行
ext.kotlin_version = '1.3.50' #元からある行
repositories { #元からある行
google() #元からあるかも

jcenter() #元からある行
} #元からある行
 dependencies { #元からある行
 classpath 'com.android.tools.build:gradle:3.5.0' #元からある行
 classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" #元からある行
 classpath 'com.google.gms:google-services:4.3.3'
 } #元からある行
} #元からある行

allprojects { #元からある行
repositories { #元からある行
google() #元からあるかも

jcenter() #元からある行
} #元からある行
} #元からある行

 

android->appフォルダにある方のbuild.gradleは、ファイルの最後のあたりに次を追記。

dependencies {#元からある行
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"#元からある行
testImplementation 'junit:junit:4.12'#元からある行
androidTestImplementation 'androidx.test:runner:1.1.1'#元からある行
androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'#元からある行
implementation 'com.google.firebase:firebase-core:17.2.2'
}#元からある行


apply plugin: 'c
om.google.gms.google-services'

変更した後、sync nowを実行する必要があることに留意。

⇨「sync now」は表示されないので、右上の「Open for Editing in Android Studio」からbuild.gradleを更新 

 

⑤利用するdartファイル(main.dartとか)に次の記載を追加

・一番先頭あたりにimportを追加。(ついでに広告ユニットIDを変数化)

import 'package:firebase_admob/firebase_admob.dart';
String admob01 = BannerAd.testAdUnitId; //テスト用。本当はここに広告ユニットIDを設定

 

・classの最初で初期設定&表示設定

class MyApp extends StatelessWidget {#元からある行
//admob広告表示のための初期設定
static MobileAdTargetingInfo targetingInfo = MobileAdTargetingInfo(

keywords: <String>[
'任意のキーワード',
'任意のキーワード②',
'任意のキーワード③'

],
contentUrl: 'http://自分のHPサイトURL',
childDirected: false,
testDevices: <String>[],
);
BannerAd myBanner = BannerAd(

adUnitId: admob01, //バナー広告のユニットID
size: AdSize.banner,
targetingInfo: targetingInfo,
listener: (MobileAdEvent event) {

print("BannerAd event is $event");
},
)
;


@override #元からある行
Widget build(BuildContext context) { #元からある行

//admobのバナー広告表示
myBanner
..load()

..show(
anchorOffset: 0.0,
anchorType: AnchorType.bottom,
)
;

return MaterialApp( #ここからはコンテンツ本体

 

 

※おまけで、ドメインを変更したくなったので、下記サイトを参考に変更
(おまけと言うか、ドメイン名がfirebase側の登録内容と違っていてうまく接続できなかったので修正)

https://qiita.com/ayatothos/items/988bad279f465e174158