[flutter] cupertino_icons를 사용하여 아이콘의 위치를 지도에 맞게 설정하기

30 Nov 2023

flutter

Flutter에서는 cupertino_icons 패키지를 사용하여 iOS 스타일의 아이콘을 추가할 수 있습니다. 이 아이콘들은 iOS의 디자인 가이드라인에 맞추어 제작되어 다양한 앱에서 사용할 수 있습니다.

이번에는 cupertino_icons를 사용하여 지도에 위치 아이콘을 추가하고, 해당 아이콘의 위치를 실제 지도 좌표와 맞게 설정하는 방법을 알아보겠습니다.

1. `cupertino_icons` 패키지 추가하기

먼저, pubspec.yaml 파일에 cupertino_icons 패키지를 추가해야 합니다. 아래와 같이 dependencies 섹션에 cupertino_icons: ^1.0.3을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.3

변경 사항을 적용하기 위해 터미널에서 flutter pub get 명령을 실행합니다.

2. 위치 아이콘 추가하기

cupertino_icons 패키지를 추가했으므로 이제 아이콘을 사용할 수 있습니다. 지도에 위치 아이콘을 추가하기 위해 Icon 위젯을 사용합니다. 예를 들면, Icons.location 아이콘을 사용하여 위치 아이콘을 만들 수 있습니다.

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

class MapScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('지도'),
      ),
      body: Column(
        children: [
          Container(
            height: 200,
            child: Center(
              child: Icon(
                CupertinoIcons.location,
                size: 100,
              ),
            ),
          ),
          // 지도 관련 위젯들을 추가하는 부분...
        ],
      ),
    );
  }
}

위 예제에서는 Icon 위젯으로 위치 아이콘을 생성하고, CupertinoIcons.location을 사용하여 iOS 스타일의 위치 아이콘을 지정했습니다. 아이콘의 크기는 size 속성으로 조정할 수 있습니다.

3. 위치 아이콘의 좌표 설정하기

위치 아이콘을 지도에 맞게 위치시키기 위해서는 해당 좌표를 알아야 합니다. 일반적으로 위치 정보는 위도(latitude)와 경도(longitude)로 표현됩니다. 이 예제에서는 LatLng 클래스를 사용하여 위치 좌표를 표현합니다.

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

class MapScreen extends StatelessWidget {
  final LatLng location = LatLng(37.5665, 126.9780);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('지도'),
      ),
      body: Column(
        children: [
          Container(
            height: 200,
            child: Center(
              child: Icon(
                CupertinoIcons.location,
                size: 100,
              ),
            ),
          ),
          // Google Maps 위젯 등을 추가하여 지도를 구현하는 부분...
        ],
      ),
    );
  }
}

위 예제에서는 LatLng 클래스로 서울의 위도와 경도를 설정하였습니다. 이제 해당 위치 아이콘을 지도 위에 배치하기 위해 Google Maps와 관련된 위젯을 추가해야 합니다.

위젯을 추가하는 방법은 google_maps_flutter 패키지를 사용하거나, 직접 지도 라이브러리를 구현하는 방법 등 여러 가지가 있습니다.

위에서 설명한 방법을 통해 cupertino_icons를 사용하여 아이콘의 위치를 지도에 맞게 설정할 수 있습니다. 앱의 디자인에 맞게 추가적인 설정이 필요할 수 있으니, 필요에 따라 적절히 수정하여 사용하시기 바랍니다.

1. cupertino_icons 패키지 추가하기

2. 위치 아이콘 추가하기

3. 위치 아이콘의 좌표 설정하기

1. `cupertino_icons` 패키지 추가하기