Flutter, the open-source UI software development toolkit, has acquired enormous prominence for its adaptability and convenience. While fostering an application with flutter that requires map functionalities, one of the fundamental highlights is the capacity to show polyline points. This polyline points to a line or path on a map, for example, those you would find in Google Maps.
In this article, we will explore the Polylines On Google Maps in Flutter. We see how to execute a demo program. We will tell you the best way how to draw polylines on Google Maps to show the path, lines, directions, etc in your Flutter applications.
- For Google Maps Flutter:
google_maps_flutter | Flutter Package
A Flutter plugin for integrating Google Maps in iOS and Android applications.pub.dev
If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.
Table Of Contents::
Introduction:
The below demo video shows how to draw Polylines On Google Maps in Flutter and how Polylines will work on Google Maps in your Flutter applications. We will draw polylines to show you ways, directions, or trails with various types of colors or lines on Google Maps. It will be shown on your device.
Demo Module::
Constructor:
To utilize Polyline, you need to call the constructor underneath:
const Polyline({
required this.polylineId,
this.consumeTapEvents = false,
this.color = Colors.black,
this.endCap = Cap.buttCap,
this.geodesic = false,
this.jointType = JointType.mitered,
this.points = const <LatLng>[],
this.patterns = const <PatternItem>[],
this.startCap = Cap.buttCap,
this.visible = true,
this.width = 10,
this.zIndex = 0,
this.onTap,
});Properties:
There are some properties of Polyline:
- > PolylineId — This property is used to uniquely identify a Polyline among GoogleMap polylines. This does not have to be globally unique, or unique among the list.
- > consumeTapEvents — This property is used to True if the Polyline consumes tap events. If this is false, the onTap callback will not be triggered.
- > Color — This property is utilized for the Line segment color in ARGB design, a similar configuration utilized by Color. The default value is black (0xff000000.
- > endCap — This property is utilized for the cap at the end vertex of the polyline. The default end cap is ButtCap. Supported on Android only.
- > visible — This property is utilized for True if the marker is visible.
- > width — This property is utilized to define the width of the line segment to be drawn. The width is constant and independent of the camera’s zoom level. The default value is 10.
- > points — This property is utilized for the vertices of the polyline to be drawn.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
flutter:
sdk: flutter
google_maps_flutter: ^2.5.2Step 2: Import
import 'package:google_maps_flutter/google_maps_flutter.dart';Step 3: Run flutter packages get in the root directory of your app.
Step 4: Update the build.gradle File
Set the minSdkVersion in android/app/build.gradle:
android {
defaultConfig {
minSdkVersion 20
}
}Step 5: Add API Key
- For Andriod:
Add the Api key in android/app/src/main/AndroidManifest.xml:
<manifest ...
<application ...
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="YOUR_API_KEY_HERE"/>
</application>
</manifest>- For Ios:
To set up, specify your API key in the application delegate ios/Runner/AppDelegate.m:
import GoogleMaps
...
GMSServices.provideAPIKey("YOUR_API_KEY_HERE")How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
In the main .dart file. We will create a new class MyHomePage(). In this class, we will define a GoogleMapControlle:r as a mapController variable and Set Polylines as a polylines variable ie equal to a curly bracket.
GoogleMapController? mapController;
Set<Polyline> polylines = {};Now, we will define three latitude and longitude joints where three lines will be drawn:
LatLng location1 = const LatLng(28.612898, 77.365930);
LatLng location2 = const LatLng(28.5897989, 77.3368915);
LatLng location3 = const LatLng(28.6029172, 77.3195082);We will create an initState() method. In this method, we will add the polylinesDraw() method. We will define the below code.
@override
void initState() {
polylinesDraw();
super.initState();
}We will define polylinesDraw() method are:
In this method, we will add three polylines with PolylineId, points, and different colors. We will add a polyline to the variable.
polylinesDraw() async {
polylines.add(Polyline(
polylineId: PolylineId(location1.toString()),
visible: true,
width: 5,
points: [
location1,
location2,
],
color: Colors.pink,
));
polylines.add(Polyline(
polylineId: PolylineId(location1.toString()),
visible: true,
width: 5,
points: [
location2,
location3,
],
color: Colors.deepPurple,
));
polylines.add(Polyline(
polylineId: PolylineId(location1.toString()),
visible: true,
width: 5,
points: [
location3,
location1,
],
color: Colors.red,
));
setState(() {
});
}
In the body part, we will add the GoogleMap() method. In this method, we will add zoomGesturesEnabled was true, set the initialCameraPosition as zoom is 14, and the target was your location wrap to CameraPosition(), add variable on polylines, map type was normal, onMapCreated was this method called when map is created. Inside onMapCreated, we will add the setState() function. In this function, we will add mapController is equal to the controller.
GoogleMap(
zoomGesturesEnabled: true,
initialCameraPosition: CameraPosition(
target: location1,
zoom: 14.0,
),
polylines: polylines,
mapType: MapType.normal,
onMapCreated: (controller) {
//method called when map is created
setState(() {
mapController = controller;
});
},
)When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:poly/splash_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Splash(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
GoogleMapController? mapController;
Set<Polyline> polylines = {};
LatLng location1 = const LatLng(28.612898, 77.365930);
LatLng location2 = const LatLng(28.5897989, 77.3368915);
LatLng location3 = const LatLng(28.6029172, 77.3195082);
@override
void initState() {
polylinesDraw();
super.initState();
}
polylinesDraw() async {
polylines.add(Polyline(
polylineId: PolylineId(location1.toString()),
visible: true,
width: 5,
points: [
location1,
location2,
],
color: Colors.pink,
));
polylines.add(Polyline(
polylineId: PolylineId(location1.toString()),
visible: true,
width: 5,
points: [
location2,
location3,
],
color: Colors.deepPurple,
));
polylines.add(Polyline(
polylineId: PolylineId(location1.toString()),
visible: true,
width: 5,
points: [
location3,
location1,
],
color: Colors.red,
));
setState(() {
//refresh UI
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: const Text("Flutter Polylines on Google Map Demo"),
backgroundColor: Colors.purpleAccent,
),
body: GoogleMap(
zoomGesturesEnabled: true,
initialCameraPosition: CameraPosition(
target: location1,
zoom: 14.0,
),
polylines: polylines,
mapType: MapType.normal,
onMapCreated: (controller) {
setState(() {
mapController = controller;
});
},
));
}
}Conclusion:
In the article, I have explained the Polylines On Google Maps in Flutter; you can modify this code according to your choice. This was a small introduction to the Polylines On Google Maps in Flutter User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying Polylines On Google Maps in your Flutter projects. We will show you what the Introduction is. Make a demo program for working on Polylines On Google Maps to show paths, lines, or directions with different colors in your Flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I need to correct something? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally rich apps. Hire a Flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
