[英]Unable to get the desired result using BackDropFilter in Flutter
現在有幾次我在 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, ), ], ), ), ) ], ),
嘗試這個
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)),
);
}
}
看起來像這樣
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.