~255. Displaying the Picked Place on a Dynamic Map

1. 구글맵 스크린을 별도로 만들어보자.

다트 패키지에서 google map flutter를 다운받자.

 

2. detail 화면 아바타 부분(지도화면)을 누르면 구글맵이 뜨고, 현재 지정한 위치로 가게 해보자.

 

- screens/map.dart (new)

import 'package:flutter/material.dart';

import 'package:google_maps_flutter/google_maps_flutter.dart';

import 'package:favorite_places/models/place.dart';

class MapScreen extends StatefulWidget {

  const MapScreen({

    super.key,

    this.location = const PlaceLocation(

      latitude: 37.422,

      longitude: -122.084,

      address: '',

    ),

    this.isSelecting = true,

  });

  final PlaceLocation location;

  final bool isSelecting;

  @override

  State<MapScreen> createState() {

    return _MapScreenState();

  }

}

class _MapScreenState extends State<MapScreen> {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

          title:

              Text(widget.isSelecting ? 'Pick your Location' : 'Your Location'),

          actions: [

            if (widget.isSelecting)

              IconButton(

                icon: const Icon(Icons.save),

                onPressed: () {},

              ),

          ]),

      body: GoogleMap(

        initialCameraPosition: CameraPosition(

          target: LatLng(

            widget.location.latitude,

            widget.location.longitude,

          ),

          zoom: 16,

        ),

        markers: {

          Marker(

            markerId: const MarkerId('m1'),

            position: LatLng(

              widget.location.latitude,

              widget.location.longitude,

            ),

          ),

        },

      ),

    );

  }

}

 

1)

    this.location = const PlaceLocation(

      latitude: 37.422,

      longitude: -122.084,

      address: '',

    ),

    this.isSelecting = true,

--> 로케이션 값은 필수 값이 아니기 때문에 (현재 내 위치를 지정안할 수 있음) 위와 같이 세팅해준다. 디폴트 값은 구글본사 위도 경도값으로 해두었음. 그리고 선택 유무에 따라 appBar 타이틀 값을 바꿔줄것이기 때문에 isSelecting 부분을 넣어준다. (별도 지정 없으면 - 내가 직접 선택할 것이라면 디폴트 값으로 true이고, 기본 값이 있으면 - 이전에 내가 주소를 세팅한게 있다면 별도 false로 지정)

 

2) 빌드 부분에 다운받은 GoogleMap 위젯을 통해 기초값 세팅

 

- place_detail.dart

import 'package:flutter/material.dart';

import 'package:favorite_places/screens/map.dart';

import 'package:favorite_places/models/place.dart';

class PlaceDetailScreen extends StatelessWidget {

  const PlaceDetailScreen({super.key, required this.place});

  final Place place;

  String get locationImage {

    final lat = place.location.latitude;

    final lng = place.location.longitude;

    return 'https://maps.googleapis.com/maps/api/staticmap?center=$lat,$lng=&zoom=16&size=600x300&maptype=roadmap&markers=color:red%7Clabel:A%7C$lat,$lng&key=AIzaSyDLcwxUggpPZo8lcbH0TB4Crq5SJjtj4ag';

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text(place.title),

      ),

      body: Stack(

        children: [

          Image.file(

            place.image,

            fit: BoxFit.cover,

            width: double.infinity,

            height: double.infinity,

          ),

          Positioned(

            bottom: 0,

            left: 0,

            right: 0,

            child: Column(

              children: [

                GestureDetector(

                  onTap: () {

                    Navigator.of(context).push(

                      MaterialPageRoute(

                        builder: (ctx) => MapScreen(

                          location: place.location,

                          isSelecting: false,

                        ),

                      ),

                    );

                  },

                  child: CircleAvatar(

                    radius: 70,

                    backgroundImage: NetworkImage(locationImage),

                  ),

                ),

                Container(

                  alignment: Alignment.center,

                  padding: const EdgeInsets.symmetric(

                    horizontal: 24,

                    vertical: 16,

                  ),

                  decoration: const BoxDecoration(

                    gradient: LinearGradient(

                      colors: [

                        Colors.transparent,

                        Colors.black54,

                      ],

                      begin: Alignment.topCenter,

                      end: Alignment.bottomCenter,

                    ),

                  ),

                  child: Text(

                    place.location.address,

                    textAlign: TextAlign.center,

                    style: Theme.of(context).textTheme.titleLarge!.copyWith(

                          color: Theme.of(context).colorScheme.onBackground,

                        ),

                  ),

                ),

              ],

            ),

          )

        ],

      ),

    );

  }

}

1) 써클아바타 위젯부분에 GestureDetector 위젯으로 감싸주고 map스크린으로 이동하는 부분 추가