[Flutter] flutter 3.7 google map 버그 (frame이 남아있는 문제) - 2 (해결)

안녕하세요.

 

Flutter Bug에 대한 해결책을 정리해볼까 합니다.

https://spikez.tistory.com/456

[Flutter] flutter 3.7 google map 버그 (frame이 남아있는 문제)

 

 

일단 문제는 위 링크에 있는 내용인데요.

 

화면전환시에 한프래임이 남아서 화면전환을 어색하게 만듭니다.

google map을 dispose 시키기 위해서 여러가지 방법을 사용해봤는데, 방법을 찾지 못하다가, 문제 올린 링크의 내용중에 개발자 한분(AdrienGannerie)이 임시 해결책을 제시해주셨습니다.

 

그래서 그 코드로 테스트 해보고 문제가 사라진것을 확인했네요 ^^

 

코드는 다음과 같습니다.

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

class NewMap extends StatefulWidget {
  const NewMap({super.key});

  @override
  State<NewMap> createState() => _NewMapState();
}

class _NewMapState extends State<NewMap> {


  late Widget googleMap;
  bool showMap = true;

  late GoogleMapController mapController;

  @override
  void initState() {
    super.initState();
  }


  @override
  void dispose(){
    print("_NewMapState:dispose()");

    mapController.dispose();  // Map 을 Dispose 시키는 부분
    super.dispose();
  }



  @override
  Widget build(BuildContext context) {

    googleMap = GoogleMap(
      mapType: MapType.normal,
      mapToolbarEnabled: false,
      zoomControlsEnabled: false,
      myLocationEnabled: true,
      trafficEnabled: false,
      onMapCreated:  (GoogleMapController controller){
        mapController = controller;
      }, initialCameraPosition: const CameraPosition(target: LatLng(0,0)),

    );
    return PopScope(
        onPopInvoked: (bool didPop) {   //<-- 이부분이 핵심인데, pop 될때 showMap을 false로 변경하고,
            setState(() {  // 상태가 변경되어 google map이 사라지고 빈 container만 남기는것입니다.
            showMap = false; 
          });
        },
        child:showMap?googleMap:Container()
    );   
//Old version : WillPopScope 이 deprecated 되었습니다. ㅠ_ㅠ
//    return WillPopScope(
//        onWillPop: () {   //<-- 이부분이 핵심인데, pop 될때 showMap을 false로 변경하고,
//            setState(() {  // 상태가 변경되어 google map이 사라지고 빈 container만 남기는것입니다.
//            showMap = false; 
//          });
//          return Future.value(true);
//        },
//        child:showMap?googleMap:Container()
//    );
  }
}

 

 

 

위의 WillPopScope 부분이 핵심이 되는데요.

WillPopScope을 걸어서 back navigation 될때 map widget을 build 에서 제거 하는 형태로 문제를 해결한 것입니다.

=> WillPopScope 이 deprecated 됬고 PopScope 을 사용해야 해서 위에 코드에도 반영했습니다.

 

물론 위 코드를 보셔서 알겠지만, 만약 GoogleMap widget이 정상적으로 동작했다면 필요없는 코드입니다.

하지만 당장 앱의 퀄리티를 위해서 ㅠ_ㅠ 개발자가 회피코드(Workaround)를 작성할 수 밖에 없겠네요....

 

저는 이렇게 해서 flutter 3.2를 3.7로 업그레이드 할 수 있게 되었습니다. 

 

 

!!! 해피코딩!!