title: Flutter: Transparent child with fill parent's background color
body: <p>I am just trying to display the camera's preview and align the user to take a selfie.</p>
  <p>I have the following snippet of code and I would like to make the person's image transparent (not white) and fill the surrounding area with color.</p>
  <p>but the problem that I am facing, if I set the SVG with transparent color, it will display the color of the parent (container),</p>
  <p>I need to make the person's image totally transparent to see the camera's preview with filling the surrounding area with color.</p>
  <pre><code>Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: Stack(
            children: [
              Container(
                height: MediaQuery.of(context).size.height,
                child: Center(
                  child: _cameraPreviewWidget(),
                ),
              ),
              Container(
                height: MediaQuery.of(context).size.height,
                color: Colors.grey[700].withOpacity(0.8),
                child: Align(
                  alignment: Alignment.bottomCenter,
                  child: SvgPicture.asset(
                    'assets/svg/selfie_person.svg',
                    alignment: Alignment.bottomCenter,
                    fit: BoxFit.cover,
                    color: Colors.white,
                  ),
                ),
              ),
              Container(
                height: MediaQuery.of(context).size.height,
                child: Padding(
                  padding: EdgeInsets.only(
                    top: MediaQuery.of(context).size.height * 0.05,
                    bottom: MediaQuery.of(context).size.height * 0.15,
                  ),
                  child: Column(
                    children: [
                      ListTile(
                        leading: InkWell(
                          onTap: () {
                            Navigator.pop(context, null);
                          },
                          child: FaIcon(
                            FontAwesomeIcons.arrowLeft,
                            color: Colors.white,
                          ),
                        ),
                        title: Center(
                          child: Text(
                            &quot;Take a selfie&quot;,
                            style: Theme.of(context).textTheme.subtitle2,
                          ),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.symmetric(
                          horizontal: MediaQuery.of(context).size.width * 0.05,
                        ),
                        child: Text(
                          &quot;Take a quick selfie so we know it's you, this is never public&quot;,
                          style: Theme.of(context).textTheme.subtitle2,
                          overflow: TextOverflow.ellipsis,
                          maxLines: 3,
                          textAlign: TextAlign.center,
                        ),
                      ),
                      Expanded(
                        child: Align(
                          alignment: Alignment.bottomCenter,
                          child: _captureButton(),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      );
  </code></pre>
  <p><a href="https://i.stack.imgur.com/lEycL.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lEycL.jpg" alt="selfie photo screen" /></a></p>