Flutter接入高德地图插件并修改其样式

Flutter使用高德地图

在项目中，我们使用的是混合开发模式 (flutter module)，原生代码中，我们已经有在使用高德地图，再此基础上
在flutter中，我们现在也需要使用高德地图
方案有两种
1.使用AndroidView嵌入原生View的方式，封装Flutter高德地图，
具体可以参考我的另一篇文章 Flutter嵌入原生View，使用原生的WebView
2.使用高德地图官方封装好的高德地图flutter插件

这里考虑到开发速度，且高德地图已帮我们封装好了，故我们选择了方案2
具体接入参考flutter 高德地图接入 官方文档 : 集成高德地图Flutter插件

修改样式

虽然高德地图官方已封装好了高德地图flutter插件，但是文档很不详细，对于修改样式这个功能自己摸索了半天，在这里记录一下

import 'dart:io';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:flutter_boost/flutter_boost.dart';
import '../../global/styles/styles.dart';
import 'package:amap_flutter_map/amap_flutter_map.dart';

///高德地图测试
class TestPage extends StatefulWidget {
  const TestPage({Key? key}) : super(key: key);

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

class _TestPageState extends State<TestPage> with PageVisibilityObserver {
  Uint8List? styleData;
  Uint8List? styleExtraData;

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

    initMapData();
  }

  void initMapData() async {
    var styleDataFile = File(
        /*这里只是方便测试所以写死，实际项目中应该通过channel动态获取原生代码中已配置好的高地地图样式路径*/
        "/storage/emulated/0/Android/data/com.adinnet.xlebike/files/amap_style/style.data");
    styleData = await styleDataFile.readAsBytes();
    var styleExtraDataFile = File(
       /*这里只是方便测试所以写死，实际项目中应该通过channel动态获取原生代码中已配置好的高地地图样式路径*/
        "/storage/emulated/0/Android/data/com.adinnet.xlebike/files/amap_style/style_extra.data");
    styleExtraData = await styleExtraDataFile.readAsBytes();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "测试",
      theme: LiuTheme.lightTheme,
      home: Scaffold(
        appBar: XLAppBar(context, "测试"),
        body: AMapWidget(
          customStyleOptions: CustomStyleOptions(
            true,
            styleData: styleData,
            styleExtraData: styleExtraData,
          ),
        ),
      ),
    );
  }
}

效果如下所示