flutter flutter_map_cancellable_tile_provider 사용법

flutterMap 을 web 에서 사용하는데 디버그 콘솔에 이런 문구가 뜬다

flutter_map_cancellable_tile_provider 를 사용하면 성능이 향상된다고하는 내용이다.

https://pub.dev/packages/flutter_map_cancellable_tile_provider

Readme 를 읽어보니까

불필요한 HTTP 타일 요청을 취소한다고함

1. 웹에서 타일 로딩 시간을 단축시켜줌
2. 사용자 데이터 및 캐시 공간 소비량 감소
3. 타일 요청 감소
4. CPU 및 IO 작업 감소로 성능 향상

적용방법

FlutterMap(
              options: MapOptions(
                initialCenter: LatLng(37.7436, 127.0332),
                initialZoom: 15,
                minZoom: 6,
              ),
              children: [
                TileLayer(
                  urlTemplate: dotenv.get('FLUTTERMAP'),
                  tileProvider: CancellableNetworkTileProvider(),
                )
              ],
            ),

TileLayer 위젯의 속성중에 tileProvider 부분에다가 CancellableNetworkTileProvider 를 작성하면됨

이렇게만해도 기존에 디버그가 뜨지 않는걸 알 수 있음

그리고 CancellableNetworkTileProvider 에는 slienceExceptions , dioClient , headers 가 있음

1) slienceExceptions : 가져오는 타일에서 발생하는 예외 및 오류를 무시할지 여부를 결정하는 부분
true 로 설정하면 오류 발생했을때 투명한 타일을 반환하고 앱을 계속 실행된다.
이는 오류에대한 안정성을 높이는데 도움은 주지만 오류가 발생했을때 눈치채기 어려움

2) dioClient : Dio 라이브러리의 인스턴스로 HTTP 요청을 보내고 관리하는데 사용됨
Dio 는 요청 취소 , 요청 타입아웃 설정 , 인터셉터 추가 등 기본 http 보다 더 많은 기능을 제공함
무튼 dioClient 를 사용하면 타일 이미지를 가져오는 HTTP 요청을 보내고 , 필요한 경우 요청 취소 가능

// Dio 인스턴스 생성
final Dio dioClient = Dio(); // Dio 인스턴스 생성

// 요청 보내기
tileGet(tileUrl) async {
	try {
    	var res = await dioClient.get(tileUrl);
    	return res;
    }catch (e) {
    	// 요청 중 에러나면 오류 처리
        throw Execption('타일 로드 실패 : $e');
    }
}


CancelToken cancelToken = CancelToken(); // 취소 토큰 생성

// 요청 취소
void cancelTileRequest() {
  cancelToken.cancel("Cancelled by user");
}

// 요청 취소하기
tileCancel() async {
	try {
    	var res = dioClient.get(tileUrl, cancelToken : cancelToken);
        return res;
    }catch {
    	throw Execption('타일 로드 취소 : $e');
    }
}

3) headers : HTTP 요청을 보낼 때 사용되는 헤더를 지정함
이는 API키를 포함하거나 요청의 출처를 식별하는 데 사용될 수 있습니다.
타일 서버가 특정 헤더를 요구하는 경우 , 이 속성을 통해 해당 헤더를 요청에 포함시킬 수 있음

끝