scratch countries effect of map using react native or flutter

I want to implement something like visited countries in react native or maybe flutter, using google map I don't know if is possible to make some animations like scratch a country from silver default map like in image from above.

I think to implement some animation above to a static map, but maybe is there something already implemented, I don't find something similar on expo or in flutter,... Any suggestions ?

Solution 1: chunhunghan

You can reference https://github.com/gi097/flutter_clickable_regions

This is a simple application which displays an SVG image with clickable regions. It displays all the provinces from The Netherlands. When you click on it, it will highlight the clicked province.

After download this package, execute command flutter packages pub run build_runner build

[INFO] Generating build script...
[INFO] Generating build script completed, took 513ms
[INFO] Caching finalized dependency graph...
[INFO] Caching finalized dependency graph completed, took 52ms

[INFO] Succeeded after 13.6s with 1 outputs (5 actions)

working demo

code snippet

Widget _buildProvince(Province province) {
    return ClipPath(
        child: Stack(children: <Widget>[
          CustomPaint(painter: PathPainter(province)),
          Material(
              color: Colors.transparent,
              child: InkWell(
                  onTap: () => _provincePressed(province),
                  child: Container(
                      color: _pressedProvince == province
                          ? Color(0xFF7C7C7C)
                          : Colors.transparent)))
        ]),
        clipper: PathClipper(province));
  }