countries_world_map

The countries_world_map package provides an easy to implement World Map (or any other country of choice) which is fully customizable.

In this case “customizable” means the ability to change the color of a country/state/prefecture/province. Additionally when a country is touched the map provides a callback.

How to use the SimpleMap widget

This package is a great choice for visualizing data on a world- or country map. Each area (country/state/prefecture/province) has its own unique ID which you can use to assign a specific color to that area. The map is also responsive to touch. It will give you the ID, name and tapdetails of the area being tapped. Which you can use to trigger some response in your app.

class _WorldMapExampleState extends State<WorldMapExample> {
  @override
  Widget build(BuildContext context) {
    return SimpleMap(
      // REQUIRED
      instructions: SMapWorld.instructions,
      
      // OPTIONAL 
      defaultColor: Colors.grey.shade300,
      colors: SMapWorldColors(nE: Colors.orange).toMap(),
      countryBorder: CountryBorder(color: Colors.white, width: 2),
      callback: (id, name, tapdetails) {
        print('Country: $name');
      },
      onHover: (id, name, isHovering) {
        if (isHovering) {
          print('Hovering over $name');
        } else {
          print('No longer hovering over $name');
        }
      },
    );
  }
}

Supported maps

The countries_world_map package uses instructions to display the right map. In the package there are more than 130 different instructions that can draw different kind of maps. The most used map is the WorldMap. But there are also many countries supported.

Here is a list of all supported countries.

Premium maps