如何在颤动中将边界半径添加到谷歌地图？答案

【问题标题】：how to add border radius to google maps in flutter?如何在颤动中将边界半径添加到谷歌地图？
【发布时间】：2019-05-27 02:34:14
【问题描述】：

我将谷歌地图小部件添加到具有边框半径但谷歌地图角未圆角的容器中。

Container(
            height: 100,
            width: double.infinity,
            margin: EdgeInsets.only(left: 30, right: 30),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(30),
              border: Border.all(
                style: BorderStyle.solid,
              ),
            ),
            child: GoogleMap(),)

【问题讨论】：

标签： google-maps flutter flutter-layout

【解决方案1】：

可能是一个昂贵的解决方案，但您可以使用ClipRRect。像这样的：

Widget build(BuildContext context) {
    return Center(
      child: ClipRRect(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(30),
          topRight: Radius.circular(30),
          bottomRight: Radius.circular(30),
          bottomLeft: Radius.circular(30),
        ),
        child: Align(
          alignment: Alignment.bottomRight,
          heightFactor: 0.3,
          widthFactor: 2.5,
          child: GoogleMap(),
        ),
      ),
    );
  }

【讨论】：

如果您对答案感到满意，您应该将其标记为正确并投票，谢谢
嗯，这样做似乎对我不起作用。我还剩下一个矩形的谷歌地图
目前IOS似乎存在一个不允许剪辑的bug。见以下报道issue
除裁剪以外的任何其他方式，因为它会消耗 GPU

【解决方案2】：

请记住，google_maps_flutter 插件只是开发者预览版。我敢肯定，在他们发布 1.0 版之前，还会有更多的工作要做。所以不要过分强调缺少的功能。归档票据。 :)

【讨论】：