[Isometric Flutter Globe with geographic connection arcs and rendering controls]

Flutter Globe #

Interactive Canvas globes for Flutter: markers, animated arcs, themes, and composable data layers.

v1.0.0 · MIT · Flutter 3.27+ / Dart 3.6+

The banner is original concept artwork, not a rendering screenshot. See the release audit for verified checks and platform limits.

Overview #

Use Flutter Globe for a geographic overview in a dashboard, a network visualization, or an interactive location picker. It projects geographic coordinates with Dart math and draws them using Flutter Canvas. It does not embed a web view or download map tiles.

It is a visualization toolkit, not a navigation map or a geographic boundary authority.

Features #

• Perspective and orthographic projection, drag rotation, momentum, and pinch zoom.
• A staged reference-inspired intro with reduced-motion support.
• 24 named theme presets and animated theme transitions.
• Geographic markers with labels, pulses, payloads, and tap callbacks.
• Elevated great-circle arcs and moving vehicles on multi-stop routes.
• Grid, heatmap, region, label, particle, and day/night overlay layers.
• Programmatic camera controls and eight example scene templates.
• A seven-destination showcase with a playground and reproducible benchmark scenes.

Themes map to implemented surface, atmosphere, lighting, interaction, and quality behavior. Preset names describe visual treatments, not separate shader engines. There are no custom fragment shaders or guaranteed frame-rate claims.

Installation #

flutter pub add flutter_globe

dependencies:
  flutter_globe: ^1.0.0

flutter pub get

Quick start #

import 'package:flutter/material.dart';
import 'package:flutter_globe/flutter_globe.dart';

void main() => runApp(const MaterialApp(
  home: Scaffold(
    backgroundColor: Color(0xFF020617),
    body: Center(child: SizedBox.square(dimension: 360, child: Globe())),
  ),
));

In a bounded layout, the minimal widget is const Globe(). Default scenes contain no sample markers or arcs. In a Column or scroll view, supply a size or wrap with SizedBox/AspectRatio.

Reference-inspired scene #

Globe.template(
  GlobeTemplates.globalNetwork,
  introAnimation: GlobeIntroAnimations.reference,
  size: 400,
);

The intro uses staged scale, opacity, atmospheric bloom, marker reveal, and arc reveal. “Reference-inspired” describes the visual direction; it does not promise parity or affiliation with another product.

Skins and themes #

Globe(skin: GlobeSkins.cyberpunk);

Globe(
  theme: GlobeSkins.reference.copyWith(
    surface: GlobeSkins.reference.surface.copyWith(
      landColor: Colors.tealAccent,
      pointSize: 2,
    ),
    atmosphere: const GlobeAtmosphereStyle(color: Colors.teal),
  ),
);

Use GlobeSkins.named to discover names and GlobeThemeTransition for transitions. See customization and precedence.

Markers #

Globe(markers: [
  GlobeMarker.latLng(
    latitude: 51.5074, longitude: -0.1278,
    label: 'London', color: Colors.cyan, pulse: true,
  ),
]);

Use onMarkerTap to update application state. For remote data, validate with GlobeCoordinate.normalized. Supply an accessible list alongside the canvas. Marker guide.

Arcs #

const Globe(arcs: [
  GlobeArc(
    start: GlobeCoordinate(latitude: 51.5074, longitude: -0.1278),
    end: GlobeCoordinate(latitude: 35.6762, longitude: 139.6503),
    altitude: 0.28,
    duration: Duration(seconds: 3),
    repeat: true,
  ),
]);

Arc and route guide explains timing, static baselines, gradients, and scene costs.

Layers #

const Globe(layers: [
  GlobeGridLayer(),
  GlobeHeatmapLayer(points: [
    GlobeHeatPoint(
      coordinate: GlobeCoordinate(latitude: 35.6762, longitude: 139.6503),
      intensity: 0.8,
    ),
  ]),
]);

Layer guide includes a custom painter layer and the clipping/z-order contract.

Intro animation #

const Globe(introAnimation: GlobeIntroAnimation.none);

const Globe(introAnimation: GlobeIntroAnimation(
  duration: Duration(seconds: 2),
  markerDelay: Duration(milliseconds: 500),
  arcDelay: Duration(milliseconds: 800),
));

autoRotate: false stops camera rotation but leaves marker/arc animations running. System reduced motion skips the intro and freezes the scene clock. Animation guide.

Controller #

final controller = GlobeController(autoRotate: false);
controller.lookAt(const GlobeCoordinate(latitude: 51.5074, longitude: -0.1278));
controller.zoom = 1.3;
controller.dispose();

Pass your controller into Globe(controller: controller) and dispose it in the owning State. Animated methods such as flyTo require that State's TickerProvider. Complete lifecycle example.

Example and playground #

cd example
flutter pub get
flutter run -d chrome

Showcase · Skins · Arcs · Markers · Data Layers · Playground · Benchmarks. No Tour tab.

The playground supports theme presets, projection and quality, scale and zoom, rotation and inertia, surface/lighting, atmosphere, arc and marker controls, reset, randomization, code copy, and fullscreen preview. The exported scene includes the current geographic sample data; data-layer export is not offered. Example guide.

Performance #

const Globe(quality: GlobeQuality.low, autoRotate: false);

low, medium, high, and ultra progressively increase land sampling, arc subdivision, and particle density. auto selects low, medium, or high from the rendered globe diameter; it does not react to measured frame time. Reduce labels, arcs, particles, and overlays before increasing quality. Reuse stable scene lists. Performance guide.

Benchmarks #

Run the example in profile mode on a native device, select Benchmarks, choose a fixed scenario, and press Run benchmark. Each run has 2 seconds of warm-up, 8 seconds of measurement, and 2 seconds to collect batched engine timings. Export JSON with Copy JSON.

The report distinguishes build duration, raster duration, total latency percentiles, and over-budget frames. FPS, GPU execution time, and memory are unavailable; this web benchmark does not report native engine timings. Methodology and interpretation.

Platform support #

The package uses Flutter Canvas APIs and no platform plugins. The release report records the exact validation boundary.

Accessibility #

The canvas exposes a configurable semantic image label. Reduced-motion mode skips the intro, decorative pulses, momentum, tours, and scene-clock animation while preserving the static visualization and controls. Applications should provide semantic controls or a parallel list when geographic data must be individually accessible. See accessibility guidance.

API overview #

Use package:flutter_globe/flutter_globe.dart; src/ imports are unsupported. There is no separate GlobeSkin, GlobeMarkerStyle, or GlobeArcStyle class: skins are themes, and markers/arcs carry their own styles. See API and architecture.

Roadmap #

Future work may add more surface renderers, community themes, geographic layers, and measured adaptive quality when concrete use cases justify them. Native platform performance and accessibility results will be expanded as real device coverage is contributed.

Documentation and contributing #

Start with getting started, FAQ, or troubleshooting. Contributions should include a focused test and, for visual changes, before/after captures. See CONTRIBUTING, Code of Conduct, and security policy.

License #

The package is available under the MIT license. Its offline land point cloud is derived from Natural Earth public-domain data; see attribution. This independent Flutter implementation does not redistribute React Bits source code or proprietary assets.