[flutter] 플러터 앱의 광고 (Ad) 적용 방법

플러터는 구글의 개발 프레임워크로서, 다양한 플랫폼에서 동작하는 앱을 개발할 수 있습니다. 이러한 플러터 앱에 광고를 추가하여 수익을 창출할 수도 있습니다. 이번 포스트에서는 플러터 앱에 광고를 적용하는 방법에 대해 알아보겠습니다.

1. AdMob 계정 생성 및 앱 등록

우선, 광고를 적용하기 위해서는 AdMob 계정이 필요합니다. AdMob은 구글의 광고 플랫폼으로서, 여러 종류의 광고 형식을 제공합니다. AdMob 계정을 생성한 후, 앱을 등록해야합니다.

  1. AdMob 웹사이트에서 계정을 생성하고 로그인합니다.
  2. 계정을 생성한 후, 앱 섹션으로 이동하여 앱을 등록합니다. 등록할 때 앱의 패키지명을 입력해야합니다. 예를 들어, “com.example.myapp”과 같은 형식으로 입력합니다.

2. Flutter 프로젝트에 AdMob 플러그인 추가

플러터 앱에 AdMob 광고를 적용하기 위해서는 AdMob 플러그인을 프로젝트에 추가해야합니다.

  1. pubspec.yaml 파일을 열고, dependencies 섹션에 다음과 같은 코드를 추가합니다:
dependencies:
  firebase_admob: ^0.14.0+2
  1. 터미널에서 flutter packages get 명령어를 실행하여 패키지를 다운로드합니다.

3. AdMob 광고 유형 선택

AdMob은 배너 (Banner), 전면 (Interstitial), 보상 (Rewarded) 등 다양한 광고 형식을 제공합니다. 여기서는 배너 광고를 적용하는 방법을 소개하겠습니다.

4. 배너 광고 위젯 추가

Flutter 앱의 화면에 배너 광고를 추가하려면 FirebaseAdMob 패키지에서 제공하는 배너 위젯을 사용해야합니다.

import 'package:firebase_admob/firebase_admob.dart';

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  BannerAd _bannerAd;
  
  @override
  void initState() {
    super.initState();
    FirebaseAdMob.instance.initialize(appId: '<your_app_id>');
    _bannerAd = createBannerAd();
  }

  BannerAd createBannerAd() {
    return BannerAd(
      adUnitId: '<your_ad_unit_id>',
      size: AdSize.banner,
      targetingInfo: targetingInfo,
      listener: (MobileAdEvent event) {
        print("BannerAd event is $event");
      },
    );
  }

  @override
  void dispose() {
    super.dispose();
    _bannerAd?.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Ad Example'),
        ),
        body: Center(
          child: GestureDetector(
            onTap: () {
              _bannerAd ??= createBannerAd();
              _bannerAd
                ..load()
                ..show();
            },
            child: Text('Tap to show banner ad'),
          ),
        ),
      ),
    );
  }
}

위 코드에서 <your_app_id><your_ad_unit_id>를 앞서 생성한 AdMob 계정에 등록한 앱의 ID와 광고 유닛 ID로 변경해야합니다.

5. 앱 실행 및 테스트

이제 앱을 실행하여 배너 광고가 잘 표시되는지 확인해보세요. 위의 코드에서 flutter run 명령어를 실행하여 앱을 실행할 수 있습니다.

앱을 실행하고 배너 광고 영역을 탭하면 광고가 표시되어야합니다. 광고가 제대로 로드되지 않거나 표시되지 않는 경우, AdMob 계정 설정이나 광고 단위 ID가 올바른지 확인하세요.

정리

위에서 설명한 방법을 따라하면 플러터 앱에 광고를 적용할 수 있습니다. AdMob 계정 생성 및 앱 등록, 플러그인 추가, 광고 유형 선택, 배너 광고 위젯 추가와 같은 단계를 따라하면 광고를 효과적으로 표시할 수 있습니다.

이외에도 전면 광고나 보상 광고를 적용할 수도 있으므로 필요에 따라 다른 광고 형식을 참고하세요.