animated_flight_paths 0.0.3 copy "animated_flight_paths: ^0.0.3" to clipboard
animated_flight_paths: ^0.0.3 copied to clipboard

A package for adding flight path animations to a map or custom background.

Platform Animated Flight Paths Pub Package License

Animated Flight Paths

A widget for adding animated flight paths to a map.

Features #

  • Includes Mercator and Robinson world map projections.
    • Or set any custom map or other background you choose.
  • Several options for customizing the flight paths including colors and animation curves.
  • Easily determine a point on the map using the debugShowOffsetOnTap then tapping or clicking.

Quick Start #

import 'package:animated_flight_paths/animated_flight_paths.dart';

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

  State<AnimatedFlightPathsExample> createState() =>

class _AnimatedFlightPathsExampleState extends State<AnimatedFlightPathsExample>
    with SingleTickerProviderStateMixin {
  // Controls the flight path animations
  late AnimationController controller;

  void initState() {
    controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 10),

  Widget build(BuildContext context) {
    return AnimatedFlightPaths(
      controller: controller,
      flightSchedule: FlightSchedule(
        // All flights must depart on or after [start] of schedule.
        start: DateTime.parse('2023-01-01 00:00:00'), 
        // All flights must arrive on or before [end] of schedule.
        end: DateTime.parse('2023-01-02 23:59:00'),
        flights: flights,

  void dispose() {

Create flight endpoints:

abstract class Cities {
  static final newYork = FlightEndpoint(
    offset: const Offset(28, 51),
    label: const Text('New York'),

  static final bangkok = FlightEndpoint(
    offset: const Offset(75, 65),
    label: const Text('Bangkok'),

Create the flights to be animated:

final flights = <Flight>[
    from: Cities.newYork,
    to: Cities.bangkok,
    departureTime: DateTime.parse('2023-01-01 00:00:00'),
    arrivalTime: DateTime.parse('2023-01-01 19:30:00'),
    from: Cities.bangkok,
    to: Cities.newYork,
    departureTime: DateTime.parse('2023-01-02 00:00:00'),
    arrivalTime: DateTime.parse('2023-01-02 19:30:00'),

Animated Flight Paths

Determining Flight Endpoint Offsets #

Map Coordinates

Easily determine coordinates with debugShowOffsetOnTap.

  controller: controller,
  debugShowOffsetOnTap: true, // Set to true
  flightSchedule: FlightSchedule(
      start: DateTime.parse('2023-01-01 00:00:00'),
      end: DateTime.parse('2023-01-01 23:59:00'),
      flights: <Flight>[],

With debugShowOffsetOnTap: true run the app and tap/click anywhere to display a 📍 and a tooltip with the coordinates of that position.

Fine-tune the 📍 position with the arrow keys [↑ ↓ → ←].

In the screenshot above the tooltip is showing (21.99, 52.79) which are the coordinates of Kansas City.

With those coordinates we can then create a new FlightEndpoint:

abstract class Cities {
  static final kansasCity = FlightEndpoint(
    offset: const Offset(21.99, 52.79),
    label: const Text('Kansas City'),

Now use this endpoint in any of your flights.

✈️ Bon Voyage!!

pub points


unverified uploader

A package for adding flight path animations to a map or custom background.

Repository (GitHub)
View/report issues


API reference




collection, flutter, flutter_svg


Packages that depend on animated_flight_paths