polyline_animation_v1

Description:

polyline animation v1

Polyline Animator #
A Flutter package for animating polylines on Google Maps, designed and developed by Michael Valdiviezo.
Features #

Animated Polylines: Smoothly animates the drawing of polylines on Google Maps.
Customizable: Easily customize the color and width of the polylines and their background.
Dynamic Updates: Supports dynamic updates and real-time animations.


Getting started #
Prerequisites #
To use this package, you need to configure your project to use Google Maps. Follow these steps to set up your API key.
Step 1: Get an API Key
Visit the Google Cloud Platform Console to get an API key. Make sure to enable the Maps SDK for Android and Maps SDK for iOS.
Step 2: Add the API Key to Your Project
Android

Open the android/app/src/main/AndroidManifest.xml file.
Add the following inside the <application> tag, but before the <activity> tag:

Example
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:polyline_animation_v1/polyline_animation_v1.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Polyline Animator Example'),
),
body: const PolylineAnimationExample(),
),
);
}
}

class PolylineAnimationExample extends StatefulWidget {
const PolylineAnimationExample({super.key});

@override
_PolylineAnimationExampleState createState() =>
_PolylineAnimationExampleState();
}

class _PolylineAnimationExampleState extends State<PolylineAnimationExample> {
final PolylineAnimator _animator = PolylineAnimator();
final Map<PolylineId, Polyline> _polylines = {};
GoogleMapController? _controller;

@override
Widget build(BuildContext context) {
return GoogleMap(
onMapCreated: (controller) {
_controller = controller;
_startPolylineAnimation();
},
polylines: _polylines.values.toSet(),
initialCameraPosition: const CameraPosition(
target: LatLng(37.42796133580664, -122.085749655962),
zoom: 15,
),
);
}

//To start animating a polyline, you can get the coordinates from your database.

void _startPolylineAnimation() {
List<LatLng> points = [
const LatLng(37.42796133580664, -122.085749655962),
const LatLng(37.42846133580664, -122.086749655962),
const LatLng(37.42946133580664, -122.087749655962),
const LatLng(37.43046133580664, -122.088749655962),
const LatLng(37.43146133580664, -122.089749655962),
const LatLng(37.43246133580664, -122.090749655962),
const LatLng(37.43346133580664, -122.091749655962),
const LatLng(37.43446133580664, -122.092749655962),
const LatLng(37.43546133580664, -122.093749655962),
const LatLng(37.43646133580664, -122.094749655962),
const LatLng(37.43746133580664, -122.095749655962),
const LatLng(37.43846133580664, -122.096749655962),
const LatLng(37.43946133580664, -122.097749655962),
const LatLng(37.44046133580664, -122.098749655962),
const LatLng(37.44146133580664, -122.099749655962),
const LatLng(37.44246133580664, -122.100749655962),
const LatLng(37.44346133580664, -122.101749655962),
const LatLng(37.44446133580664, -122.102749655962),
const LatLng(37.44546133580664, -122.103749655962),
const LatLng(37.44646133580664, -122.104749655962),
const LatLng(37.44746133580664, -122.105749655962),
const LatLng(37.44846133580664, -122.106749655962),
const LatLng(37.44946133580664, -122.107749655962),
const LatLng(37.45046133580664, -122.108749655962),
const LatLng(37.45146133580664, -122.109749655962),
const LatLng(37.45246133580664, -122.110749655962),
const LatLng(37.45346133580664, -122.111749655962),
const LatLng(37.45446133580664, -122.112749655962),
];

_animator.animatePolyline(
points,
'polyline_id',
Colors.blue,
const Color.fromARGB(255, 164, 207, 240),
_polylines,
() {
setState(() {});
},
);
}

@override
void dispose() {
_animator.dispose();
super.dispose();
}
}
copied to clipboard

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter