Unable to get the desired result using BackDropFilter in Flutter

Question

For a couple of times now I've played around BackDropFilter() in Flutter and it looks like I can't seem to warp my head around how it works or maybe I feel I don't have the power I should have with it, lol. Can you put me in the right direction, please?

I want the backdrop only on the Container but instead, it goes beyond the Container to the cover image.

This image contains what I want

While this is what I get

Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ClipRRect(
            borderRadius: const BorderRadius.only(
              bottomLeft: Radius.circular(50),
              bottomRight: Radius.circular(50),
            ),
            child: Stack(
              children: [
                // Featured Image
                Hero(
                  tag: product.id,
                  child: Container(
                    height: size.height * 0.6,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        fit: BoxFit.cover,
                        image: CachedNetworkImageProvider(
                          product.featuredImage!,
                        ),
                      ),
                    ),
                  ),
                ),

                // App Bar
                SafeArea(
                  child: Padding(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 20,
                      vertical: 10,
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        // Back Button
                        MenuButton(
                          onTap: () => Navigator.pop(context),
                          padding: const EdgeInsets.all(12),
                          icon: Icon(
                            Platform.isAndroid
                                ? Ionicons.arrow_back
                                : CupertinoIcons.back,
                            color: Constants.iconColor,
                          ),
                        ),

                        // Add to fav button
                        MenuButton(
                          onTap: () {},
                          padding: const EdgeInsets.all(12),
                          icon: const Icon(
                            Ionicons.heart,
                            color: Constants.iconColor,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),

                Positioned(
                  bottom: 0,
                  child: Container(
                    color: const Color.fromARGB(189, 49, 49, 49),
                    height: size.height * 0.2,
                    width: size.width,
                    child: BackdropFilter(
                      filter: ImageFilter.blur(sigmaX: 3.5, sigmaY: 3.5),
                      child: Row(
                        children: [
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                product.title!,
                                style: Theme.of(context).textTheme.headline4,
                              ),
                              Text(
                                product.subtitle!,
                                style: Theme.of(context)
                                    .textTheme
                                    .headline5!
                                    .copyWith(
                                        fontSize: 16, color: Colors.white54),
                              ),

                              // Rate
                              Expanded(
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    const Icon(
                                      Ionicons.star,
                                      color: Constants.mainAppColor,
                                    ),
                                    const SizedBox(width: 12),
                                    Text(
                                      product.rate.toString(),
                                      style:
                                          Theme.of(context).textTheme.headline5,
                                    ),
                                    const SizedBox(width: 12),
                                    Text(
                                      '(${product.rate})',
                                      style: Theme.of(context)
                                          .textTheme
                                          .headline6!
                                          .copyWith(
                                              color: Colors.white54,
                                              fontSize: 15),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),

          SizedBox(height: size.height * 0.02),

          //
          Expanded(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "Description",
                    style: Theme.of(context).textTheme.headline6!.copyWith(
                        fontSize: 18, color: Colors.white.withOpacity(0.7)),
                  ),
                  SizedBox(height: size.height * 0.015),
                  RichText(
                    text: TextSpan(
                      children: [
                        TextSpan(text: '${product.description!}... '),
                        const TextSpan(
                          text: 'Read More',
                          style: TextStyle(color: Constants.mainAppColor),
                        ),
                      ],
                      style: Theme.of(context)
                          .textTheme
                          .headline6!
                          .copyWith(fontSize: 16),
                    ),
                    maxLines: 2,
                  ),
                ],
              ),
            ),
          )
        ],
      ),

Answer 1

Try this

import 'dart:io';
import 'dart:math';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  HomePage({Key? key}) : super(key: key);

  Product product = Product(
      id: "001",
      featuredImage:
          'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Cappuccino_at_Sightglass_Coffee.jpg/1280px-Cappuccino_at_Sightglass_Coffee.jpg',
      title: "Cappuccino",
      subtitle: "With Oat Milk",
      rate: "4.5");

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: Colors.black,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ClipRRect(
            borderRadius: const BorderRadius.only(
              bottomLeft: Radius.circular(50),
              bottomRight: Radius.circular(50),
            ),
            child: Stack(
              children: [
                // Featured Image
                Hero(
                  tag: product.id!,
                  child: Container(
                    height: size.height * 0.6,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        fit: BoxFit.cover,
                        image: CachedNetworkImageProvider(
                          product.featuredImage!,
                        ),
                      ),
                    ),
                  ),
                ),

                // App Bar
                SafeArea(
                  child: Padding(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 20,
                      vertical: 10,
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        // Back Button
                        MenuButton(
                          onTap: () => Navigator.pop(context),
                          padding: const EdgeInsets.all(12),
                          icon: Icon(
                            Platform.isAndroid
                                ? Icons.arrow_back
                                : CupertinoIcons.back,
                            color: Colors.white,
                          ),
                        ),

                        // Add to fav button
                        MenuButton(
                          onTap: () {},
                          padding: const EdgeInsets.all(12),
                          icon: const Icon(
                            Icons.favorite,
                            color: Colors.white,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),

                Positioned(
                  //top: size.height * 0.30,
                  bottom: 0,
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(50),
                    child: Container(
                      color: const Color.fromARGB(189, 49, 49, 49),
                      // color: Colors.green,
                      //height: size.height * 0.75,
                      padding: const EdgeInsets.all(20),
                      width: size.width,
                      child: Row(
                        children: [
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              const SizedBox(
                                height: 20,
                              ),
                              Text(
                                product.title!,
                                style: Theme.of(context)
                                    .textTheme
                                    .headline4!
                                    .copyWith(
                                        fontSize: 24, color: Colors.white),
                              ),
                              Text(
                                product.subtitle!,
                                style: Theme.of(context)
                                    .textTheme
                                    .headline5!
                                    .copyWith(
                                        fontSize: 16, color: Colors.white54),
                              ),
                              const SizedBox(
                                height: 20,
                              ),

                              // Rate
                              Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  const Icon(
                                    Icons.star,
                                    color: Colors.orangeAccent,
                                  ),
                                  const SizedBox(width: 12),
                                  Text(
                                    product.rate.toString(),
                                    style: Theme.of(context)
                                        .textTheme
                                        .headline5!
                                        .copyWith(
                                            color: Colors.white, fontSize: 15),
                                  ),
                                  const SizedBox(width: 12),
                                  Text(
                                    '(6.986)',
                                    style: Theme.of(context)
                                        .textTheme
                                        .headline6!
                                        .copyWith(
                                            color: Colors.white54,
                                            fontSize: 15),
                                  ),
                                ],
                              ),
                              const SizedBox(
                                height: 20,
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),

          SizedBox(height: size.height * 0.02),

          //
          Expanded(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "Description",
                    style: Theme.of(context).textTheme.headline6!.copyWith(
                        fontSize: 18, color: Colors.white.withOpacity(0.7)),
                  ),
                  SizedBox(height: size.height * 0.015),
                  RichText(
                    text: TextSpan(
                      children: [
                        TextSpan(
                          text: '${product.description!}... ',
                          style: const TextStyle(color: Colors.white),
                        ),
                        const TextSpan(
                          text: 'Read More',
                          style: TextStyle(color: Colors.orangeAccent),
                        ),
                      ],
                      style: Theme.of(context)
                          .textTheme
                          .headline6!
                          .copyWith(fontSize: 16),
                    ),
                    maxLines: 2,
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

class Product {
  String? id;
  String? featuredImage;
  String? subtitle;
  String? title;
  String? rate;
  String? description;

  Product(
      {this.id,
      this.featuredImage,
      this.title,
      this.rate,
      this.subtitle,
      this.description =
          "A Cappuccino is a coffee-based drink made primarily from espresso and "});
}

class MenuButton extends StatelessWidget {
  const MenuButton(
      {Key? key,
      required void Function() onTap,
      required EdgeInsets padding,
      required Icon icon})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(20.0),
      decoration: BoxDecoration(
          color: Colors.black, borderRadius: BorderRadius.circular(20.0)),
    );
  }
}

It looks like this