플러터는 크로스 플랫폼 앱 개발을 위한 개발 프레임워크로, 다양한 기능을 제공합니다. 이번에는 플러터의 커퍼티노 스테퍼(Stepper)를 이용하여 지도 확대/축소 기능을 구현하는 방법을 알아보겠습니다.
1. 커퍼티노 스테퍼 추가하기
플러터에서는 Cupertino 스타일의 UI를 구성할 수 있는 ‘cupertino_flutter’ 패키지를 제공합니다. 이 패키지를 사용하여 커퍼티노 스테퍼를 추가하겠습니다. 먼저, pubspec.yaml 파일에 패키지를 추가해주세요.
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
cupertino_flutter: any
그리고 패키지를 가져온 다음, CupertinoStepper 위젯을 사용하여 커퍼티노 스테퍼를 추가합니다.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:my_app/map.dart';
class MapScreen extends StatefulWidget {
@override
_MapScreenState createState() => _MapScreenState();
}
class _MapScreenState extends State<MapScreen> {
double _zoomLevel = 10.0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("지도 확대/축소"),
),
body: Column(
children: [
CupertinoStepper(
value: _zoomLevel,
onChanged: (value) {
setState(() {
_zoomLevel = value;
});
},
),
Expanded(
child: MyMap(
zoomLevel: _zoomLevel,
),
),
],
),
);
}
}
위 코드에서는 CupertinoStepper를 컬럼(Column) 위젯 안에 추가하고, _zoomLevel 변수를 사용하여 지도의 확대/축소 레벨을 설정합니다. 스테퍼의 value 속성은 현재 값, onChanged 속성은 값이 변경되었을 때 호출되는 함수를 설정합니다.
2. 지도를 표시하는 위젯 구현하기
지도를 표시하는 위젯은 모든 기기에서 동일한 동작을 보장하기 위해 외부 패키지인 flutter_google_maps를 사용하였습니다. 이 패키지를 사용하려면 pubspec.yaml 파일에 패키지를 추가해야 합니다.
dependencies:
flutter_google_maps: ^1.0.0
그리고 패키지를 가져온 다음, flutter_google_maps의 GoogleMap 위젯을 사용하여 지도를 표시하는 위젯을 만듭니다.
import 'package:flutter/material.dart';
import 'package:flutter_google_maps/flutter_google_maps.dart';
class MyMap extends StatelessWidget {
final double zoomLevel;
MyMap({required this.zoomLevel});
@override
Widget build(BuildContext context) {
return GoogleMap(
initialZoom: zoomLevel,
initialPosition: GeoCoord(37.5, 127),
mapTapListener: (coord) {
// 지도를 터치했을 때 동작할 코드 작성
},
);
}
}
위 코드에서는 GoogleMap 위젯을 커스텀 위젯으로 정의하고, initialZoom과 initialPosition 속성을 사용하여 지도의 초기 확대/축소 레벨과 초기 위치를 설정합니다. 또한, mapTapListener 속성을 사용하여 지도를 터치했을 때 동작할 코드를 작성할 수 있습니다.
3. 실행 및 테스트
이제 앱을 실행해보면, 커퍼티노 스테퍼로 지도를 확대하거나 축소할 수 있는 기능이 동작하는 것을 확인할 수 있습니다. 스테퍼를 조작하여 지도의 확대/축소 레벨을 변경하면, 지도가 자동으로 업데이트됩니다.
결론
플러터의 커퍼티노 스테퍼를 이용하여 지도의 확대/축소 기능을 쉽게 구현할 수 있습니다. 커퍼티노 스테퍼와 flutter_google_maps 패키지를 함께 사용하면 사용자가 편리하게 지도를 조작할 수 있는 앱을 개발할 수 있습니다.