Flutter中实现中国省份地图

Flutter中实现中国省份地图功能开发指南

局部效果展示

可以点击省份改变颜色，更多功能可以自行拓展。

本文记录在Flutter项目中安卓端实现中国地图的过程。由于实现是通过Flutter调用安卓原生代码完成，iOS端需要另行处理。对于iOS开发者，可以考虑使用Appuploader这样的工具来简化iOS应用的测试和发布流程。

在Flutter中打开android文件夹

右键android文件夹，选择Flutter -> Open Android module in Android Studio

点击后会像打开一个纯Android项目一样，在这个界面中可以编写原生代码和相应插件。

如果你是第一次打开，它会下载gradle和构建项目需要的依赖。这个过程可能需要一些时间。

常见问题解决方案

Gradle下载超时问题

方法一：
修改仓库配置为阿里镜像：

allprojects {
    repositories {
        google()
        maven { url "https://jitpack.io" }
        mavenCentral()
        maven { url "https://maven.aliyun.com/repository/public" }
    }
}

方法二：
手动下载对应版本的Gradle并放到指定目录下。

构建失败问题

在[flutter项目]/android/build.gradle中，注释掉一行代码：

rootProject.buildDir = '../build'
subprojects {
    //project.buildDir = "${rootProject.buildDir}/${project.name}"
}
subprojects {
    project.evaluationDependsOn(':app')
}

tasks.register("clean", Delete) {
    delete rootProject.buildDir
}

注意：在Flutter运行的时候，记得取消这行的注释。

原生代码编写

核心代码需要放到android\app\src\main\res\raw文件夹下。

目录结构如下图所示：

在MainActivity中加入以下代码：

class MainActivity: FlutterActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        GeneratedPluginRegistrant.registerWith(flutterEngine)
        flutterEngine.plugins.add(mutableSetOf<FlutterPlugin>(ChinaProvinceViewFlutterPlugin()))
    }
}

Flutter端代码实现

china_province_view.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

const _ChinaProvinceView_TAG =
    'com.mrper.coronavirus.widgets.china-province-view';

class ChinaProvinceView extends StatefulWidget {
  ChinaProvinceView({
    required this.width,
    required this.onViewCreated,
  })  : assert(width != null && width > 0, '地图宽度必须大于0');

  final double width;
  final Function(int id) onViewCreated;

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

class _ChinaProvinceViewState extends State<ChinaProvinceView> {
  final double _mapWHRatio = 1369.0 / 1141.0;

  @override
  Widget build(BuildContext context) => SizedBox(
      width: widget.width,
      height: widget.width / _mapWHRatio,
      child: AndroidView(
          viewType: _ChinaProvinceView_TAG,
          creationParamsCodec: StandardMessageCodec(),
          onPlatformViewCreated: widget.onViewCreated));
}

class ChinaProvinceViewController {
  late MethodChannel? _methodChannel;
  late EventChannel? _eventChannel;

  ChinaProvinceViewController(int viewId) {
    _methodChannel = MethodChannel('$_ChinaProvinceView_TAG-$viewId');
    _eventChannel = EventChannel('$_ChinaProvinceView_TAG-$viewId-event');
  }

  set selectedBackgroundColor(int value) => _methodChannel?.invokeMethod(
      'setSelectedBackgroundColor', {'value': value ?? Colors.red.value});

  void dispose() {
    if (_methodChannel != null) {
      _methodChannel?.setMethodCallHandler(null);
      _methodChannel = null;
    }
    if (_eventChannel != null) {
      _eventChannel = null;
    }
  }
}

map_page.dart

import 'package:ecology/component/app_bar.dart';
import 'package:flutter/material.dart';
import 'china_province_view.dart';

class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  late ChinaProvinceViewController _chinaProvinceViewController;

  void _onChinaProvinceViewCreated(int viewId) {
    _chinaProvinceViewController = ChinaProvinceViewController(viewId)
      ..selectedBackgroundColor = Colors.blue.value;
  }

  @override
  Widget build(BuildContext context) => Container(
    child: SingleChildScrollView(
        child: Column(children: [_buildChinaMapView()])),
  );

  Widget _buildChinaMapView() {
    return Container(
        margin: const EdgeInsets.all(5),
        child: ChinaProvinceView(
            width: MediaQuery.of(context).size.width - 10,
            onViewCreated: _onChinaProvinceViewCreated));
  }

  @override
  void dispose() {
    _chinaProvinceViewController?.dispose();
    super.dispose();
  }
}

总结

通过本文，我们实现了在Flutter项目中调用安卓原生代码来展示中国省份地图的功能。对于iOS开发者，可以考虑使用Appuploader这样的工具来简化iOS应用的测试和发布流程，提高开发效率。

_chinaProvinceViewController?.dispose();
super.dispose();
}
}

## 总结

通过本文，我们实现了在Flutter项目中调用安卓原生代码来展示中国省份地图的功能。对于iOS开发者，可以考虑使用Appuploader这样的工具来简化iOS应用的测试和发布流程，提高开发效率。

该篇文章代码参考自gitee上的开源项目。