[flutter] Card 위젯을 이용한 지도 앱 화면 구성하기

12 Dec 2023

flutter

지도 앱을 개발하고자 할 때, 앱 화면에 지도를 포함하는 방법을 알아야 합니다. Flutter에서는 Google Maps Flutter 플러그인을 사용하여 지도 기능을 구현할 수 있습니다. 이 플러그인은 지도를 렌더링하고 사용자 위치를 추적할 수 있는 기능을 제공합니다.

또한, 지도 앱에는 추가적으로 정보를 표시하기 위한 카드(Card) 위젯을 사용할 수 있습니다. 카드 위젯은 정보를 시각적으로 나타내며, 여러 가지 정보를 효율적으로 표현할 수 있습니다.

1. Google Maps Flutter 플러그인 설치

우선, pubspec.yaml 파일에 Google Maps Flutter 플러그인을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^1.2.0

이후, 해당 패키지를 설치하기 위해 터미널에서 flutter pub get 명령어를 실행합니다.

2. 지도 화면 구현

다음으로, 지도를 포함한 화면을 구현하기 위해 GoogleMap 위젯을 사용합니다.

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

class MapScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('지도')),
      body: GoogleMap(
        initialCameraPosition: CameraPosition(
          target: LatLng(37.5665, 126.9780),
          zoom: 15,
        ),
      ),
    );
  }
}

3. 카드(Cart) 위젯을 이용한 정보 표시

위에서 구현한 지도에 추가로 정보를 표시하기 위해 Card 위젯을 사용합니다.

Card(
  child: Column(
    children: <Widget>[
      ListTile(
        title: Text('서울특별시청'),
        subtitle: Text('건물 정보'),
        leading: Icon(Icons.location_on),
      ),
      ButtonBar(
        children: <Widget>[
          TextButton(
            child: Text('자세히 보기'),
            onPressed: () {
              // 자세한 정보 보기 기능 구현
            },
          ),
          TextButton(
            child: Text('길 찾기'),
            onPressed: () {
              // 길 찾기 기능 구현
            },
          ),
        ],
      ),
    ],
  ),
);

카드 위젯을 사용하여 지도 앱 화면에 다양한 정보를 구성할 수 있습니다.

이렇게 구성된 화면을 빌드하여 실행하면, 지도와 함께 카드에 표시된 정보가 함께 나타날 것입니다.

이를 통해, 사용자들은 지도를 확인하면서 추가 정보나 기능을 손쉽게 이용할 수 있게 될 것입니다.

결론

Flutter에서 Google Maps Flutter 플러그인과 카드 위젯을 조합하여 지도 앱 화면을 구성하는 방법에 대해 알아보았습니다. 이를 응용하여 사용자들에게 더 편리하고 유용한 서비스를 제공할 수 있을 것입니다.

Reference:

Google Maps Flutter 플러그인: https://pub.dev/packages/google_maps_flutter