[flutter] 플러터에서 지도 화면 캡처하기

21 Dec 2023

flutter

플러터 앱에서 지도 화면을 캡처하고 이미지 파일로 저장하는 방법을 소개합니다.

1. flutter_google_maps 패키지 설치

지도를 표시하기 위해 flutter_google_maps 패키지를 설치합니다.

dependencies:
  flutter_google_maps: ^3.0.0

2. 지도 화면 캡처 기능 추가

아래 코드는 GoogleMap 위젯을 사용하여 지도를 표시하고, 화면을 캡처한 후 이미지 파일로 저장하는 예제입니다.

import 'package:flutter/material.dart';
import 'package:flutter_google_maps/flutter_google_maps.dart';
import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'package:screenshot/screenshot.dart';

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

class _MapScreenState extends State<MapScreen> {
  ScreenshotController screenshotController = ScreenshotController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('지도 화면'),
      ),
      body: Screenshot(
        controller: screenshotController,
        child: GoogleMap(
          onMapCreated: (controller) {
            // 지도가 생성될 때의 동작 추가
          },
          initialZoom: 15,
          initialPosition: GeoCoord(37.7749, -122.4194),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          // 화면 캡처 및 이미지 파일 저장
          screenshotController.capture().then((File image) async {
            await ImageGallerySaver.saveImage(image.readAsBytesSync());
          });
        },
        child: Icon(Icons.camera_alt),
      ),
    );
  }
}

위 코드는 Screenshot 패키지와 image_gallery_saver 패키지를 사용하여 지도 화면을 캡처하고 이미지 파일로 저장하는 과정을 보여줍니다.

참고 자료

이를 통해 플러터 앱에서 지도 화면을 캡처하는 방법을 알아보았습니다.