250109 TIL

① 배운 것

플러터 google_mobile_ads 라이브러리 사용 시 안드로이드 노치가 있는 디바이스에서 광고가 노치 아래부터 나오는 버그 해결

• 플러터 google_mobile_ads 라이브러리 사용 시 안드로이드 노치가 있는 디바이스에서 광고가 노치 아래부터 나와서 statusbar 높이 만큼 뒷 화면이 보이는 이슈가 발생
• 사실 이건 이전에도 발생한 이슈라서 이렇게 해결 하였으나 이번에 다른 스크린에서 광고를 띄웠더니 해결이 안되고 또 statusbar 높이 만큼 뒷 화면이 보였다.
  차이라고는, 이전화면들은 bottom nav가 안보이는 화면에서 광고를 띄웠고, 이번에는 bottom nav가 보이는 화면에서 광고를 띄운것 밖에 없는데 이게 원인이 맞는지는 잘 모르겠다.
• 이미 깃 이슈에 올라와서 많은 논의가 된 문제여서 이슈에 나와있는 방법들을 모두 적용해보았으나, 원하는대로 해결이 되지 않았다.
• 그래서 광고를 원래 광고버튼이 있는 화면에서 바로 띄우는게 아니라, 광고 버튼을 누르면 흰 empty ui를 가진 스크린으로 이동하고 그 라우터에서 광고를 띄우게 했다. 해당 스크린에는 중앙에 circularProgressBar를 띄워서 뭔가 광고가 로드되고 있는 것 처럼 보이게 함.
  약간 야매스러운 방법이지만 문제를 해결하였으니 나쁘지 않은 방법이라고 생각함 😀

//광고 보여주는 함수 
 void showAd({
    required VoidCallback onAdShowFailedCallback,
  }) {
    router.push(
      '/ad_empty_full_screen', //< circularProgressBar만 있는 empty white 화면
      extra: {
        flagOnAdShowFailedCallback: onAdShowFailedCallback,
        flagOnUserEarnedRewardCallback: (rewardItem) {
          onUserEarnedRewardCallback(rewardItem);
        },
      },
    );
  }

class EmptyScreen extends StatefulWidget {
  const EmptyScreen({
    super.key,
    required this.onAdShowFailedCallback,
    required this.onUserEarnedRewardCallback,
  });

  final VoidCallback onAdShowFailedCallback;
  final ValueChanged<RewardItem> onUserEarnedRewardCallback;

  @override
  State<EmptyScreen> createState() => _EmptyScreenState();
}

class _EmptyScreenState extends State<EmptyScreen> {
  @override
  void initState() {
    super.initState();
    Future.delayed(
      const Duration(milliseconds: 0),
      () {
        if (widget.rewardedAd != null) {
          widget.rewardedAd!.show(
            onUserEarnedReward: (ad, reward) {
            //보상 획득 후 로직은 콜백함수 파라미타로 받아서 처리 
              widget.onUserEarnedRewardCallback.call(reward);
            },
          );
        } else {
          router.pop(); //<광고 보여주기 실패 시 해당 스크린을 빠져나와야함 
          widget.onAdShowFailedCallback();
        }
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: PrimaryColorCircularProgressIndicator(),
      ),
    );
  }
}

//광고 시청 완료 후 빈 화면 빠져나가고 광고보상페이지로 이동 
  onAdDismissedFullScreenContentCallback: () {
  //혹시 모를 상황을 대비해 현재 페이지를 체크한 후 pop 시킴 
 if(router.getCurrentLocation == '/ad_empty_full_screen'){
          router.pop();
        }
      },

안드로이드, IOS 여러 디바이스에서 확인해봤는데 이상 없이 잘 작동했음!

② 회고 (restropective)

③ 개선을 위한 방법