[flutter]google_mobile_ads 安裝與使用範例

超完整 ✅ Flutter google_mobile_ads 安裝與使用範例來囉！

這套件用來整合 Google AdMob 廣告，支援 Banner、Interstitial（插頁）、Rewarded（獎勵） 廣告。

✅ pubspec.yaml 安裝

dependencies:
  google_mobile_ads: ^5.1.0

✅ Android 設定 (android/app/src/main/AndroidManifest.xml)

在 <application> 裡加入：

<meta-data
    android:name="com.google.android.gms.ads.APPLICATION_ID"
    android:value="ca-app-pub-3940256099942544~3347511713"/>  <!-- 測試 App ID -->

👉 注意：上線時換成你自己的 AdMob App ID

✅ iOS 設定 (ios/Runner/Info.plist)

加入：

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>  <!-- 測試 App ID -->

✅ 初始化 (main.dart)

import 'package:google_mobile_ads/google_mobile_ads.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();  // 初始化廣告 SDK
  runApp(MyApp());
}

✅ Banner Ad 範例

class MyBannerAd extends StatefulWidget {
  @override
  State<MyBannerAd> createState() => _MyBannerAdState();
}

class _MyBannerAdState extends State<MyBannerAd> {
  late BannerAd _bannerAd;
  bool _isAdLoaded = false;

  @override
  void initState() {
    super.initState();
    _bannerAd = BannerAd(
      adUnitId: BannerAd.testAdUnitId, // 換成你的 adUnitId
      size: AdSize.banner,
      request: AdRequest(),
      listener: BannerAdListener(
        onAdLoaded: (_) => setState(() => _isAdLoaded = true),
        onAdFailedToLoad: (ad, error) {
          ad.dispose();
          print('Banner Ad Load Failed: $error');
        },
      ),
    )..load();
  }

  @override
  void dispose() {
    _bannerAd.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return _isAdLoaded
        ? Container(
            width: _bannerAd.size.width.toDouble(),
            height: _bannerAd.size.height.toDouble(),
            child: AdWidget(ad: _bannerAd),
          )
        : SizedBox();
  }
}

📌 加到畫面：

Scaffold(
  appBar: AppBar(title: Text("AdMob Banner")),
  body: Column(
    children: [
      Expanded(child: Center(child: Text("內容區"))),
      MyBannerAd(), // 加在最底部
    ],
  ),
);

✅ Interstitial Ad（插頁廣告）

late InterstitialAd _interstitialAd;

void loadInterstitialAd() {
  InterstitialAd.load(
    adUnitId: InterstitialAd.testAdUnitId,
    request: AdRequest(),
    adLoadCallback: InterstitialAdLoadCallback(
      onAdLoaded: (ad) => _interstitialAd = ad,
      onAdFailedToLoad: (err) => print('Interstitial Failed: $err'),
    ),
  );
}

void showInterstitialAd() {
  _interstitialAd.show();
}

✅ Rewarded Ad（獎勵廣告）

void loadRewardedAd() {
  RewardedAd.load(
    adUnitId: RewardedAd.testAdUnitId,
    request: AdRequest(),
    rewardedAdLoadCallback: RewardedAdLoadCallback(
      onAdLoaded: (ad) {
        ad.show(onUserEarnedReward: (ad, reward) {
          print('使用者獲得獎勵: ${reward.amount}');
        });
      },
      onAdFailedToLoad: (err) => print('Rewarded Failed: $err'),
    ),
  );
}

✅ 測試用 Ad Unit ID（官方）

廣告類型測試 adUnitId
App IDca-app-pub-3940256099942544~3347511713
Bannerca-app-pub-3940256099942544/6300978111
Interstitialca-app-pub-3940256099942544/1033173712
Rewardedca-app-pub-3940256099942544/5224354917




自動彈出插頁


Flutter 自動彈出 Interstitial（插頁）廣告 範例，廣告在進入頁面或某個動作後自動彈出！

✅ 完整流程重點：

  • 進入頁面時就載入插頁廣告

  • 載入完成後自動顯示

  • 廣告關閉後處理事件（如回首頁、跳轉）

✅ 完整 Flutter 範例


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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize(); // 初始化 AdMob
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: AutoInterstitialPage());
  }
}

class AutoInterstitialPage extends StatefulWidget {
  @override
  _AutoInterstitialPageState createState() => _AutoInterstitialPageState();
}

class _AutoInterstitialPageState extends State<AutoInterstitialPage> {
  InterstitialAd? _interstitialAd;
  bool _isAdReady = false;

  @override
  void initState() {
    super.initState();
    _loadInterstitialAd();
  }

  void _loadInterstitialAd() {
    InterstitialAd.load(
      adUnitId: InterstitialAd.testAdUnitId, // 換成你的 adUnitId
      request: AdRequest(),
      adLoadCallback: InterstitialAdLoadCallback(
        onAdLoaded: (InterstitialAd ad) {
          print('插頁廣告載入完成');
          _interstitialAd = ad;
          _isAdReady = true;
          _showInterstitialAd(); // 載入好後直接顯示
        },
        onAdFailedToLoad: (LoadAdError error) {
          print('插頁廣告載入失敗: $error');
        },
      ),
    );
  }

  void _showInterstitialAd() {
    if (_isAdReady && _interstitialAd != null) {
      _interstitialAd!.fullScreenContentCallback = FullScreenContentCallback(
        onAdDismissedFullScreenContent: (InterstitialAd ad) {
          print('廣告關閉');
          ad.dispose();
          Navigator.pop(context); // 廣告關閉後回上頁或跳頁
        },
        onAdFailedToShowFullScreenContent: (InterstitialAd ad, AdError error) {
          print('廣告顯示失敗: $error');
          ad.dispose();
        },
      );
      _interstitialAd!.show();
    }
  }

  @override
  void dispose() {
    _interstitialAd?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('自動彈出插頁')),
      body: Center(
        child: Text('進來就自動顯示插頁廣告'),
      ),
    );
  }
}

✅ 重點解說

✅ initState() 自動載入插頁
✅ 廣告載入成功就 _showInterstitialAd()
✅ 廣告關閉後用 Navigator.pop(context) 或做你要的事
✅ 用 InterstitialAd.testAdUnitId 測試，正式版換自己的 ID

✅ 官方測試 Ad ID（插頁）

adUnitId: 'ca-app-pub-3940256099942544/1033173712',

✅ 結果效果：

✅ 頁面一開啟
✅ 廣告自動彈出
✅ 看完或關閉後跳轉或結束


看完獎勵廣告後加積分


Flutter 看完獎勵廣告（Rewarded Ad）自動加積分 範例，適合遊戲或 APP 任務系統！🔥

✅ 完整範例：看完獎勵廣告加積分

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: RewardAdPage());
  }
}

class RewardAdPage extends StatefulWidget {
  @override
  _RewardAdPageState createState() => _RewardAdPageState();
}

class _RewardAdPageState extends State<RewardAdPage> {
  RewardedAd? _rewardedAd;
  int _points = 0;
  bool _adReady = false;

  void _loadRewardedAd() {
    RewardedAd.load(
      adUnitId: RewardedAd.testAdUnitId, // 上線換自己的 ID
      request: AdRequest(),
      rewardedAdLoadCallback: RewardedAdLoadCallback(
        onAdLoaded: (ad) {
          print('獎勵廣告載入完成');
          _rewardedAd = ad;
          setState(() {
            _adReady = true;
          });
        },
        onAdFailedToLoad: (error) {
          print('載入失敗: $error');
        },
      ),
    );
  }

  void _showRewardedAd() {
    if (_rewardedAd != null) {
      _rewardedAd!.fullScreenContentCallback = FullScreenContentCallback(
        onAdDismissedFullScreenContent: (ad) {
          ad.dispose();
          _loadRewardedAd(); // 廣告看完後重新載入
        },
        onAdFailedToShowFullScreenContent: (ad, error) {
          print('顯示失敗: $error');
          ad.dispose();
        },
      );

      _rewardedAd!.show(
        onUserEarnedReward: (ad, reward) {
          print('使用者獲得獎勵: ${reward.amount}');
          setState(() {
            _points += reward.amount.toInt(); // ✅ 增加積分
          });
        },
      );
    }
  }

  @override
  void initState() {
    super.initState();
    _loadRewardedAd();
  }

  @override
  void dispose() {
    _rewardedAd?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('看廣告賺積分')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('目前積分：$_points', style: TextStyle(fontSize: 24)),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _adReady ? _showRewardedAd : null,
              child: Text('觀看廣告獲得積分'),
            ),
          ],
        ),
      ),
    );
  }
}

✅ 效果流程：

1️⃣ 進入畫面自動載入 Rewarded 廣告
2️⃣ 點「觀看廣告獲得積分」
3️⃣ 廣告完整看完 → 執行 onUserEarnedReward 增加積分
4️⃣ 廣告關閉後自動重載廣告

✅ 官方測試 Rewarded Ad ID

adUnitId: 'ca-app-pub-3940256099942544/5224354917'

✅ 重點解說：

  • reward.amount.toInt() 就是你拿到的積分

  • 廣告完整看完才會觸發 onUserEarnedReward

  • 失敗、關閉、看完都有 callback 可控

  • 積分可連接你的會員系統 or 本地存檔




「每日限制 + 獎勵廣告加積分」範例
✅ 每天最多看 N 次廣告
✅ 每次加積分
✅ 自動判斷今天是否還能領

✅ 完整 Flutter 範例：每日限制 5 次

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:intl/intl.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: RewardWithDailyLimitPage());
  }
}

class RewardWithDailyLimitPage extends StatefulWidget {
  @override
  _RewardWithDailyLimitPageState createState() => _RewardWithDailyLimitPageState();
}

class _RewardWithDailyLimitPageState extends State<RewardWithDailyLimitPage> {
  RewardedAd? _rewardedAd;
  int _points = 0;
  int _rewardedToday = 0;
  final int _dailyLimit = 5;
  String _todayKey = DateFormat('yyyy-MM-dd').format(DateTime.now());

  @override
  void initState() {
    super.initState();
    _loadTodayData();
    _loadRewardedAd();
  }

  Future<void> _loadTodayData() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    int count = prefs.getInt('rewarded_$_todayKey') ?? 0;
    setState(() {
      _rewardedToday = count;
    });
  }

  Future<void> _saveTodayData() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.setInt('rewarded_$_todayKey', _rewardedToday);
  }

  void _loadRewardedAd() {
    RewardedAd.load(
      adUnitId: RewardedAd.testAdUnitId,
      request: AdRequest(),
      rewardedAdLoadCallback: RewardedAdLoadCallback(
        onAdLoaded: (ad) => _rewardedAd = ad,
        onAdFailedToLoad: (error) => print('廣告載入失敗: $error'),
      ),
    );
  }

  void _showRewardedAd() {
    if (_rewardedAd != null) {
      _rewardedAd!.fullScreenContentCallback = FullScreenContentCallback(
        onAdDismissedFullScreenContent: (ad) {
          ad.dispose();
          _loadRewardedAd(); // 廣告關閉後重新載入
        },
        onAdFailedToShowFullScreenContent: (ad, error) {
          print('顯示失敗: $error');
          ad.dispose();
        },
      );

      _rewardedAd!.show(
        onUserEarnedReward: (ad, reward) {
          print('獲得獎勵: ${reward.amount}');
          setState(() {
            _points += reward.amount.toInt();
            _rewardedToday += 1;
          });
          _saveTodayData();
        },
      );
    }
  }

  @override
  void dispose() {
    _rewardedAd?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    bool canWatch = _rewardedToday < _dailyLimit;
    return Scaffold(
      appBar: AppBar(title: Text('獎勵廣告 + 每日限制')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('目前積分：$_points', style: TextStyle(fontSize: 24)),
            SizedBox(height: 10),
            Text('今日已領：$_rewardedToday / $_dailyLimit', style: TextStyle(fontSize: 18)),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: canWatch ? _showRewardedAd : null,
              child: Text(canWatch ? '看廣告獲得積分' : '今天已達上限'),
            ),
          ],
        ),
      ),
    );
  }
}

✅ 重點功能

✅ SharedPreferences 本地記錄每天觀看次數
✅ 自動產生每天的 key，隔天自動重置
✅ 每次看完 rewardedToday += 1，存起來
✅ Text 顯示今日次數 / 總上限
✅ 自動禁用按鈕防止超過上限

✅ 官方測試 Rewarded Ad ID

adUnitId: 'ca-app-pub-3940256099942544/5224354917',

✅ 你可以直接改：

final int _dailyLimit = 5;  // 每日最多看 5 次，改成你要的

✅ 加強版功能（要的話我直接幫你加）：

✅ Firebase 存積分，跨裝置同步
✅ 天數累積 Bonus（連續領獎勵）
✅ 加個「倒數顯示」明天可再領













留言

張貼留言

這個網誌中的熱門文章

flutter 使用 ToastDialog 範例

 Flutter中沒有內置的Toast Dialog小部件，但是可以使用第三方庫來實現。這裡有一個示例，該示例使用flushbar庫實現Toast Dialog小部件。首先需要在 `pubspec.yaml`  文件中加入flushbar庫： yaml dependencies:   flushbar: ^1.10.0 接下來，使用以下代碼在您的Flutter應用程式中使用Toast Dialog小部件： import 'package:flushbar/flushbar.dart'; void showToast(String message, BuildContext context) {   Flushbar(     message: message,     duration: Duration(seconds: 3), // 設定顯示時間     flushbarStyle: FlushbarStyle.GROUNDED, // 設定樣式   )..show(context); } 以上代碼使用Flushbar庫創建一個Toast Dialog小部件。 `showToast()` 方法接受一個訊息和上下文對象，然後顯示Toast Dialog小部件。Toast Dialog小部件自動消失，消失時間可以使用 `duration` 屬性設定。另外，還可以使用 `flushbarStyle` 屬性設定Toast Dialog小部件的樣式。 可以像以下方式，使用上面的  `showToast` 方法顯示Toast Dialog小部件： showToast('Hello, World', context); 我們可以在需要顯示資訊的地方調用這個方法，顯示Toast Dialog小部件。希望這可以幫助到您！
閱讀完整內容

[flutter]flutter如何防止GPS偽定位

在 Flutter 中，要防止 GPS 偽定位（Mock Location），可以採取以下幾種方法： 1. 檢測是否啟用了 Mock Location（Android） 在 Android 設備上，你可以使用 isMockLocation 來判斷位置數據是否是模擬的。 方法 1：透過 Location 插件 import 'package:location/location.dart'; Future<bool> isMockLocationEnabled() async { Location location = Location(); LocationData locationData = await location.getLocation(); return locationData.isMock ?? false; } 方法 2：透過 locationManager （更準確） 使用 MethodChannel 來直接調用原生 Android API 來檢測 Mock Location： import 'package:flutter/services.dart'; Future<bool> isMockLocation() async { const platform = MethodChannel('mock_location_checker'); try { final bool result = await platform.invokeMethod('isMockLocation'); return result; } on PlatformException { return false; } } 對應的 Android 原生代碼（Kotlin）： package com.example.app import android.content.Context import android.location.Location import android.location.LocationManager import android.os.Build import io...
閱讀完整內容

ScaffoldMessenger 範例

 Flutter 2.0 引入了  `ScaffoldMessenger`  來取代舊的  `Scaffold.of(context)` 。這使得 Flutter 中的 Snackbars 和 Bottom Sheets 更加可靠。以下是一個示例，使用  `ScaffoldMessenger`  來顯示 Snackbar。  首先，需要在  `Scaffold`  中添加一個  `ScaffoldMessenger`  小部件。這裡有一個簡單的  `Scaffold`  小部件的示例： class MyHomePage extends StatelessWidget {   @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(title: Text('ScaffoldMessenger Demo')),       body: Center(child: Text('Hello, World!')),       floatingActionButton: FloatingActionButton(         onPressed: () {           // 在这里显示 Snackbar         },         child: Icon(Icons.add),       ),     );   } } 接下來，在 FloatingActionButton 的  `onPressed`  回調中，使用  `ScaffoldMessenger`  來顯示 Snackbar。這是一個示例： clas...
閱讀完整內容