iOS Corner Radius

[zgosalvez]

Attempting to clip using a border-radius does not work on iOS. I guess the only way to do so is by having the plugin expose the iOS's MKMapView.layer.cornerRadius as a property.

Card(
  margin: EdgeInsets.all(2.0),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(4.0),
  ),
  clipBehavior: Clip.antiAlias,
  color: Colors.black.withOpacity(0.35),
  child: Container(
    height: 200,
    child: PlatformMap(
      initialCameraPosition: CameraPosition(
        target: const LatLng(47.6, 8.8796),
        zoom: 16.0,
      ),
      markers: Set<Marker>.of(
        [
          Marker(
            markerId: MarkerId('marker_1'),
            position: LatLng(47.6, 8.8796),
            consumeTapEvents: true,
            infoWindow: InfoWindow(
              title: 'PlatformMarker',
              snippet: "Hi I'm a Platform Marker",
            ),
            onTap: () {
              print("Marker tapped");
            },
          ),
        ],
      ),
      onTap: (location) => print('onTap: $location'),
      onCameraMove: (cameraUpdate) => print('onCameraMove: $cameraUpdate'),
      compassEnabled: true,
      onMapCreated: (controller) {
        Future.delayed(Duration(seconds: 2)).then(
          (_) {
            controller.animateCamera(
              CameraUpdate.newCameraPosition(
                const CameraPosition(
                  bearing: 270.0,
                  target: LatLng(51.5160895, -0.1294527),
                  tilt: 30.0,
                  zoom: 18,
                ),
              ),
            );
          },
        );
      },
    ),
  ),
);

[LuisThein]

Hey, I'm not sure why this isn't working, as the UiKitView actually supports clipping.

Try this:

        Card(
            margin: EdgeInsets.all(2.0),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(4.0),
            ),
            clipBehavior: Clip.antiAlias,
            color: Colors.black.withOpacity(0.35),
            child: Container(
              height: 200,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(4.0),
                child: PlatformMap(
                  onMapCreated: _onMapCreated,
                  initialCameraPosition: const CameraPosition(
                    target: LatLng(0.0, 0.0),
                  ),
                ),
              ),
            ),
          ),

As far as I can tell it should not be the plugins fault to not clip any border Radius and you could maybe open an issue in the official Flutter repository.

[zgosalvez]

Thanks, @LuisThein. We tried this and it does work. 👏🏼