[flutter] 플러터에서 지도의 스타일(style) 변경하기

21 Dec 2023

flutter

플러터(Flutter)를 사용하여 지도를 표시할 때, 기본적으로는 구글 지도의 스타일이 적용됩니다. 그러나 때때로 사용자 정의 스타일링이 필요할 수 있습니다. 이번 포스트에서는 플러터를 사용하여 지도의 스타일을 변경하는 방법에 대해 알아보겠습니다.

1. 구글맵 플러터 패키지 추가하기

먼저, google_maps_flutter 패키지를 플러터 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가합니다.

dependencies:
  google_maps_flutter: ^2.0.6

2. 지도 위젯에 스타일 적용하기

다음으로, GoogleMap 위젯을 사용하여 지도를 표시하고 스타일을 적용합니다. 아래는 간단한 예시 코드입니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('지도 스타일 변경'),
        ),
        body: GoogleMap(
          initialCameraPosition: CameraPosition(
            target: LatLng(37.5642135, 127.0016985),
            zoom: 15,
          ),
          mapType: MapType.normal,
          myLocationEnabled: true,
          myLocationButtonEnabled: true,
          markers: {
            Marker(
              markerId: MarkerId('marker_1'),
              position: LatLng(37.5642135, 127.0016985),
              infoWindow: InfoWindow(
                title: '서울특별시청',
              ),
            ),
          },
        ),
      ),
    );
  }
}

위 코드에서 GoogleMap 위젯의 mapType 속성을 통해 지도의 스타일을 변경할 수 있습니다. MapType 열거형에는 normal, satellite, hybrid, terrain 등 여러 가지 스타일이 포함되어 있습니다.

3. 사용자 지정 스타일 적용하기

플러터에서는 사용자가 직접 스타일을 정의하고 적용할 수도 있습니다. 이를 위해서는 JSON 형식의 스타일 파일을 작성하고 이를 GoogleMap 위젯의 mapStyle 속성에 적용하면 됩니다.

아래는 간단한 스타일 적용 예시 코드입니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String customMapStyle = '''
[
  {
    "featureType": "administrative",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#444444"
      }
    ]
  },
  {
    "featureType": "landscape",
    "elementType": "all",
    "stylers": [
      {
        "color": "#f2f2f2"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  }
]
''';

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('지도 스타일 변경'),
        ),
        body: GoogleMap(
          initialCameraPosition: CameraPosition(
            target: LatLng(37.5642135, 127.0016985),
            zoom: 15,
          ),
          mapType: MapType.normal,
          myLocationEnabled: true,
          myLocationButtonEnabled: true,
          markers: {
            Marker(
              markerId: MarkerId('marker_1'),
              position: LatLng(37.5642135, 127.0016985),
              infoWindow: InfoWindow(
                title: '서울특별시청',
              ),
            ),
          },
          mapStyle: customMapStyle,
        ),
      ),
    );
  }
}

위 코드에서 customMapStyle 변수에 사용자 지정 스타일을 JSON 형식으로 정의하고, 이를 GoogleMap 위젯의 mapStyle 속성에 적용하였습니다.

플러터에서는 위와 같은 방법을 통해 지도의 스타일을 자유롭게 변경할 수 있습니다. 많은 사용자들이 원하는 디자인에 따라 조정된 지도는 사용자 경험을 향상시키는데 도움이 될 것입니다.

위 내용은 플러터에서 구글맵을 활용하고자 하는 개발자 분들에게 도움이 되었으면 합니다. 감사합니다.

참고 자료

Google Maps Flutter package