Make a Map App Using Flutter

 

In this article, I will show you how you can add a Mapping feature to your app using Flutter. for this tutorial you will not need google maps API, so you don't need to pay anything because we're going to use another Free API, so without further ado let's dive into it.

Dependencies 

Create a new Flutter Project and let's add some dependencies that we're going to use. Open your pubspec.yaml file and inside the dependencies add these lines.

  flutter_map: any

  geocoding: ^1.0.5

  geocoder: ^0.2.1

  tuple: ^1.0.2

  latlong: ^0.6.1

  positioned_tap_detector_2: ^1.0.0

  transparent_image: ^1.0.0

  async: ^2.1.0

  flutter_image: ^3.0.0

  vector_math: ^2.0.0

  proj4dart: ^1.0.4

  meta: ^1.1.0

  collection: ^1.14.0

Now let's start building our App

source code:

import 'package:flutter/material.dart';

import 'package:flutter_map/flutter_map.dart';

import 'package:geocoder/geocoder.dart';

import 'package:latlong/latlong.dart';

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  // This widget is the root of your application.

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: MapApp(),

    );

  }

}

class MapApp extends StatefulWidget {

  @override

  _MapAppState createState() => _MapAppState();

}

class _MapAppState extends State<MapApp> {

  double long = 49.5;

  double lat = -0.09;

  LatLng point = LatLng(49.5, -0.09);

  var location = [];

  @override

  Widget build(BuildContext context) {

    return Stack(

      children: [

        FlutterMap(

          options: MapOptions(

            onTap: (p) async {

              location = await Geocoder.local.findAddressesFromCoordinates(

                  new Coordinates(p.latitude, p.longitude));

              setState(() {

                point = p;

                print(p);

              });

              print(

                  "${location.first.countryName} - ${location.first.featureName}");

            },

            center: LatLng(49.5, -0.09),

            zoom: 5.0,

          ),

          layers: [

            TileLayerOptions(

                urlTemplate:

                    "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",

                subdomains: ['a', 'b', 'c']),

            MarkerLayerOptions(

              markers: [

                Marker(

                  width: 80.0,

                  height: 80.0,

                  point: point,

                  builder: (ctx) => Container(

                    child: Icon(

                      Icons.location_on,

                      color: Colors.red,

                    ),

                  ),

                )

              ],

            ),

          ],

        ),

        Padding(

          padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 34.0),

          child: Column(

            mainAxisAlignment: MainAxisAlignment.spaceBetween,

            children: [

              Card(

                child: TextField(

                  decoration: InputDecoration(

                    contentPadding: EdgeInsets.all(16.0),

                    hintText: "Search for your localisation",

                    prefixIcon: Icon(Icons.location_on_outlined),

                  ),

                ),

              ),

              Card(

                child: Padding(

                  padding: const EdgeInsets.all(8.0),

                  child: Column(

                    children: [

                      Text(

                          "${location.first.countryName},${location.first.locality}, ${location.first.featureName}"),

                    ],

                  ),

                ),

              ),

            ],

          ),

        ),

      ],

    );

  }

}