Colin's Blog
[flutter] 플러터에서 지도에 맞춰 특정 위치로 화면 이동하기

플러터(Flutter) 어플리케이션을 개발할 때 지도 화면을 특정 위치로 이동하는 기능을 구현해야 할 때가 있습니다. 이를 위해 지도 패키지와 지도 컨트롤러를 사용하여 원하는 위치로 화면을 이동할 수 있습니다.

필수 패키지 설치

먼저, 플러터 프로젝트에 google_maps_flutter 패키지를 설치해야 합니다. 이 패키지를 통해 지도 기능을 플러터 어플리케이션에 추가할 수 있습니다.

flutter pub add google_maps_flutter

지도 화면에 이동 기능 구현하기

다음으로, 특정 위치로 이동하는 기능을 구현해보겠습니다. 아래 예제 코드는 GoogleMapController를 사용하여 특정 위도와 경도로 지도 화면을 이동하는 방법을 보여줍니다.

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

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  GoogleMapController _controller;

  static const _initialCameraPosition = CameraPosition(
    target: LatLng(37.7749, -122.4194),
    zoom: 10,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        initialCameraPosition: _initialCameraPosition,
        onMapCreated: (controller) {
          _controller = controller;
          _moveToLocation();
        },
      ),
    );
  }

  void _moveToLocation() {
    _controller.animateCamera(CameraUpdate.newCameraPosition(
      CameraPosition(
        target: LatLng(37.7749, -122.4194),
        zoom: 15,
      ),
    ));
  }
}

위 코드에서 _moveToLocation 메서드는 GoogleMapController의 animateCamera 메서드를 사용하여 특정 위치로 지도 화면을 이동합니다. 여기서 LatLng 클래스를 사용하여 이동할 좌표를 지정할 수 있습니다.

이제 MapScreen 위젯을 호출하는 곳에서 MapScreen을 사용하면 해당 위치로 지도 화면을 이동하는 것을 확인할 수 있습니다.

이렇게 지도에 특정 위치로 화면을 이동하는 방법을 알아보았습니다.

참고 문헌:

© 2018 Colin. All rights reserved.