[flutter] 플러터에서 Visibility 설정을 이용한 광고 배너 관리하기

18 Dec 2023

flutter

플러터 앱을 개발하다 보면 사용자에게 광고를 보여주어야 하는 경우가 있을 것입니다. 그러나 사용자에게 광고를 강제로 보여주기보다는, 사용자가 일시적으로 혹은 영구적으로 광고 배너를 숨기거나 보여줄 수 있는 설정을 제공하는 것이 더욱 바람직할 것입니다.

이번 포스트에서는 플러터에서 Visibility 위젯을 이용하여 광고 배너를 관리하는 방법에 대해 알아보겠습니다.

1. 광고 배너 위젯 추가하기

가장 먼저, 광고를 표시하기 위한 배너 위젯을 추가해야 합니다. 사용하고 있는 광고 서비스에 관련된 문서를 참고하여 해당 광고를 표시할 수 있는 위젯을 추가합니다.

예를 들어, 구글 애드몹을 사용하는 경우, GoogleMobileAds 패키지에서 제공하는 BannerAd 위젯을 사용할 수 있습니다.

import 'package:google_mobile_ads/google_mobile_ads.dart';

class AdBanner extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BannerAd(
      // 광고 단위 ID 및 사이즈 설정
      adUnitId: '<Your ad unit ID>',
      size: AdSize.banner,
      listener: AdListener(),
      request: AdRequest(),
    );
  }
}

2. 사용자 설정에 따라 광고 배너 보이기/숨기기

이제, 사용자 설정에 따라 광고 배너를 보이거나 숨길 수 있도록 Visibility 위젯을 이용할 수 있습니다.

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool showAd = true; // 사용자 설정에 따라 결정됨

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // 다른 콘텐츠들...
          
          Visibility(
            visible: showAd,
            child: AdBanner(), // 사용자 설정에 따라 광고 배너 표시/숨김
          ),
        ],
      ),
    );
  }
}

위의 코드에서, showAd 변수를 사용하여 광고 배너를 보이거나 숨길 수 있습니다.

예를 들어, 사용자 설정 페이지에서 아이템을 토글하여 showAd 값을 변경하도록 설정할 수 있습니다.

3. 마무리

이렇게 플러터에서는 Visibility 위젯을 활용하여 광고 배너를 사용자 설정에 따라 표시하거나 숨길 수 있습니다. 사용자 경험을 고려하여 광고를 효과적으로 관리할 수 있을 것입니다.

광고를 보여주는 데 있어서 사용자의 입장에서도 고민해보고, 최선의 방법을 선택하여 구현해보시기 바랍니다.

참고자료: Flutter Visibility class