在 Flutter 中使用 BackDropFilter 无法获得所需的结果

Question

现在有几次我在 Flutter 中玩过 BackDropFilter() ，看起来我似乎无法思考它是如何工作的，或者我觉得我没有我应该拥有的力量，哈哈。 请你给我指明正确的方向好吗？

我只想要容器上的背景，但相反，它超越了容器到封面图像。

这张图片包含我想要的

虽然这是我得到的

 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

尝试这个

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)),
    );
  }
}

看起来像这样