[flutter] 플러터에서 지도의 화면 사이즈 조절하기

21 Dec 2023

flutter

플러터를 사용하여 지도를 표시할 때, 지도의 화면 사이즈를 조절하는 방법에 대해 알아보겠습니다.

1. 기본적인 지도 표시

플러터에서 지도를 표시하기 위해서는 google_maps_flutter 패키지를 사용합니다. 아래는 기본적인 지도를 표시하는 예제입니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('지도 화면 사이즈 조절'),
        ),
        body: Center(
          child: GoogleMap(
            initialCameraPosition: CameraPosition(
              target: LatLng(37.7749, -122.4194),
              zoom: 12,
            ),
          ),
        ),
      ),
    );
  }
}

2. 지도 화면 사이즈 조절

이제 지도의 화면 사이즈를 조절해보겠습니다. GoogleMap 위젯을 Container나 SizedBox와 같은 다른 위젯으로 감싸서 해당 위젯의 크기를 조절할 수 있습니다.

body: Center(
  child: Container(
    width: 300,    // 원하는 너비 지정
    height: 300,   // 원하는 높이 지정
    child: GoogleMap(
      initialCameraPosition: CameraPosition(
        target: LatLng(37.7749, -122.4194),
        zoom: 12,
      ),
    ),
  ),
),

지도의 화면 사이즈를 조절할 때, Container 위젯의 width와 height를 조절하여 지도의 크기를 변경할 수 있습니다.

이제 당신은 플러터에서 지도의 화면 사이즈를 조절하는 방법에 대해 알게 되었습니다. 지도를 화면에 표시할 때 위의 방법을 활용하여 원하는 크기로 지도를 표시해보세요!

1. 기본적인 지도 표시

2. 지도 화면 사이즈 조절

참고 자료