1️⃣Create A Region

Creating regions is designed to be easy for the user and you (the developer).

The Example Application contains a great way you might want to allow your users to choose a region to download, and it shows how to use Provider to share a created region and the number of approximate tiles it has to a download screen.

Types Of Region

All regions (before conversion to DownloadableRegion) implement BaseRegion.

The most basic type of region, defined by a North West and South East coordinate bound - specifically a LatLngBounds object provided by flutter_map.

final region = RectangleRegion(
        LatLng(), // North West
        LatLng(), // South East

After you've created your region, you can convert it to a drawable polygon (below), or convert it to a DownloadableRegion ready for downloading.

Converting To Drawable Polygons

All BaseRegions can be drawn on a map with minimal effort from you or the user, using toDrawable().

Internally, this uses the toList or toOutline methods to generate the points forming the Polygon, then it places this/these polygons into a PolygonLayerOptions.

    children: [
            options: region.toDrawable(
                fillColor: Colors.white,
                borderColors: Colors.black,
                borderStrokeWidth: 3,
                // More parameters available

Line Regions

Line regions are bit more complicated to draw, as they involve a lot of logic and maths to make smooth. For this reason, they are also the worst performing when it comes to drawing.

Converting a LineRegion with many points spaced close together may yield unexpected results, due to the curves that must be drawn.

There are additional important parameters:

API ParameterTypeExplanationDefault



Controls whether the rectangles formed are joined nicely, whether they are just joined by the closest corners, or whether they are just left as rectangles




Amount of curve segments per curve, if prettyPaint is enabled




Controls the rendering if prettyPaint is disabled


  • Set prettyPaint to false and overlap to -1 to get the 'reduced' appearance. Or, set to 0 to get the normal appearance, and 1 to get the rectangles that are actually downloaded.

  • Set prettyPaint to true and overlap to -1 to get the rectangles joined by their nearest corners. Setting to 0 will show the line with joining curves - the default. Setting to 1 will cause an error.

Disabling prettyPaint will increase speed and is recommended on slower devices. Decreasing the curveSmoothening will also increase speed - set to a smaller value if corners are likely to be small (for example along a route).

Last updated

© Luka Stillingfleet (JaffaKetchup)