Package selection guidance compiled from public package information, community data, and project usage.
Universe is a Flutter package that provides an easy and flexible way to integrate interactive maps into Flutter applications, inspired by Leaflet.js. It supports dynamic map rendering, custom markers, and touch interactions across multiple platforms. With a lightweight API and responsive design, it enables developers to build rich geospatial experiences with minimal setup. The package is ideal for apps requiring map visualization, location tracking, or spatial data representation.
Use cases
Interactive map displays
Location-based app features
Geospatial data visualization
Map overlays and annotations
Real-time tracking interfaces
Key features
Cross-platform compatibility
Customizable map layers
Touch interaction support
Lightweight and intuitive API
Support for markers and popups
Suitable for
Mobile app developers
Geolocation feature implementers
Data visualization projects
Prototyping interactive maps
Considerations
Requires internet access for map tiles
Limited offline map capabilities
Dependent on external map providers
May need performance tuning for large datasets
Original README
Original README snapshot from the linked source repository. Visit the repository for the latest content.
Universe
The easy & flexible way to use interactive maps in Flutter.
Supports OpenStreetMap, Google Maps, MapBox and more.
// List of available OpenStreetMapType// OSM MapnikOpenStreetMapType.Mapnik// OSM GermanyOpenStreetMapType.DE
// OSM SwitzerlandOpenStreetMapType.CH
// OSM FranceOpenStreetMapType.France// Humanitarian OSMOpenStreetMapType.HOT
// OSM BretonOpenStreetMapType.BZH
U.MapBox(
// get your access token from https://account.mapbox.com/access-tokens/
accessToken: '',
center: [-6.175329, 106.827253],
type: MapBoxType.Street,
zoom: 15,
)
You can get your own MapBox access token from here. Please always use your own access token in your projects.
// List of available MapBoxTypeMapBoxType.BasicMapBoxType.StreetMapBoxType.SatelliteMapBoxType.HybridMapBoxType.OutdoorsMapBoxType.DarkMapBoxType.LightMapBoxType.Bright
We can create maps with multiple tile layers. Here is an example of using Humanitarian OpenStreetMap combined with map tiles from SafeCast and OpenRailwayMap.
The default behavior of Live Map is always move the center of the maps to user's current location.
If you want to go live (always searching for user's current location and show location indicator to that location), but don't want to move the center of the maps, you can set parameter moveWhenLive to false.
U.GoogleMap(
type: GoogleMapType.Street,
center: [-6.169976, 106.830979],
zoom: 16,
live: true,
// moveWhenLive: false will make the map live (constantly search for user location),// set the location indicator to current user location, but does not // move the center of the maps automatically to that location.// moveWhenLive has default value set to true
moveWhenLive: false,
)
And use that controller to listen the positionStream to get current position and current zoom of our map. We can also programmatically move, zoom, rotate or find location using the map controller.
// listen everytime the map data changes (move or zoom)
_mapController.positionStream?.listen((data) {
// current center of the map// print(data.center); // current zoom level of the map// print(data.zoom);
});
Here is a simple example of painting a rectangle to universe maps.
U.OpenStreetMap(
center: [51.555015, -0.108331],
zoom: 16,
// by default, RectangleLayer will use style from theme primaryColor
rectangles: U.RectangleLayer(
[
[51.554488, -0.108964], // latlng of bottom left corner
[51.555682, -0.107580], // latlng of top right corner
],
),
)
Here is an example of painting an image overlay to universe maps.
U.OpenStreetMap(
center: [-6.175329, 106.827253],
zoom: 15,
images: [
U.ImageOverlay(
// from url'http://img.freeflagicons.com/thumb/background_with_square_parts/indonesia/indonesia_640.png',
// can use bounds from all 4 corners
bounds: [
[-6.180143, 106.823504],
[-6.180344, 106.828948],
[-6.17162, 106.82938],
[-6.171958, 106.823674],
],
fit: BoxFit.cover,
),
U.ImageOverlay(
// from assets'assets/startrek.png',
// can use bounds from only 2 corners
bounds: [
[-6.17098, 106.825514], // latlng of bottom left corner
[-6.167775, 106.822867], // latlng of top right corner
],
)
],
)
Universe maps come with default controls: compass, locator, scale and location indicator. But we can override this controls with our own controls to make it align with our app theme.
