How to display FlutterMap inside custom shape image without black background?

I’m building a Flutter app where I want to show a FlutterMap inside a custom PNG shape (similar to a masked frame).

My goal:

Display FlutterMap only inside a custom shape image

Outside area should remain white

No black background

No crashes

Shape should act like a mask

In this shape i want to show map without black background

I want to No black background

I tried using WidgetMask with BlendMode.dstIn:

WidgetMask(
  blendMode: BlendMode.dstIn,
  mask: Image.asset('assets/shape.png', fit: BoxFit.cover),
  child: FlutterMap(...)
)
1
Feb 13 at 5:29 AM
User AvatarShiv Sharma
#android#ios#flutter#widget#overlay

Accepted Answer

You have to convert that to a Path in flutter and then by using ClipPath widget you can clip the Map or any other widget in any shape you want. like this

return Scaffold(
    backgroundColor: Colors.white,
    body: SizedBox(
      height: double.infinity,
      width: double.infinity,
      child: ClipPath(
        clipper: CustomClipPath(),
        child: FlutterMap(children: []), // your map widget
      ),
    ),
  );

Here is the CustomClipPath class which CustomClipper and return a star shape(you have to return you desired shape from the getPath function)

class CustomClipPath extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final int corners = 4;
    var path = Path();
    var halfWidth = size.width / 2;
    var halfHeight = size.height / 2;
    var radius = halfWidth;
    var innerRadius = halfWidth / 2.5;

    var step = (pi * 2) / corners;
    var halfStep = step / 2;
    var startAngle = -pi / 2;

    path.moveTo(
      halfWidth + cos(startAngle) * radius,
      halfHeight + sin(startAngle) * radius,
    );

    for (int i = 1; i <= corners; i++) {
      var x = halfWidth + cos(startAngle + (step * i) - halfStep) * innerRadius;
      var y =
          halfHeight + sin(startAngle + (step * i) - halfStep) * innerRadius;
      path.lineTo(x, y);

      x = halfWidth + cos(startAngle + (step * i)) * radius;
      y = halfHeight + sin(startAngle + (step * i)) * radius;
      path.lineTo(x, y);
    }

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}

you will get results something like this:

enter image description here

For you specific path you can use this Clipperclass

class CustomPathClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path_0 = Path();
    path_0.moveTo(34.78, 24.14);
    path_0.cubicTo(
      41.010000000000005,
      19.78,
      56.42,
      9.940000000000001,
      79.78,
      5.140000000000001,
    );
    path_0.cubicTo(
      96.29,
      1.7500000000000004,
      109.45,
      2.880000000000001,
      135.78,
      5.140000000000001,
    );
    path_0.cubicTo(170.69, 8.14, 191.5, 14.65, 204.78, 11.14);
    path_0.cubicTo(206.26, 10.75, 210.85, 9.38, 215.78, 11.14);
    path_0.cubicTo(220.07, 12.67, 222.15, 15.690000000000001, 225.78, 20.14);
    path_0.cubicTo(234.12, 30.380000000000003, 238.29, 35.5, 242.78, 37.14);
    path_0.cubicTo(250.05, 39.8, 257.87, 36.58, 263.78, 34.14);
    path_0.cubicTo(
      273.42999999999995,
      30.16,
      273.86999999999995,
      26.22,
      280.78,
      25.14,
    );
    path_0.cubicTo(
      286.92999999999995,
      24.18,
      290.41999999999996,
      26.69,
      299.78,
      30.14,
    );
    path_0.cubicTo(299.78, 30.14, 313.09999999999997, 35.05, 327.78, 37.14);
    path_0.cubicTo(339.98999999999995, 38.88, 353.82, 40.84, 363.78, 33.14);
    path_0.cubicTo(
      370.66999999999996,
      27.82,
      367.96999999999997,
      23.85,
      374.78,
      18.14,
    );
    path_0.cubicTo(383.82, 10.56, 390.58, 15.860000000000001, 412.78, 11.14);
    path_0.cubicTo(
      425.80999999999995,
      8.370000000000001,
      430.41999999999996,
      5.07,
      444.78,
      4.140000000000001,
    );
    path_0.cubicTo(
      456.82,
      3.3600000000000003,
      460.08,
      5.260000000000001,
      461.78,
      7.140000000000001,
    );
    path_0.cubicTo(466.38, 12.21, 463.66999999999996, 21.58, 460.78, 31.14);
    path_0.cubicTo(
      454.40999999999997,
      52.2,
      444.67999999999995,
      61.53,
      447.78,
      65.14,
    );
    path_0.cubicTo(450.46, 68.26, 460.64, 64.66, 467.78, 62.14);
    path_0.cubicTo(477.27, 58.79, 479.01, 56.09, 482.78, 57.14);
    path_0.cubicTo(490.89, 59.39, 493.39, 74.75, 493.78, 77.14);
    path_0.cubicTo(
      495.61999999999995,
      88.45,
      491.67999999999995,
      91.99,
      494.78,
      99.14,
    );
    path_0.cubicTo(
      497.04999999999995,
      104.38,
      500.22999999999996,
      104.93,
      509.78,
      112.14,
    );
    path_0.cubicTo(521.31, 120.85, 528.74, 129.15, 536.78, 138.14);
    path_0.cubicTo(544.6, 146.88, 548.51, 151.25, 550.78, 156.14);
    path_0.cubicTo(
      556.4399999999999,
      168.32,
      555.1,
      179.79999999999998,
      553.78,
      191.14,
    );
    path_0.cubicTo(552.3199999999999, 203.67, 550.6, 218.42, 541.78, 234.14);
    path_0.cubicTo(538.17, 240.57, 534.5, 245.14999999999998, 535.78, 251.14);
    path_0.cubicTo(536.88, 256.31, 541.03, 259.47999999999996, 549.78, 265.14);
    path_0.cubicTo(
      570.4499999999999,
      278.51,
      574.7099999999999,
      278.55,
      580.78,
      284.14,
    );
    path_0.cubicTo(
      588.9599999999999,
      291.65999999999997,
      591.1,
      300.65999999999997,
      594.78,
      316.14,
    );
    path_0.cubicTo(598.54, 331.96, 603.74, 353.83, 593.78, 378.14);
    path_0.cubicTo(585.24, 398.97999999999996, 570.12, 410.45, 563.78, 415.14);
    path_0.cubicTo(552.52, 423.46, 542.12, 426.8, 521.78, 433.14);
    path_0.cubicTo(
      493.96999999999997,
      441.81,
      462.85999999999996,
      447.83,
      445.78,
      451.14,
    );
    path_0.cubicTo(435.57, 453.12, 428.91999999999996, 454.25, 419.78, 458.14);
    path_0.cubicTo(408.53, 462.93, 406.39, 466.40999999999997, 387.78, 477.14);
    path_0.cubicTo(
      379.71999999999997,
      481.78999999999996,
      372.63,
      485.88,
      362.78,
      490.14,
    );
    path_0.cubicTo(353.2, 494.28, 345.27, 496.63, 329.78, 501.14);
    path_0.cubicTo(
      307.92999999999995,
      507.51,
      310.35999999999996,
      505.74,
      296.78,
      510.14,
    );
    path_0.cubicTo(
      271.86999999999995,
      518.22,
      273.29999999999995,
      521.08,
      261.78,
      522.14,
    );
    path_0.cubicTo(
      256.64,
      522.61,
      251.54999999999998,
      522.49,
      248.77999999999997,
      526.14,
    );
    path_0.cubicTo(
      245.85999999999999,
      529.99,
      248.52999999999997,
      534.09,
      247.77999999999997,
      543.14,
    );
    path_0.cubicTo(
      247.45999999999998,
      547.04,
      246.74999999999997,
      555.51,
      241.77999999999997,
      561.14,
    );
    path_0.cubicTo(
      236.64999999999998,
      566.9399999999999,
      229.04999999999998,
      567.38,
      215.77999999999997,
      568.14,
    );
    path_0.cubicTo(
      204.32999999999998,
      568.8,
      196.2,
      569.26,
      186.77999999999997,
      565.14,
    );
    path_0.cubicTo(
      175.79999999999998,
      560.33,
      169.74999999999997,
      552.22,
      166.77999999999997,
      548.14,
    );
    path_0.cubicTo(
      156.82999999999998,
      534.46,
      151.65999999999997,
      514.5699999999999,
      154.77999999999997,
      496.14,
    );
    path_0.cubicTo(
      156.36999999999998,
      486.75,
      159.49999999999997,
      481.36,
      157.77999999999997,
      471.14,
    );
    path_0.cubicTo(
      157.18999999999997,
      467.64,
      155.84999999999997,
      459.68,
      149.77999999999997,
      453.14,
    );
    path_0.cubicTo(
      142.54999999999998,
      445.36,
      136.95999999999998,
      448.59,
      128.77999999999997,
      441.14,
    );
    path_0.cubicTo(
      122.97999999999998,
      435.86,
      117.00999999999998,
      426.24,
      118.77999999999997,
      417.14,
    );
    path_0.cubicTo(
      119.73999999999997,
      412.21999999999997,
      122.74999999999997,
      408.53,
      128.77999999999997,
      401.14,
    );
    path_0.cubicTo(
      135.22999999999996,
      393.24,
      137.34999999999997,
      393.25,
      137.77999999999997,
      390.14,
    );
    path_0.cubicTo(
      138.64,
      383.91999999999996,
      130.79999999999998,
      379.33,
      116.77999999999997,
      367.14,
    );
    path_0.cubicTo(
      104.83999999999997,
      356.76,
      108.66999999999997,
      358.47999999999996,
      94.77999999999997,
      346.14,
    );
    path_0.cubicTo(
      80.47999999999998,
      333.44,
      78.70999999999998,
      333.65999999999997,
      62.77999999999997,
      320.14,
    );
    path_0.cubicTo(
      45.13999999999997,
      305.18,
      37.989999999999974,
      297.01,
      32.77999999999997,
      290.14,
    );
    path_0.cubicTo(
      20.669999999999973,
      274.16999999999996,
      20.189999999999973,
      266.74,
      20.779999999999973,
      262.14,
    );
    path_0.cubicTo(
      21.49999999999997,
      256.51,
      24.619999999999973,
      248.72,
      30.779999999999973,
      246.14,
    );
    path_0.cubicTo(
      33.269999999999975,
      245.08999999999997,
      34.769999999999975,
      245.52999999999997,
      42.77999999999997,
      246.14,
    );
    path_0.cubicTo(
      54.409999999999975,
      247.02999999999997,
      60.229999999999976,
      247.48,
      61.77999999999997,
      246.14,
    );
    path_0.cubicTo(
      65.27999999999997,
      243.10999999999999,
      63.199999999999974,
      234.69,
      52.77999999999997,
      209.14,
    );
    path_0.cubicTo(
      44.89999999999997,
      189.82999999999998,
      40.95999999999997,
      180.17,
      34.77999999999997,
      168.14,
    );
    path_0.cubicTo(
      23.059999999999974,
      145.32,
      20.14999999999997,
      144.76999999999998,
      13.779999999999973,
      129.14,
    );
    path_0.cubicTo(
      9.719999999999974,
      119.16999999999999,
      5.1599999999999735,
      107.74999999999999,
      3.7799999999999727,
      92.13999999999999,
    );
    path_0.cubicTo(
      2.7399999999999727,
      80.44999999999999,
      1.3599999999999728,
      64.87999999999998,
      9.779999999999973,
      49.139999999999986,
    );
    path_0.cubicTo(
      16.199999999999974,
      37.12999999999999,
      25.229999999999972,
      30.819999999999986,
      34.77999999999997,
      24.139999999999986,
    );
    path_0.close();

    Paint paint_0_stroke =
        Paint()
          ..style = PaintingStyle.stroke
          ..strokeWidth = size.width * 0.009957845;
    paint_0_stroke.color = Color(0xff773d3d).withOpacity(1.0);
    return path_0;
  }

  @override
  bool shouldReclip(covariant oldDelegate) {
    return true;
  }
}

and you get results like this enter image description here

Note: I used this website to automatically convert the svg to path.

User AvatarMunsif Ali
Feb 13 at 6:01 AM
1