使用 React Native 或 Flutter 绘制地图的国家/地区效果答案

【问题标题】：scratch countries effect of map using react native or flutter使用 React Native 或 Flutter 绘制地图的国家/地区效果
【发布时间】：2020-04-16 23:25:40
【问题描述】：

我想使用谷歌地图实现类似访问过的国家/地区的反应原生或颤动，我不知道是否可以制作一些动画，例如从银色默认地图中划出一个国家，如上图所示。

我想在静态地图上实现一些上面的动画，但也许已经实现了一些东西，我在世博会或颤振中找不到类似的东西，... 有什么建议吗？

【问题讨论】：

标签： react-native flutter expo

【解决方案1】：

可以参考https://github.com/gi097/flutter_clickable_regions

这是一个简单的应用程序，它显示SVG image 和clickable regions。它显示来自Netherlands 的所有省份。当您单击它时，它将突出显示单击的省份。

下载此包后，执行命令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)

工作演示

代码sn-p

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

【讨论】：