CODEWITHSUNDEEP
google-mapsflutterflutter-layout
a7me63azza8
a7me63azza8

Reputation: 487

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(),)

Upvotes: 26

Views: 12659

Answers (3)

Em.MF
Em.MF

Reputation: 323

Padding(
  padding: EdgeInsets.all(20.sp),
  child: SizedBox(
    width: 100.w,
    height: 30.h,
    child: ClipRRect(
      borderRadius: BorderRadius.all(Radius.circular(30)),
      child: GoogleMap(),
    ),
  )
),

Upvotes: 2

Randal Schwartz
Randal Schwartz

Reputation: 44056

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. :)

Upvotes: 3

flutter
flutter

Reputation: 6766

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(),
        ),
      ),
    );
  }

Upvotes: 54

Related Questions