在 Flutter 中设置谷歌地图多边形的不透明度颜色

Posted 2023-02-23

【中文标题】在 Flutter 中设置谷歌地图多边形的不透明度颜色

【英文标题】：Set opacity color in google map polygon in Flutter

【发布时间】：2021-07-03 21:29:37

【问题描述】：

有人知道如何在我的多边形坐标中设置不透明度颜色，我只希望我的多边形中的黑色背景将颜色设置为具有不透明度颜色的紫色 和多边形的边界也是一样的。有可能吗？如果有人能弄清楚，那就太好了，非常感谢您！

我的多边形

  Set<Polygon> myPolygon() 
    List<LatLng> polygonCoords = new List();
    polygonCoords.add(LatLng(8.9442, 125.5321));
    polygonCoords.add(LatLng(8.9486, 125.5364));
    polygonCoords.add(LatLng(8.9303, 125.5384));
    polygonCoords.add(LatLng(8.9442, 125.5321));
    Set<Polygon> polygonSet = new Set();
    polygonSet.add(Polygon(
        polygonId: PolygonId('test'),
        points: polygonCoords,
        strokeColor: Colors.red));  //color of the border
    return polygonSet;
  

我的谷歌地图

  @override
  Widget build(BuildContext context)
    return Scaffold(
        backgroundColor: Colors.deepOrange,
        appBar: AppBar(
          title: Text('Google Map API'),
        ),
        body:Padding(
            padding: EdgeInsets.only(bottom: 16.0),
            child: GoogleMap(
              onMapCreated:  _onMapCreated,
              polygons: myPolygon(), markers: _markers,
              mapType: MapType.normal,
              initialCameraPosition:CameraPosition(target: LatLng(8.9405, 125.5364),
                zoom: 15,
            ))
        ),
    );
  

【参考方案1】：

试试这个：

 polygonSet.add(Polygon(
        polygonId: PolygonId('test'),
        points: polygonCoords,
        fillColor: Colors.red.withOpacity(0.2),
        strokeColor: Colors.red));  //color of the border

【讨论】：

感谢它的工作，但可以转换颜色十六进制？像这样 ？ const Color(0xFFFF5800)

是的，fillColor: Color(0xFFFF5800).withOpacity(0.2),

【参考方案2】：

添加到@JimChiu 的答案，您可以像这样使用十六进制颜色，

class HexColor extends Color 
  HexColor(final String hexColor) : super(_getColorFromHex(hexColor));

  static int _getColorFromHex(String hexColor) 
    hexColor = hexColor.toUpperCase().replaceAll('#', '');
    if (hexColor.length == 6) 
      hexColor = 'FF' + hexColor;
    
    return int.parse(hexColor, radix: 16);
  

你可以这样使用。

polygonSet.add(Polygon(
        polygonId: PolygonId('test'),
        points: polygonCoords,
        strokeColor: HexColor('#88F04857')));