[Flutter] Admob의 가져오기(Provider·Null-Ssafty Edition)

45536 단어 Flutter AdMob tech

정부 지침서

공식 구글mobile_ads 플러그인의 구축 절차입니다.
※admob_flutter의 가져오기 절차가 아닙니다.

공식 가이드 여기 있습니다.

전제 확인

Fluter 버전 확인

• Fluter 1.222.0 이후
다음 명령을 실행하고 확인

% flutter --version
Flutter 2.0.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision adc687823a (7 months ago) • 2021-04-16 09:40:20 -0700
Engine • revision b09f014e96
Tools • Dart 2.12.3

Android Studio 버전 확인

· 안드로이드 스튜디오 3.2 이후
왼쪽 위의 Android Studio 탭에서 About Android Studio를 선택하고 확인합니다.

안드로이드에서 설정 확인

· minSdkVersion을 19로 설정한 후
· compuileSdkVersion을 28로 설정한 후
프로그램 단계의build입니다.gradle의 아래 부분을 확인하십시오

android {
    compileSdkVersion 30

    sourceSets {
        main.java.srcDirs += 'src/main/kotlin'
    }

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId ""
        minSdkVersion 21
        targetSdkVersion 30
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }

Admob 프로젝트 만들기

공식 홈페이지를 방문하여 홈페이지부터 앱을 추가하다

프로젝트 제작(Android·IOS 공용)

손 순서로 안드로이드·IOS 2점.
①플랫폼 설정
다음 설정
※ 앱 출시 완료 시, 상점에 등록된 상태로 설정

② 애플리케이션 이름 설정
프로그램 추가 설정 완료
※ 앱 이름은 안드로이드·IOS에서 동일 가능

③ 광고 단원의 설정
광고 단원의 제작을 클릭하여 제작하고 싶은 광고 단원을 선택하세요

④ 연소기 이름 입력
※ 광고 부문 명칭은 안드로이드·IOS에서 동일 가능
하지만 모든 플랫폼이 유일하도록 설정하십시오

⑤ 제어 ID
표시된 응용 프로그램 ID 및 광고 유닛 ID는 나중에 사용되므로 제어하십시오.
※ 나중에 확인하실 수도 있습니다.

Fluter 프로젝트 수정

Android용 설정

"/android/app/src/main/android Manifest.xml"파일의
"응용 프로그램"탭 아래에 "meta-data"탭 추가
※ "android:value"에서 방금 획득한 안드로이드용 애플리케이션 ID 설정

<manifest>
    <application>
        〜〜〜
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
    <application>
<manifest>

iOS용 설정

ios/Runner/Info.plist 파일에 다음 정의를 추가합니다.
※ "string"에서 방금 입수한 iOS용 애플리케이션 ID 설정

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-################~##########</string>

pubspec.편집

다음 사이트를 참고하여 플러그인을 추가하십시오

Admob의 초기화 처리(작업 확인)

main.데이터의main 함수에 다음과 같은 처리를 추가합니다
작업을 수행하고 확인합니다.

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

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

  runApp(MyApp());
}

광고 디스플레이 구현(Model 레이어)

공식 견본의 출처는 다음 문장을 보시오

광고 디스플레이는 모델류로 제작된다

import 'dart:io';
import 'package:google_mobile_ads/google_mobile_ads.dart';

class AdManager {
  BannerAd? bannerAd;
  InterstitialAd? interstitialAd;
}

광고 유닛 ID를 가져오는 방법 정의

IOS와 안드로이드에 사용되는 광고 셀의 ID가 다르기 때문에 위에서 제작한 Admer에서 Plaatform을 판별하고 ID를 판별하는 함수를 정의합니다.
※ 테스트 단계에서는 테스트 광고용 아이디를 사용하세요.
Android

IOS

  String get bannerAdUnitId {
    if (Platform.isAndroid) {
      //テスト広告
      return "ca-app-pub-3940256099942544/6300978111";
    } else if (Platform.isIOS) {
      //テスト広告
      return "ca-app-pub-3940256099942544/2934735716";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  String get interstitialAdUnitId {
    if (Platform.isAndroid) {
      //テスト広告
      return "ca-app-pub-3940256099942544/1033173712";
    } else if (Platform.isIOS) {
      //テスト広告
      return"ca-app-pub-3940256099942544/4411468910";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

Admob 광고 유닛 초기화 방법 정의

위에서 설명한 Admors 내에서 Admob의 초기화 처리(동작 확인)를 통해 생성된 Admob의 초기화 처리(동작 확인) 부분을 Admor 클래스에 전달합니다.
또한 Banner 광고와 Interstitial 광고의 초기화 처리를 정의합니다.
※ Banner 광고는 AdSize 방법으로 표시되는 사이즈 조정 가능

※ adLoadCallback 방법을 정의하여 초기화 이벤트를 트리거하고자 하는 처리를 정의할 수 있습니다.

  Future<void> initAdmob() {
    return MobileAds.instance.initialize();
  }

  void initBannerAd() {
    bannerAd = BannerAd(
        adUnitId: bannerAdUnitId,
        size: AdSize.fullBanner,
        request: AdRequest(),
        listener: BannerAdListener());
  }

  void initInterstitialAd() {
    InterstitialAd.load(
        adUnitId: interstitialAdUnitId,
        request: AdRequest(),
        adLoadCallback: InterstitialAdLoadCallback(
            onAdLoaded: (InterstitialAd ad){
              interstitialAd = ad;
              _numInterstitialAdLoadAttempt = 0;
            },
            onAdFailedToLoad: (LoadAdError error){
              print('InterstitialAd failed to load: $error');
              interstitialAd = null;
              _numInterstitialAdLoadAttempt++;
              if (maxFailedToAttempt >= _numInterstitialAdLoadAttempt) initInterstitialAd();
            },
        ),);
  }

광고 단원의 읽기 처리 정의

Banner 광고 및 Interstitial 광고의 읽기 및 폐기 처리를 정의합니다.
이러한 함수는 View 레이어에서 Provider를 통해 호출됩니다.

  void loadBannerAd() {
    bannerAd?.load();
  }

  void dispose() {
    bannerAd?.dispose();
  }

  void loadInterstitialAd() {
    if (interstitialAd == null) return;

    interstitialAd!.fullScreenContentCallback = FullScreenContentCallback(
      onAdDismissedFullScreenContent: (InterstitialAd ad) {
        ad.dispose();
        initInterstitialAd();
      },
      onAdFailedToShowFullScreenContent: (InterstitialAd ad, AdError error) {
        ad.dispose();
        initInterstitialAd();
      },
    );

    interstitialAd!.show();
    interstitialAd = null;
  }

Model 레이어의 전체 텍스트 만들기

import 'dart:io';
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:{AdManegerクラスのパス}/ad_manager.dart';

class AdManager {
  BannerAd? bannerAd;
  InterstitialAd? interstitialAd;

  bool isInterstitialAdReady = false;
  int maxFailedToAttempt = 3;
  int _numInterstitialAdLoadAttempt = 0;

  Future<void> initAdmob() {
    return MobileAds.instance.initialize();
  }

  void initBannerAd() {
    bannerAd = BannerAd(
        adUnitId: bannerAdUnitId,
        size: AdSize.fullBanner,
        request: AdRequest(),
        listener: BannerAdListener());
  }

  void initInterstitialAd() {
    InterstitialAd.load(
      adUnitId: interstitialAdUnitId,
      request: AdRequest(),
      adLoadCallback: InterstitialAdLoadCallback(
        onAdLoaded: (InterstitialAd ad) {
          interstitialAd = ad;
          _numInterstitialAdLoadAttempt = 0;
        },
        onAdFailedToLoad: (LoadAdError error) {
          print('InterstitialAd failed to load: $error');
          interstitialAd = null;
          _numInterstitialAdLoadAttempt++;
          if (maxFailedToAttempt >= _numInterstitialAdLoadAttempt)
            initInterstitialAd();
        },
      ),
    );
  }

  static String get appId {
    if (Platform.isAndroid) {
      return "ca-app-pub-################~##########";
    } else if (Platform.isIOS) {
      return "ca-app-pub-################~##########";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  String get bannerAdUnitId {
    if (Platform.isAndroid) {
      //テスト広告
      return "ca-app-pub-3940256099942544/6300978111";
    } else if (Platform.isIOS) {
      //テスト広告
      return "ca-app-pub-3940256099942544/2934735716";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  String get interstitialAdUnitId {
    if (Platform.isAndroid) {
      //テスト広告
      return "ca-app-pub-3940256099942544/1033173712";
    } else if (Platform.isIOS) {
      //テスト広告
      return"ca-app-pub-3940256099942544/4411468910";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  void loadBannerAd() {
    bannerAd?.load();
  }

  void dispose() {
    bannerAd?.dispose();
  }

  void loadInterstitialAd() {
    if (interstitialAd == null) return;

    interstitialAd!.fullScreenContentCallback = FullScreenContentCallback(
      onAdDismissedFullScreenContent: (InterstitialAd ad) {
        ad.dispose();
        initInterstitialAd();
      },
      onAdFailedToShowFullScreenContent: (InterstitialAd ad, AdError error) {
        ad.dispose();
        initInterstitialAd();
      },
    );

    interstitialAd!.show();
    interstitialAd = null;
  }
}

ViewModel 레이어 생성

AdManager를 구조기로 수신하여 다양한 초기화 작업을 수행합니다.
또한 광고를 진행하는load와 폐기된 함수를 정의한다.

import 'package:flutter/material.dart';
class ViewModel extends ChangeNotifier {
  AdManager adManager;

  ViewModel(this.adManager) {
  adManager
  ..initAdmob()
  ..initBannerAd()
  ..initInterstitialAd();
  }

  void loadBannerAd() {
    adManager.loadBannerAd();
  }

  void loadInterstitialAd() {
    adManager.loadInterstitialAd();
  }

  void disposeAd() {
    adManager.dispose();
  }

주 함수 수정

이번에는 Provider 라이브러리를 사용하여 ViewModel 레이어를 만듭니다.
가져오지 않은 경우 아래 사이트를 참조하십시오.편집yaml.

※ 해당 시점에 동작을 확인하는 것을 추천합니다

import 'package:{viewmodelクラスのパス}/viewmodel.dart';
import 'package:provider/provider.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(ChangeNotifierProvider<ViewModel>(
    create: (_) => ViewModel(prefs,AdManager()),
    child: MyApp(),
  ));
}

Banner 광고의 표시

Banner 광고 읽기

화면에 처리를 표시하기 전에, 예를 들어build 함수 바로 아래에 ViewModel에 정의된loadbannerAd를 호출합니다.

  @override
  Widget build(BuildContext context) {
    context.select((ViewModel avm) => avm.loadBannerAd());
    return Scaffold(

Banner 광고의 표시

다음 함수를 정의하여 좋아하는 곳에 광고 설정을 합니다.

  Widget _footerAdContent(BuildContext context) {
    var bannerAd = context.select((ViewModel avm) => avm.adManager.bannerAd);
    return bannerAd == null
        ? Container()
        : Center(
            child: Container(
              width: bannerAd.size.width.toDouble(),
              height: bannerAd.size.height.toDouble(),
              child: AdWidget(
                ad: bannerAd,
              ),
            ),
          );
  }

광고의 표시

시스템 복귀 버튼 등 클릭 이벤트와 함께 다음 화면 이동 전 ViewModel층이 정의한loadInterstirial Ad 방법을 호출합니다.

onPressed: () {
　　　context.read<AppViewModel>().loadInterstitialAd(null);
　　　Navigator.of(context).pop(1);
},

Reference

이 문제에 관하여([Flutter] Admob의 가져오기(Provider·Null-Ssafty Edition)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/hitsujicloud/articles/2cc348d3d6b817

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

graphcut

(6) - ARC 오브젝트 전환

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다