如何在Flutter中为Google地图添加边框半径?

a7m*_*za8 5 google-maps flutter flutter-layout

在此处输入图片说明

我将google map小部件添加到具有边框半径的容器中,但google map角未圆化。

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(),)
Run Code Online (Sandbox Code Playgroud)

flu*_*ter 20

可能是一个昂贵的解决方案,但您可以使用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(),
        ),
      ),
    );
  }
Run Code Online (Sandbox Code Playgroud)

  • 嗯,这样做似乎对我不起作用。我还剩下一个长方形的谷歌地图 (2认同)