Flutter 앱에 AdMob 광고 달기 (admob_flutter)

Flutter 앱에서 AdMob 광고를 달기 위한 패키지에는 다음 3가지 정도 있습니다.

• firebase_admob / Flutter 앱에 AdMob 광고 달기 (admob_flutter)
• admob_flutter
• flutter_native_admob

이 글에서 소개될 패키지는 admob_flutter라는 패키지입니다.

admob_flutter | Flutter Package

 

지원하는 광고는,

• 배너 광고(Banner)
• 전면 광고(Interstitial)
• 보상형 광고(Reward)

이렇게 3가지 지원하고, 네이티브 광고(Native)는 추가될 예정이랍니다.

 

firebase_admob패키지에서는 배너광고가 하단 가운데만 위치 하지만, admob_flutter는 위젯으로 광고 위치를 정할 수 있습니다.

 

1. 패키지 설치하기

/pubspec.yaml 파일에 admob_flutter 패키지 추가

dependencies:
  flutter:
    sdk: flutter
    
  admob_flutter: ^0.3.4

Package get 실행

 

2. APP ID 설정하기

0) APP ID 만들기

https://apps.admob.com

AdMob 사이트 가서 APP을 만들면 APP ID가 생성됩니다.

 

1) Android [ADMOB_APP_ID] 설정

/android/app/src/main/AndroidManifest.xml파일에 [ADMOB_APP_ID] 입력하기.

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

위 입력된 코드는 Android Admob 테스트 아이디라서, 본인 Android [ADMOB_APP_ID]로 넣어 주면 됩니다.

 

2) iOS [ADMOB_APP_ID] 설정

/ios/Runner/Info.plist파일에 [ADMOB_APP_ID] 입력하기.

<dict>
  ...
  <key>GADApplicationIdentifier</key>
  <string>ca-app-pub-3940256099942544~1458002511</string>
  
  <key>io.flutter.embedded_views_preview</key>
    <string>YES</string>
</dict>

위 입력된 코드는 iOS Admob 테스트 아이디라서, 본인 iOS [ADMOB_APP_ID]로 넣어주면 됩니다.

 

그리고, firebase_admob 과는 달리 io.flutter.embedded_views_preview 설정도 해주셔야 합니다... 아마 내부적으로 웹뷰를 사용하나봅니다.

 

Xcode로 GoogleService-Info.plist 파일도 추가해 주세요.

https://clein8.tistory.com/entry/flutter-package-firebaseadmob 에서 자세하게 설명하고 있습니다.

 

3. Admob 적용하기

 

 

 

4. 스크린샷

 

 

5. 마치며

[2020.07.15]

이 패키지의 장점은, 원하는 위치에 AdMob광고를 달 수 있다는것이고, 단점은 setState 실행할 때마다 광고를 다시 읽어 온다는 것입니다. setState 방지 방법은 아래 링크에 있습니다.

https://stackoverflow.com/questions/60374255/how-to-stop-a-widget-to-reload-on-setstate-method-in-statefulwidget-class-in-f

 

 

패키지 라이선스 (Package License)

ISC License

 

Copyright (c) 2018, Youssef Kababe

Copyright (c) 2019, Kevin McGill <kevin@mcgilldevtech.com>