我有一个RegisterScreen,我有一个图像作为背景,在所述图像上,我想要一个具有玻璃形态效果的容器,但我的自定义GlassMorismContainer小部件不会附加到屏幕底部
class RegisterScreen extends StatelessWidget {
const RegisterScreen({super.key});
@override
Widget build(BuildContext context) {
return Container(
constraints: const BoxConstraints.expand(),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("lib/assets/images/rainforest_Placeholder.jpg"),
fit: BoxFit.cover)),
child: Stack(
children: [
Align(
alignment: Alignment.bottomCenter,
child: GlassmorphismContainer(
width: MediaQuery.of(context).size.width, height: 350),
),
],
),
);
}
}
class GlassmorphismContainer extends StatelessWidget {
final double width;
final double height;
final Widget? child;
const GlassmorphismContainer(
{super.key, required this.width, required this.height, this.child});
@override
Widget build(BuildContext context) {
if (child == null) {
return Stack(
children: <Widget>[
ConstrainedBox(
constraints: const BoxConstraints.expand(),
),
Center(
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: Container(
width: width,
height: height,
decoration: BoxDecoration(
color: Colors.grey.shade600.withOpacity(0.5)),
),
),
),
),
],
);
}
return Stack(
children: <Widget>[
ConstrainedBox(
constraints: const BoxConstraints.expand(),
),
Center(
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: Container(
width: width,
height: height,
decoration:
BoxDecoration(color: Colors.grey.shade600.withOpacity(0.5)),
child: child,
),
),
),
),
],
);
}
}
我已经try 过使用Column和MainAxisAlignment.end以及上面的方法和Stack和Align