Hi Friends,
Hope you are all well. In this post let’s talk about bringing maps into your flutter apps.
Though there are many providers who provide readymade service endpoints that we can simply call and use in our app to bring in a map. The commonly used ones are google maps and leaflet (Open source, doesn’t require a key).
To learn the basics of flutter get my course – Click here.
Other flutter courses – here. (Affliate link)
A screencast of this post:
Let’s begin.
First create a blank flutter app.
Now add the flutter_map plugin which will help us bring a map into our mobile app. Open pubspec.yaml and add it to the dependencies as shown below.
|
1 2 3 4 |
dependencies: flutter: sdk: flutter flutter_map: |
Alright., Now open main.dart file and add the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
import 'package:flutter/material.dart'; import 'package:flutter_map/flutter_map.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( home: new MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar(title: new Text('Leaflet Maps')), body: new FlutterMap( options: new MapOptions( minZoom: 10.0 ), layers: [ new TileLayerOptions( urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", subdomains: ['a', 'b', 'c']), ) ])); } } |
Now leaflet is open-sourced so, I have just used one of the free map templates in the urlTemplate. To make your own maps kindly visit a provider like mapbox which is a service that enables you to make your own map tiles and import them into your apps.
Cool. Now run the app. You will see the below screen
Of course, the map on your screen might look a little bit different, but in essence a map get’s loaded. Now let’s see how to navigate to a particular place on our map when we load it.
Open main.dart file and modify the options as shown below.
|
1 2 3 4 |
options: new MapOptions( center: new LatLng(40.71, -74.00), minZoom: 10.0 ), |
Run the app again.. (I mean run it again, not just wait for the hot reload)
You will see New york when it loads up now.
Cool right ?
Markers:
Now, let’s talk about placing markers on the map.
Open up main.dart file and modify it as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
import 'package:flutter/material.dart'; import 'package:flutter_map/flutter_map.dart'; import 'package:latlong/latlong.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( home: new MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar(title: new Text('Leaflet Maps')), body: new FlutterMap( options: new MapOptions( center: new LatLng(40.71, -74.00), minZoom: 10.0), layers: [ new TileLayerOptions( urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", subdomains: ['a', 'b', 'c']), new MarkerLayerOptions(markers: [ new Marker( width: 45.0, height: 45.0, point: new LatLng(40.73, -74.00), builder: (context) => new Container( child: IconButton( icon: Icon(Icons.location_on), color: Colors.red, iconSize: 45.0, onPressed: () { print('Marker tapped'); }, ), )) ]) ])); } } |
I have now added a marker which is nothing but an icon button. I have placed the marker at a point using the point: attribute (Note that you could simply place your marker anywhere just by providing the lat lng coordinates of that specific location.
Now run the app. You will see the below screen.
Similarly you could add any number of markers you want on the map.
(For some cool markers consider bringing in font awesome icons as well)
Hope this helped you guys, if you found this helpful, kindly share it with someone and help them too.
Join our community – here. (It’s free)
Thanks for reading. Peace.. 
