这几个网站非常值得借鉴学习:
- 在Dart Packages中有firebase_admob在Flutter的安装和使用方法。
- How to show a Firebase AdMob banner ad in Flutter中作者用横幅广告做了一个例子。
- Firebase for Flutter中有一些列安装操作的步骤。
- Google AdMob官网上提供了入门指南,帮助初学者区分什么是“横幅广告”、“插页式广告”、“原生广告”以及“激励广告”,并为每一种广告提供了<测试广告单元ID>。
在写代码之前需要准备和了解:
- 会出现 3 种 ID:
a) ADMOB_APP_ID :这个是AdMob的账号ID,需要提前注册并且跟自己要开发的APP进行绑定。
b) adUnitId / testAdUnitId / ADMOB_AD_ID :这些都是测试广告单元 ID,网上搜索会有很多,也可以使用Google AdMob官网上提供的,很随意就能弄到。
c) testDevices / ADMOB_TEST_DEVICE :这个是手机设备ID,如果有 b) 中的测试广告单元 ID,手机设备ID可以忽略不填。 - 会出现 4 种广告形式:
a) 横幅广告:横幅广告是在应用布局中占据一处位置的矩形图片或文字广告。用户与应用互动时,这类广告会停留在屏幕上,并且可在一段时间后自动刷新。
b) 插页式广告:插页式广告是全屏广告,它会覆盖整个应用界面,直到用户将其关闭。这些广告通常会在应用流程的自然过渡点(例如,活动之间或游戏关卡之间的暂停时段)展示。当应用展示插页式广告时,用户可以选择点按广告,访问其目标网址,也可以将其关闭,返回应用。
c) 原生广告:原生广告是通过平台原本就有的界面组件向用户呈现的广告素材资源。
d) 激励视频广告:激励视频广告是一种全屏视频广告,用户可选择使用全屏模式观看,以换取应用内奖励。
接下来开始配置
1. 在Flutter项目中引入firebase_admob
在dart packages中的installing有详细的步骤。
首先,将下面的代码加入到Flutter项目中的pubspec.yaml文件下。
dependencies:
firebase_admob: ^0.9.0+9
然后,在命令行中执行这段命令下载firebase_admob所需的包。
flutter pub get
2. 在Xcode中配置IOS
用Xcode打开Flutter的IOS项目,在左侧项目目录下找到Runner文件夹下Info.plist文件双击打开,在右侧界面右键Information Property List,选择Add Row。
Key:GADApplicationIdentifier
Type:String
Value:ca-app-pub-################~##########
配置完成之后不需要做其他操作。【注意:不要在Flutter项目下的IOS文件里去做这个操作,一定要用Xcode打开IOS项目进行这个操作。】
3. 在Flutter项目中编写代码
main.dart
import 'package:flutter/material.dart';
import 'test_page.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Firebase AdMob Example',
theme: new ThemeData(
primaryColor: const Color(0xFF43a047),
accentColor: const Color(0xFFffcc00),
primaryColorBrightness: Brightness.dark,
),
home: new TestPage(),
);
}
}
test_page.dart
import 'package:flutter/material.dart';
import 'package:firebase_admob/firebase_admob.dart';
// AdMob的账号 ID
const String AD_MOB_APP_ID = 'ca-app-pub-################~##########';
// 横幅广告 测试广告单元 ID
const String AD_HENG_FU = 'ca-app-pub-3940256099942544/2934735716';
// 插页式广告 测试广告单元 ID
const String AD_CHA_YE = 'ca-app-pub-3940256099942544/4411468910';
// 激励广告 测试广告单元 ID
const String AD_JI_LI = 'ca-app-pub-3940256099942544/1712485313';
class TestPage extends StatefulWidget {
TestPage({Key key}) : super(key: key);
@override
_TestPageState createState() => new _TestPageState();
}
class _TestPageState extends State<TestPage> {
int _goldCoins = 0;
static final MobileAdTargetingInfo targetingInfo = new MobileAdTargetingInfo(
keywords: <String>['flutterio', 'beautiful apps'],
contentUrl: 'https://flutter.io',
birthday: DateTime.now(),
testDevices: <String>[],
);
// 横幅广告
BannerAd myBanner = BannerAd(
adUnitId: AD_HENG_FU,
size: AdSize.smartBanner,
targetingInfo: targetingInfo,
listener: (MobileAdEvent event) {
print("BannerAd event is $event");
},
);
// 插页式广告
InterstitialAd myInterstitial = InterstitialAd(
adUnitId: AD_CHA_YE,
targetingInfo: targetingInfo,
listener: (MobileAdEvent event) {
print("InterstitialAd event is $event");
},
);
@override
void initState() {
super.initState();
// 初始化
FirebaseAdMob.instance.initialize(appId: AD_MOB_APP_ID);
// 激励广告
RewardedVideoAd.instance.load(adUnitId: AD_JI_LI, targetingInfo: targetingInfo);
RewardedVideoAd.instance.show();
RewardedVideoAd.instance.listener =
(RewardedVideoAdEvent event, {String rewardType, int rewardAmount}) {
if (event == RewardedVideoAdEvent.rewarded) {
setState(() {
_goldCoins += rewardAmount;
});
}
};
// 横幅广告
myBanner
..load()
..show(
anchorOffset: 60.0,
horizontalCenterOffset: 10.0,
anchorType: AnchorType.bottom,
);
// 插页式广告
myInterstitial
..load()
..show(
anchorType: AnchorType.bottom,
anchorOffset: 0.0,
horizontalCenterOffset: 0.0,
);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Firebase AdMob Example"),
),
body: new Padding(
padding: new EdgeInsets.symmetric(vertical: 0.0, horizontal: 4.0),
child: Text(
'${_goldCoins}'
),
),
);
}
@override
void dispose() {
myBanner?.dispose();
myInterstitial?.dispose();
super.dispose();
}
}