I have a camera view that must be overlayed with 0.5 black opacity. But on the midle I need square hole. Like this:

First idea is to create custom widget with CustomPainter. But I want first ask here, maybe exists easier ways.

CodePudding user response：

You can use like this.

Stack(
children: [
      Container(height: double.infinity,
                width: double.infinity,
                color:Colors.grey,),
      Center(
        child: Image.network('https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bGVuc3xlbnwwfHwwfHw=&w=1000&q=80',
               height: 250, /// HERE please ignore height and width 
               width: 250,)),
    ],)

And You Get Like This.

CodePudding user response：

inside image widget use property "fit BoxFit.fitHeight"

Image.asset( "asdas.png",fit: BoxFit.fitHeight,)

CodePudding user response：

I created class that extends CustomPainter

class OverlayPainter extends CustomPainter {
  Color overlayColor;
  Color borderColor;
  Size _size = const Size(0, 0);

  Size get size => _size;
  Rect holeRect;
  double cornerRadius;

  OverlayPainter({
    this.cornerRadius = 5,
    this.holeRect = const Rect.fromLTRB(20, 20, 20, 20),
    this.overlayColor = const Color(0x88000000),
    this.borderColor = const Color(0xFFFF5555),
  });

@override
 void paint(Canvas canvas, Size size) {
   _size = size;
   var paint = Paint()..color = overlayColor;

   var path = Path()
    ..moveTo(0, 0)
    ..lineTo(size.width, 0)
    ..lineTo(size.width, size.height)
    ..lineTo(0, size.height)
    ..lineTo(0, 0)

    /// Hole rectangle
    ..moveTo(holeRect.left, holeRect.top   cornerRadius)
    ..lineTo(holeRect.left, holeRect.height - cornerRadius)
    // Curved left-bottom corner
    ..quadraticBezierTo(holeRect.left, holeRect.height,
       holeRect.left   cornerRadius, holeRect.height)
    ..lineTo(holeRect.width - (cornerRadius), holeRect.height)
    // Curved right bottom corner
    ..quadraticBezierTo(holeRect.width, holeRect.height, holeRect.width,
       holeRect.height - cornerRadius)
    ..lineTo(holeRect.width, holeRect.top   cornerRadius)
    // Curved right top corner
    ..quadraticBezierTo(holeRect.width, holeRect.top,
        holeRect.width - cornerRadius, holeRect.top)
    ..lineTo(holeRect.left   cornerRadius, holeRect.top)
    // Curved left top corner
    ..quadraticBezierTo(holeRect.left, holeRect.top, holeRect.left,
        holeRect.top   cornerRadius)
    ..close();

    canvas.drawPath(path, paint);
 }
}