Flutter: Transparent child with fill parent's background color

Question

I am just trying to display the camera's preview and align the user to take a selfie.

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.

but the problem that I am facing, if I set the SVG with transparent color, it will display the color of the parent (container),

I need to make the person's image totally transparent to see the camera's preview with filling the surrounding area with color.

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(
                          "Take a selfie",
                          style: Theme.of(context).textTheme.subtitle2,
                        ),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.symmetric(
                        horizontal: MediaQuery.of(context).size.width * 0.05,
                      ),
                      child: Text(
                        "Take a quick selfie so we know it's you, this is never public",
                        style: Theme.of(context).textTheme.subtitle2,
                        overflow: TextOverflow.ellipsis,
                        maxLines: 3,
                        textAlign: TextAlign.center,
                      ),
                    ),
                    Expanded(
                      child: Align(
                        alignment: Alignment.bottomCenter,
                        child: _captureButton(),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );

Solution

I don't understand your question well, but i think you should try Opacity class .. wrap your SVG with Opacity

You can check it :

https://api.flutter.dev/flutter/widgets/Opacity-class.html

Comments

[Roberto]

Maybe you can try to make a new image, that you cut the silhouette of the person in the front the square and the silhouette is empty. Your image would be the gray part no the white part that you have now.

[Ahmed Mehanna]

That's a good idea, I will do it If I didn't find any solution with Flutter

[Ahmed Mehanna]

If I used Opacity with the SVG, I will see the Container's background-color, but I want to see what behind the whole Container (The camera's preview)

[ElsayedDev]

If you removed a container and the background Grey color . U see the camera carefully?

[Ahmed Mehanna]

yeah, I see the camera's preview, even through the Container's background-color because of the Opacity

[ElsayedDev]

Can you provide an image after using Opacity Svg ??