Arraste e solte o seletor de local do Google Map no Flutter

O Google Maps é uma plataforma de mapeamento da web e um aplicativo para consumidores oferecido pelo Google. É uma ferramenta poderosa que oferece uma ampla gama de funcionalidades para ajudá-lo a navegar pelo mundo ao seu redor.

Neste tutorial, aprenderemos como criar um seletor de local com marcador de arrastar e soltar do Google Maps no aplicativo Flutter. Implementamos o marcador personalizado onde você pode soltar o mapa do Google e buscar a longitude e latitude quando para, e buscar os detalhes do local a partir da latitude e longitude.

Antes de iniciar este tutorial, você deve integrar corretamente o Google Maps em seu projeto:

Agora, adicione esses pacotes ao seu projeto adicionando as seguintes linhas no arquivo pubspec.yaml:

1. geocoding
2. google_maps_flutter

dependencies:
  flutter:
    sdk: flutter
  geocoding: ^2.0.1
  google_maps_flutter: ^2.1.1

Agora, indexe a pasta de ativos onde você colocou a imagem do seletor de coordenadas como abaixo no arquivo pubspce.yaml:

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
     - assets/images/

Ative estas APIs no Google Map Console:

Agora, veja o exemplo abaixo, onde implementamos o auxiliar de marcador personalizado para escolher longitude e latitude no mapa do Google e buscar as informações do local na API do Google Map quando a coordenada é escolhida.

Exemplo de código:

import 'package:flutter/material.dart';
import 'package:geocoding/geocoding.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: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
   String googleApikey = "GOOGLE_MAP_API_KEY";
  GoogleMapController? mapController; //contrller for Google map
  CameraPosition? cameraPosition;
  LatLng startLocation = LatLng(27.6602292, 85.308027); 
  String location = "Location Name:"; 

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Longitude Latitude Picker in Google Map"),
             backgroundColor: Colors.deepPurpleAccent,
          ),
          body: Stack(
            children:[

              GoogleMap( //Map widget from google_maps_flutter package
                  zoomGesturesEnabled: true, //enable Zoom in, out on map
                  initialCameraPosition: CameraPosition( //innital position in map
                    target: startLocation, //initial position
                    zoom: 14.0, //initial zoom level
                  ),
                  mapType: MapType.normal, //map type
                  onMapCreated: (controller) { //method called when map is created
                    setState(() {
                      mapController = controller; 
                    });
                  },
                  onCameraMove: (CameraPosition cameraPositiona) {
                      cameraPosition = cameraPositiona; //when map is dragging 
                  },
                  onCameraIdle: () async { //when map drag stops
                     List<Placemark> placemarks = await placemarkFromCoordinates(cameraPosition!.target.latitude, cameraPosition!.target.longitude);
                     setState(() { //get place name from lat and lang
                        location = placemarks.first.administrativeArea.toString() + ", " +  placemarks.first.street.toString();
                     });
                  },
             ),

             Center( //picker image on google map
                child: Image.asset("assets/images/picker.png", width: 80,),
             ),

            
             Positioned(  //widget to display location name
               bottom:100,
               child: Padding(
                   padding: EdgeInsets.all(15),
                    child: Card(
                       child: Container(
                         padding: EdgeInsets.all(0),
                         width: MediaQuery.of(context).size.width - 40,
                         child: ListTile(
                            leading: Image.asset("assets/images/picker.png", width: 25,),
                            title:Text(location, style: TextStyle(fontSize: 18),),
                            dense: true,
                         )
                       ),
                    ),
                 )
               )
            ]
          )
       );
  }
}

Dessa forma, você pode criar um marcador seletor de longitude e latitude e escolher locais arrastando e soltando o mapa do Google no aplicativo Flutter.