Adicionando o Google Maps a um aplicativo Flutter

Não consigo imaginar como seria a vida sem o Google Maps. Nós o usamos para tudo, desde encontrar direções para um destino, procurar um restaurante ou posto de gasolina próximo, apenas aumentar e diminuir o zoom do mapa para ver o Street View de qualquer local do planeta.

Adicionar o Google Maps ao seu aplicativo móvel pode abrir um mundo totalmente novo para seus usuários-literalmente. Neste tutorial, mostraremos como usar o plug-in oficial para integrar o Google Maps em seu aplicativo Flutter.

Aqui está o que vamos cobrir:

• Criação de um projeto no Google Cloud Platform
• Ativando a API do Google Maps
• Gerando e restringindo chaves de API
• Adicionando o Google Maps ao Flutter (Android)
• Adicionando o Google Maps ao Flutter (iOS)
• Adicionando o widget GoogleMap
• Mapas de estilo no Flutter
• Modificando seus mapas com o widget GoogleMap
• Mostrando uma lista de mapas
• Tirando um instantâneo

Criação de um projeto no Google Cloud Platform

A primeira etapa é criar um projeto no Google Developers Console . Isso é necessário porque você precisará de APIs para integrar o Google Maps em seu aplicativo.

Vá para o Google Developers Console e clique no projeto já selecionado.

Clique em NOVO PROJETO e insira os detalhes.

Clique no nome do projeto atual novamente e você verá o novo projeto criado na lista.

Habilitando a API Maps

Depois que o projeto for criado, você terá que habilitar o Maps API SDK para Android e iOS.

1. Clique no menu Biblioteca à esquerda
2. Pesquise “Maps SDK”
3. Clique em SDK do Maps para Android e, em seguida, clique em Ativar
   

Gerar e restringir chaves de API

A próxima etapa é gerar as chaves de API.

1. Clique no menu Credenciais à esquerda
2. Clique no botão + CRIAR CREDENCIAIS
3. Selecione a opção chave API
   

Se você tem como alvo as duas plataformas, deve obter duas chaves de API para rastreá-las melhor.

Depois de criar as chaves de API, recomendo enfaticamente a implementação de algumas restrições. Por exemplo, se você deseja usar as chaves de API apenas para um mapa, deve permitir que sejam usadas apenas pelo serviço do Maps.

Existem dois tipos de restrições:

1. Restrições de aplicativos permitem que você defina qual tipo de aplicativo deve ter acesso a esta chave (ou seja, Android ou iOS). Você pode selecionar a opção apropriada para garantir que a chave que você criou funcione apenas para aquela plataforma específica
2. As restrições de API permitem que você selecione quais serviços podem ser acessados ​​usando esta chave. Se fosse apenas pelo mapa, você selecionaria API do Google Maps na lista

Adicionando o Google Maps ao aplicativo Flutter (Android)

Para poder usar o Google Maps dentro do aplicativo por meio da chave de API que você criou na seção anterior, você terá que copiar e colar de acordo com as instruções abaixo.

Primeiro, abra seu projeto Flutter e navegue até o arquivo neste local: android/app/src/main/AndroidManifest.xml .

A seguir, cole o código abaixo:

Substitua o valor "YOUR KEY HERE" por uma chave API que você criou. Em seguida, adicione a permissão de localização.

Agora, o arquivo AndroidManifest.xml deve ser assim:

       ...  

Adicionando o Google Maps ao Flutter (iOS)

As etapas para executar o Google Maps em um aplicativo Flutter para dispositivos iOS são semelhantes ao procedimento para Android.

Primeiro, especifique sua chave de API no delegado do aplicativo ios/Runner/AppDelegate.swift
Em seguida, escreva a instrução import GoogleMaps na parte superior para evitar problemas de compilação do iOS.

O arquivo deve ser semelhante a este:

 import UIKit
importar Flutter
importar mapas do Google
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
substituir a aplicação func (
_ aplicativo: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
)-> Bool {
GeneratedPluginRegistrant.register (com: self)
GMSServices.provideAPIKey ("YOUR-KEY")
return super.application (application, didFinishLaunchingWithOptions: launchOptions)
}
}

A seguir, abra o Xcode e adicione a permissão de localização no arquivo info.plist :

  NSLocationWhenInUseUsageDescription 
 O aplicativo precisa de permissão de localização 

Adicionando o widget GoogleMap

Depois de concluir as etapas descritas abaixo, você poderá ver o Google Maps na tela de seu aplicativo Flutter.

Primeiro, adicione o plug-in google_maps_flutter ao pubspec.yaml arquivo.

dependências

: vibração: sdk: flutter cupertino_icons: 1.0.0 google_maps_flutter: ^ 2.0.1

Em seguida, coloque o widget GoogleMap em seu arquivo Dart.

 GoogleMap ( initialCameraPosition: _kInitialPosition, ),

O

GoogleMap recebe um _kInitialPosition , que contém o local padrão para mostrar no mapa quando ele é carregado.

 LatLng final estático _kMapCenter= LatLng (19.018255973653343, 72.84793849278007); static final CameraPosition _kInitialPosition= CameraPosition (alvo: _kMapCenter, zoom: 11,0, inclinação: 0, rumo: 0);

Aqui está o código mínimo para mostrar o mapa:

 import'package: flutter/material.dart';
import'package: google_maps_flutter/google_maps_flutter.dart'; class SimpleMap extends StatefulWidget { @sobrepor _SimpleMapState createState ()=& gt; _SimpleMapState ();
} classe _SimpleMapState estende State & lt; SimpleMap & gt; { LatLng final estático _kMapCenter= LatLng (19.018255973653343, 72.84793849278007); static final CameraPosition _kInitialPosition= CameraPosition (alvo: _kMapCenter, zoom: 11,0, inclinação: 0, rumo: 0); @sobrepor Construção de widget (contexto BuildContext) { return Scaffold ( appBar: AppBar ( título: Texto ('Demonstração do Google Maps'), ), corpo: GoogleMap ( initialCameraPosition: _kInitialPosition, ), ); }
}

Mapas de estilo no Flutter

Se você está trabalhando em um produto especialmente estiloso e deseja que seu mapa reflita a aparência de sua marca, pode personalizá-lo.

Para este exemplo, tentaremos criar um estilo de mapa semelhante ao do Uber seguindo estas etapas:

1. Vá para este site
2. Selecione o tema prata
3. Clique em Ajustar ponto de referência e rótulos
4. Restaure as cores Park
5. Clique em Concluir
6. Clique no botão COPIAR JSON
   

:
-map_style.json

 import'package: flutter/material.dart';
import'package: google_maps_flutter/google_maps_flutter.dart'; class SimpleMap extends StatefulWidget { @sobrepor _SimpleMapState createState ()=& gt; _SimpleMapState ();
} classe _SimpleMapState estende State & lt; SimpleMap & gt; { LatLng final estático _kMapCenter= LatLng (19.018255973653343, 72.84793849278007); static final CameraPosition _kInitialPosition= CameraPosition (alvo: _kMapCenter, zoom: 11,0, inclinação: 0, rumo: 0); GoogleMapController _controller; Futuro & lt; void & gt; onMapCreated (controlador GoogleMapController) async { _controller=controlador; Valor da string=espera DefaultAssetBundle.of (contexto) .loadString ('assets/map_style.json'); _controller.setMapStyle (valor); } @sobrepor Construção de widget (contexto BuildContext) { return Scaffold ( appBar: AppBar ( título: Texto ('Demonstração do Google Maps'), ), corpo: GoogleMap ( initialCameraPosition: _kInitialPosition, onMapCreated: onMapCreated, ), ); }
}

 GoogleMap ( initialCameraPosition: _kInitialPosition, onMapCreated: onMapCreated, mapType: MapType.satellite,
);

 GoogleMap ( initialCameraPosition: _kInitialPosition, onMapCreated: onMapCreated, myLocationEnabled: true,
);

 Definir  _createMarker () { Retorna { Marcador( marcadorId: MarkerId ("marcador_1"), posição: _kMapCenter, infoWindow: InfoWindow (título:'Marcador 1'), rotação: 90), Marcador( marcadorId: MarkerId ("marcador_2"), posição: LatLng (18,997962200185533, 72,8379758747611), ), };
}

 GoogleMap ( initialCameraPosition: _kInitialPosition, onMapCreated: onMapCreated, marcadores: _createMarker (),
);

 GoogleMap ( initialCameraPosition: _kInitialPosition, onMapCreated: onMapCreated, trafficEnabled: true,
);

 GridView.count ( crossAxisCount: 2, crossAxisSpacing: 8, mainAxisSpacing: 8, //Gere 100 widgets que exibem seu índice na Lista. filhos: List.generate (10, (índice) { Centro de retorno ( filho: GoogleMap ( initialCameraPosition: _kInitialPosition, marcadores: _createMarker (), liteModeEnabled: true, ), ); }),
)

 Definir  _createMarker () { Retorna { Marcador( marcadorId: MarkerId ("marcador_1"), posição: _kMapCenter), Marcador( marcadorId: MarkerId ("marcador_2"), posição: LatLng (18,997962200185533, 72,8379758747611), ), };
} 

FloatingActionButton( onPressed: () async { final imageBytes=await _controller.takeSnapshot(); setState(() { _imageBytes=imageBytes; }); }, child: Icon(Icons.fullscreen),
)

Container( decoration: BoxDecoration(color: Colors.blueGrey[50]), height: 150, width: 120, child: _imageBytes !=null ? Image.memory(_imageBytes): null,
)