Flutter for Web で自由に広告を表示したい！

はじめに

このNoteではデモサイトにあるような広告表示をする方法を書いています。

デモサイト → https://flutter-ads.netlify.app/

※Netlifyの無料ホスティングを使用しているので最初の描画に少々時間がかかることをご了承ください…

この記事はデモサイトをご覧になってからお読みください。

今回はサイトの審査が不要ですぐに配信が開始できる忍者アドマックスを使用していますが、

Google AdSense等の他のアドネットワークに関してもこの方法で実現可能でした。

経緯

Flutter for Web って Admob 使えなくない…？

Flutter2.0になり、WebサポートがStableになりました。

それじゃあ、Webサイト作ってみよう！と思って作ったはいいものの

スマホアプリじゃないからAdmob使えないじゃん、、、

ということで、Web広告を入れ込む方法を考えました。

現状、Web用の広告ライブラリはない模様・・・？

策① フッターにバナーを表示させる

これは「Flutter Web 広告」とかで検索かけると、結構出てきた方法です。

Flutter for Web は "web/index.html" を描画し、その上にWidgetを配置していくため、

ページ下部を少しあけ、index.htmlの下部にバナーを表示することで

広告を表示することができます。

ただし、Flutter for Web はシングルページアプリケーションのため、

index.htmlを再度読み込むことがないため、バナーのリフレッシュ等はできません。

策② 広告をWidgetとして表示する。

デモサイトを見ていただいたかと思いますが、こちらが本題となります。