Reading list Switch to dark mode

    Plotting Countries In World Map Using Flutter

    Updated 31 July 2023

    In this blog we will implement that How to Plotting Countries In World Map Using Flutter.

    This package offers a straightforward way to integrate a customizable World Map into your Flutter app. It allows you to easily customize the appearance of individual countries, states, prefectures, or provinces by changing their colors.

    You may also check our flutter app development services.

    This Flutter package allows you to create custom maps using the CustomPainter widget. These maps can be quite large in size.

    When you tap on a specific area of the map, such as a country or state, the package provides a callback function with information about the tapped area, including its name, ID, and tap details.

    Start your headless eCommerce
    Find out More

    It’s important to consider performance, especially when dealing with large maps.


    1.First, you need to import the package into your Flutter project.

        sdk: flutter
      countries_world_map: ^1.1.0

    2.Decide which map you want to display, such as Spain, Mexico, or the World Map. Each map has two classes associated with it, one for providing instructions and the other for defining color properties.

    3.Instantiate the SimpleMap() widget and pass the necessary instructions for drawing the map. For example, if you want to display the map of Spain, use SMapSpain() to provide the required instructions.

    4.Customize the colors of specific areas on the map (countries, states, etc.) using the corresponding SMap…Colors() class. Map the desired color properties to the area IDs given in the SMap…() instructions.

    5.Implement the callback function to handle user interactions. Whenever a user taps on a particular area of the map, the callback will provide you with relevant information, including the name, ID, and tap details of the selected area.

    Add the SimpleMap() widget to your app’s UI, and it will render the chosen map based on the provided instructions and customized colors.

        instructions: SMapWorld.instructions, 
        defaultColor: Colors.grey,       
        colors: SMapWorldColors( 
            uS:,   // This makes USA green
            cN:,   // This makes China green
            iN:,   // This makes Russia green
        callback: (id, name, tapDetails) {      

    Keep in mind that ID formats may vary among countries. The color class and the guidelines must always align, but there could be variations in different countries.

    Completed code:-

    import 'package:countries_world_map/countries_world_map.dart';
    import 'package:countries_world_map/data/maps/world_map.dart';
    import 'package:flutter/material.dart';
    void main() {
      runApp(const MyHomePage());
    class MyHomePage extends StatefulWidget {
      const MyHomePage({Key? key}) : super(key: key);
      _MyHomePageState createState() => _MyHomePageState();
    class _MyHomePageState extends State<MyHomePage> {
      void initState() {
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: Scaffold(
              appBar: AppBar(
                  title: const Text('Countries World Map',
                      style: TextStyle(color: Colors.white))),
              body: SizedBox(
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width,
                child: SimpleMap(
                  instructions: SMapWorld.instructions,
                  defaultColor: Colors.grey,
                  colors: const SMapWorldColors(
                    uS:,   // This makes USA green
                    cN:,   // This makes China green
                    iN:,   // This makes Russia green
                  callback: (id, name, tapDetails) {


    As you can see in the attached image, there are various colors appearing throughout the country.



    We have done with our implementation of Countries World Map In Flutter.

    Check here for more interesting blogs –

    Hope this blog helped you to better understand the implementation of Countries World Map In Flutter.

    To explore more of my blogs, please visit the following link.

    Thanks for reading this blog.


    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*

    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home