How to cut through an Opacity Widget in flutter?

I want to remove opacity from the center of a container to make the picture below it to be visible.

What I want:

What I tried:

Code I Tried:

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class AppFour extends StatefulWidget {
  @override
  _AppFourState createState() => _AppFourState();
}

class _AppFourState extends State<AppFour> {
  String img = 'https://images.unsplash.com/photo-1513279922550-250c2129b13a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            height: MediaQuery.of(context).size.height,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage('$img'),
                fit: BoxFit.cover,
              ),
            ),
          ),
          Opacity(
            opacity: 0.5,
            child: Container(
              color: Colors.white,
            ),
          ),
          Center(
            child: Container(
              height: MediaQuery.of(context).size.height / 1.5,
              width: MediaQuery.of(context).size.width / 1.5,
              decoration: BoxDecoration(
                color: Colors.transparent,
                image: DecorationImage(
                    image: NetworkImage('$img'),
                    fit: BoxFit.fitHeight),
                borderRadius: BorderRadius.circular(5.0),
                border: Border.all(
                  color: Colors.white,
                  width: 2.0,
                ),
                boxShadow: [
                  BoxShadow(
                      color: Colors.black,
                      offset: Offset(0.0, 0.0),
                      blurRadius: 10.0)
                ],
              ),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.grey[800],
        child: Transform.rotate(
          angle: 45,
          child: Icon(FontAwesomeIcons.syncAlt),
        ),
        onPressed: () {},
      ),
    );
  }
}

Solution

I've modified your code to have the effect of the image that you gave as an example:

Screenshot

Code

String img = 'https://images.unsplash.com/photo-1513279922550-250c2129b13a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80';
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      children: <Widget>[
        Container(
          height: MediaQuery.of(context).size.height,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage('$img'),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Opacity(
          opacity: 0.5,
          child: Container(
            color: Colors.white,
          ),
        ),
        Center(
          child: Container(
            decoration: BoxDecoration(
              color: Colors.transparent,
              borderRadius: BorderRadius.circular(5.0),
              border: Border.all(
                color: Colors.white,
                width: 5.0,
              ),
              boxShadow: [
                BoxShadow(
                  color: Colors.black,
                  offset: Offset(0.0, 0.0),
                  blurRadius: 10.0
                )
              ],
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(5.0),
              child: Align(
                alignment: Alignment.center,
                widthFactor: 0.75,
                heightFactor: 0.75,
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.transparent,
                    image: DecorationImage(
                      image: NetworkImage('$img'),
                      fit: BoxFit.fitHeight
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ],
    ),
    floatingActionButton: FloatingActionButton(
      backgroundColor: Colors.grey[800],
      child: Transform.rotate(
        angle: 45,
        child: Icon(FontAwesomeIcons.syncAlt),
      ),
      onPressed: () {},
    ),
  );
}