Plotting Countries In World Map Using Flutter

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.

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

Implementation:-

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

  dependencies:
  flutter
    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.

SimpleMap(
    instructions: SMapWorld.instructions, 
    defaultColor: Colors.grey,       

    colors: SMapWorldColors( 
        uS: Colors.blue,   // This makes USA green
        cN: Colors.red,   // This makes China green
        iN: Colors.green,   // This makes Russia green
     ).toMap(), 

    callback: (id, name, tapDetails) {      
        print(id); 
    },
);

Note:-

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);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  void initState() {
    super.initState();
  }

  @override
  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: Colors.blue,   // This makes USA green
                cN: Colors.red,   // This makes China green
                iN: Colors.green,   // This makes Russia green
              ).toMap(),

              callback: (id, name, tapDetails) {
                print(id);
              },
      ))),
    );
  }
}