Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to add border radius to google maps in flutter?

enter image description here

I added a google map widget into a container with a border radius but google maps corners not rounded .

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(),)
like image 455
a7me63azza8 Avatar asked Dec 29 '18 19:12

a7me63azza8


Video Answer


2 Answers

probably an expensive solution but you could use ClipRRect. Something like this:

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(),
        ),
      ),
    );
  }
like image 175
flutter Avatar answered Oct 08 '22 07:10

flutter


Keep in mind that the google_maps_flutter plugin is only a developer preview. I'm sure a lot more work will be added to this before they release version 1.0. So don't stress too much about missing features. File tickets. :)

like image 3
Randal Schwartz Avatar answered Oct 08 '22 07:10

Randal Schwartz