【Flutter】Flutter Webで広告を表示する

Flutter iOS/AndroidであればAdMobのSDKを使って簡単に広告を表示することが出来ます。しかしAdMobはFlutterWebに対応していませんし、AdSenseもそのままでは表示することが出来ません。

ではどうすればよいか？Flutterで広告を表示することを諦めます。HTML側で画面下部に広告を表示し、Flutter側ではその領域に表示しないようにします。

Flutter側ではHTML側で設定した分のmarginを設定して広告の領域には何も表示しないようにします。z-indexを指定しているので広告を隠してしまうことはありませんがボタンが広告に隠れてタップできないなどの問題が生じる可能性があるからです。

開発環境は広告が出ないようにする

できれば開発中は広告を出したくありません。 なぜなら間違って広告をタップしてしまったときにそれが不正と思われるとよろしくないからです。

そこでDeploy用のスクリプトを作りindex.htmlを差し替えることで開発中は広告を出ないようにしています。 開発用のindex.htmlでは広告を表示するスクリプトを呼ばないようにコメントアウトしています。