【Flutter】設定放送橫幅廣告(本套件已停止開發)

目前可以搜尋到 2 個支援 Flutter 放送 AdMob 的套件，其中 firebase_admob 看似是官方出的套件，目前是 0.9.3+2 版。

老人家沒有 Mac，所以只能試作 Android app


先建立一個 Flutter 專案

選擇 Flutter Application(圖略)


輸入專案名稱，Flutter SDK 的路徑，及存放專案的位置
在本例，我的 Flutter 是安裝在 D:\flutter

再來就採用預設值，直接按 下一步

展開專案，找到 pubspec.yaml，並打開檔案

pubspec.yaml

 
...
...
 
dependencies:
  ...
  ...
 
  cupertino_icons: ^0.1.2
 
  # admob, 注意：要跟上面對齊(感覺有類似 Python 的強制編排)
  firebase_admob: ^0.9.3+2
 
  ...
  ...
 

找到並編輯 AndroidManifest.xml

 
...
...
<application
    ...
    ... >
 
    <meta-data
        android:name="com.google.android.gms.ads.APPLICATION_ID"
        android:value="ca-app-pub-3940256099942544~3347511713"/>    測試用的 app-ID, 將來正式上線時再換成您的 app-ID
 
...
...
 

切換到 main.dart 頁籤

 
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:firebase_admob/firebase_admob.dart';    // 主要加入這列
 
const String testDevice = 'ASUS Z017DA';
 
...
...
 
class _MyHomePageState extends State<myhomepage> {
  int _counter = 0;
 
  // 加入這段
  static const MobileAdTargetingInfo targetingInfo = MobileAdTargetingInfo(
    testDevices: testDevice != null ? <string>[testDevice] : null,
    keywords: <string>['foo', 'bar'],
    contentUrl: 'http://foo.com/bar.html',
    childDirected: true,
    nonPersonalizedAds: true,
  );
 
  BannerAd _bannerAd;
 
  BannerAd createBannerAd() {
    return BannerAd(
      adUnitId: BannerAd.testAdUnitId,    // 測試時用的 unit ID
      // adUnitId: "正式的橫幅 unit ID",
      // size: AdSize.banner,       // 一般型, 320*50
      size: AdSize.smartBanner,  // 智慧型, 468*60
      // size: AdSize.mediumRectangle, // 中矩型, 300*250
      // size: AdSize.largeBanner, // 大型橫幅, 320*100
      // size: AdSize.fullBanner, // 468*60
      targetingInfo: targetingInfo,
      listener: (MobileAdEvent event) {
        print("BannerAd event $event");
      },
    );
  }
 
  @override
  void initState()
  {
      super.initState();
      FirebaseAdMob.instance.initialize(appId: FirebaseAdMob.testAppId);
      _bannerAd = createBannerAd()..load()
                                  ..show();
  }
 
  @override
  void dispose()
  {
      _bannerAd?.dispose();
      super.dispose();
  }
 
    ...
    ...
 

app 執行畫面