flutter

[めちゃ簡単!] flutterでgooglemapを表示する

2020/04/28

Introduce

どもですー.今回はflutterでGoogleMapsを表示させます!

Environment

Requirement

GoogleMapsを表示させるパッケージがあるのでありがたく使いましょう.

google_maps_flutter | Flutter Package
A Flutter plugin for integrating Google Maps in iOS and Android applications.

flutterでは状態管理にproviderパッケージを使ったほうがいいみたいなのでproviderも追加します.理由は詳しくないです...

Provider のススメ | Unselfish Meme

pubspec.ymlに以下を追加します.

Getting Start

Get API Key for google map

GoogleMapsのAPIキーを取得します.

Geo-location APIs  |  Google Maps Platform  |  Google Cloud
Choose Google Maps Platform to create immersive location experiences and make better business decisions with accurate real time data & dynamic imagery.

にアクセスして,使ってみる -> Mapsを選んでContinue -> プロジェクト名を入れて次へ -> APIキーが表示されるのでコピーしておく.

Setting for iOS

ios/Runner/AppDelegate.swiftに下記の内容を追加します.

ios/Runner/info.plistに下記を追加します.
io.flutter.embedded_views_preview Yes のみあれば地図は表示されます.その下の3つの内容は現在地を取得する場合に必要となります.次の記事で現在地を表示させるので追加しておきます.

Setting for android

android/app/src/main/AndroidManifest.xmlファイルに一行追加するだけでOKです.

Code

main.dart

main.dartはscreen.dartを表示させる処理だけです.

bloc.dart

screen.dartがビルドされるときにonMapCreatedを呼びますが,この関数をbloc.dartファイルで定義します.

screen.dart

statefulWidgetをあまり使わないようにしているので,statelessWidgetを使います.
bloc.dartのonMapCreatedを使います.

これで渋谷駅が表示されたはずです!
providerに関しては勉強中なので,またまとまったら記事にします.

-flutter
-,

Translate »