Flutter: iPhoneでAdMobのインタースティシャル広告の閉じるボタンが押せない

結論:setEnabledSystemUIModeメソッドでステータスバーを一時的に隠す

2022/10/10 Flutter エラー・バグ日記

 

AdMobインタースティシャル広告(全画面広告)を表示すると、一部のiPhoneで、右上に出てくる閉じるボタン(バツマーク)が押せず、広告を消せないことに気づいた。

 

 

使用している「google_mobile_ads」のバージョンは、本日記時点で最新の2.0.1。

 

一度インタースティシャル広告を表示すると、アプリを落とさざるを得ないので、この状態は絶対NG。。。

 

本記事はライトな日記思考で書いているので、詳細説明はしておらず、基本、テキストのみで画像とかはあまり載せておりません。。m(_ _)m

解説記事ではないため、解決していない内容や、その時々の間違った解釈を述べてしまっている可能性が大いにありますので、何卒、ご了承ください。

 

ノッチのあるiPhoneだと発生する?

この問題は、iPhone14 Pro(iOS16)のシミュレーターでやると発生する。

 

iPhone 8 Plus(iOS16)のシミュレーターでは、問題なく広告を閉じることができた。

 

以前、こちらの日記でも似た現象が発生したことを書いたが、どうやらノッチ(画面上部の切り込み部分)の有無が影響している印象(iPhone14 Proは画面上部に楕円形のノッチがある)。

 

SafeAreaの設定有無は関係なかった

もしかすると、閉じるボタンが、タップできない領域に表示されているせいかもしれないので、

 

SafeAreaを設定すれば解消するのでは?

 

と思い、全体をSafeAreaでラップしてみたが、残念ながら状況は変わらず

 

ステータスバーが邪魔するのが原因らしい

仕方なく調べてみると、日本語の情報は見つからなかったが、GitHubのイシューに類似の報告が多数上がっていた。

 

 

 

 

2つ目、3つ目のイシューを見ると、本日記時点でまだOpen中であり、解消に至っていないらしい。

 

3つ目のイシュー内のこちらのコメントでは、iOS16のiPhone14 Pro Maxで発生すると報告されている。

 

ざっと見た感じでは、どうやら「google_mobile_ads」の不具合で、広告表示時にステータスバー(時刻や電池残量等の表示エリア)を隠す動作がうまく機能せず、閉じるボタンを押せない状況にしているらしい。

 

そのうちパッケージの更新で解消される気もするが、イシュー自体は2021年に上がったものなので、難しい問題なのかもしれない。。

 

setEnabledSystemUIOverlaysは非推奨なので、setEnabledSystemUIModeで暫定対処

とは言え、対処法が無いわけではなく、上記イシューの中で、暫定対処法が示されていた(大変助かりますm(_ _)m)。

 

具体的には、「setEnabledSystemUIOverlays」メソッドを用いて、インタースティシャル広告表示中に、ステータスバーを非表示にし、広告表示が終わったら、再度ステータスバーを表示させるという方法。

 

ただし、こちらの日記でも書いたが、「setEnabledSystemUIOverlays」メソッドは非推奨になっているので、下図のように、option+Enter(Android Studioの場合)を押して、推奨メソッド「setEnabledSystemUIMode」に修正する必要がある。

 

非推奨メソッドのところでoption+Enterを押すと、自動で修正してくれる(Android Studioの場合)

 

結論として、インタースティシャル広告の表示メソッド内に、以下のように追記することで、無事、解消できた(追記部分に「↓追記箇所」とコメントを付記)。

 

※コードの詳細説明は割愛しているが、ベースのコードは、こちらのExampleのインタースティシャル広告の部分を参考にしたもの

// クラス名、メソッド名、プロパティ名(変数名)について、筆者が作成したもの(名前変更可のもの)
// の名前の末尾には、大文字のオー「O」をつけています
// ※ライブラリ(パッケージ)で予め決められているもの(名前の変更不可のもの)と、
//  自分で作成したもの(名前の変更可のもの)の区別をしやすくするため

Future<void> showInterstitialAdO() async{
    if (interstitialAdO == null) {
      return;
    }
    interstitialAdO!.fullScreenContentCallback = FullScreenContentCallback(
        onAdDismissedFullScreenContent: (InterstitialAd adO) async{
          await adO.dispose();
          await initInterstitialAdO();

          // ↓追記箇所 ここから
          // iOSの場合、広告を閉じたらステータスバーを再表示する
          if (Platform.isIOS) {
            SystemChrome.setEnabledSystemUIMode(
                SystemUiMode.manual, overlays: SystemUiOverlay.values);
          }
          // ここまで

        },
        onAdFailedToShowFullScreenContent:
            (InterstitialAd adO, AdError adErrorO) async{
          await adO.dispose();
          await initInterstitialAdO();
        }
    );

    // ↓追記箇所 ここから
    // iOSの場合、広告表示中はステータスバーを非表示にする
    if (Platform.isIOS) {
      SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);
    }
    // ここまで

    await interstitialAdO!.show();
    interstitialAdO = null;
  }

 

インタースティシャル広告表示中は、下図のようにステータスバーが非表示になり、右上の閉じるボタンが押せるようになる。

 

 

そのうちパッケージの方で解消されるとは思うが、インタースティシャル広告を使うときは注意が必要。

 

\一般的なエラー対処法をまとめた記事はこちら/

 

リリースしたアプリ(全てFlutterで開発)

暗記用マーカー – シンプル穴埋め問題作成

Google Play で手に入れよう
Download on the App Store

 

超即ToDo –最短2タップで通知登録できるタスク管理アプリ

Google Play で手に入れよう
Download on the App Store

 

かんたんプリント管理:アラート・OCR文字認識・検索機能を搭載

Google Play で手に入れよう
Download on the App Store

 

シンプルメモ帳「BasicMemo」 – 文字カウント、ワンタッチ入力、タグ管理等の機能を搭載

Macのデスクトップ版もリリースしました。

Google Play で手に入れよう
Download on the App Store

 

個人アプリ開発で役立ったもの

おすすめの学習教材

超初心者向けでオススメな元Udemyの講座/

 

\Gitの基礎について無料で学べる/

 

おすすめの学習書籍

実用的image_pickerに関してかなり助けられた/

 

Dartの基礎文法を素早くインプットできる/


Dart入門 – Dartの要点をつかむためのクイックツアー

 

おすすめのソフトウェア

安くて高機能。アプリの独自ドメイン・紹介サイト構築に最適/

 

\アイコン作成・画面設計・クラウド保存…何でもできて超必須

 

おすすめのハードウェア

\リーズナブルな価格で検証端末を確保できる/

 

\目線の高さを調節しやすく、疲れにくい

 

\キータッチが超静音で心地よい/

 

おすすめのサポートアイテム

\部屋の中を仕切って、集中できる開発環境を作れる/

 

\部屋の中でも大き過ぎず、長時間座っても疲れない

 

\バグと格闘した後の肩こりを解消してくれる/

タイトルとURLをコピーしました