[英]How does one put a Flutter BoxDecoration gradient over a BoxDecoration image?
我希望达到的目标：
我尝试了一个带有两个堆叠 BackdropFilter 的容器，但这似乎不起作用。
class HomePage extends StatelessWidget {
// Color gradientStart = Colors.transparent;
// Color gradientEnd = Colors.black;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [gradientStart, gradientEnd],
begin: FractionalOffset(0, 0),
end: FractionalOffset(0, 1),
stops: [0.0, 1.0],
tileMode: TileMode.clamp
),
// child: BackdropFilter()
// image: DecorationImage(
// image: ExactAssetImage('assets/images/screen-1.jpg'),
// fit: BoxFit.cover,
// ),
),
child: Column(
children: [
Expanded(
child: Container(
child: Align(
alignment: FractionalOffset(0.5, 0.0),
child: Container(
margin: EdgeInsets.only(top: 110.0),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey[600],
blurRadius:
20.0, // has the effect of softening the shadow
spreadRadius:
0, // has the effect of extending the shadow
// offset: Offset(
// 10.0, // horizontal, move right 10
// 10.0, // vertical, move down 10
// ),
)
],
),
child: Image.asset('assets/images/Medtrics_Icon.png',
width: 70),
),
),
),
flex: 1,
),
Expanded(
child: Container(
margin: EdgeInsets.only(bottom: 10.0),
child: Text(
'Explore New Job Opportunities',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.white),
textAlign: TextAlign.center,
)),
flex: 0,
),
Expanded(
child: Container(
margin: EdgeInsets.only(bottom: 28.0),
child: Text(
'We do all the best for your future endeavors by providing the connections you need during your job seeking process.',
style: TextStyle(fontSize: 16.0, color: Colors.white),
textAlign: TextAlign.center,
),
padding: EdgeInsets.symmetric(vertical: 18.0),
constraints: BoxConstraints(
maxWidth: 330.0,
),
),
flex: 0,
),
Expanded(
child: ButtonTheme(
minWidth: 320.0,
height: 50.0,
child: RaisedButton(
onPressed: () {},
textColor: Colors.blueAccent,
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)
),
child: Container(
child: Text(
'Sign Up',
style: TextStyle(
fontSize: 16, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),
),
),
flex: 0,
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(20),
child: ButtonTheme(
minWidth: 320.0,
height: 50.0,
child: RaisedButton(
onPressed: () {},
textColor: Colors.white,
color: Colors.blueAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)
),
child: Container(
child: Text(
'Continue with Google',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
),
),
),
),
flex: 0,
),
Expanded(
child: Container(
margin: EdgeInsets.only(bottom: 40.0),
child: ButtonTheme(
minWidth: 200.0,
height: 50.0,
child: FlatButton(
onPressed: () {
Navigator.pushNamed(context, '/signup');
},
textColor: Colors.white,
child: Container(
child: Text(
'Log In',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold
),
textAlign: TextAlign.center,
),
),
),
),
),
flex: 0,
),
],
),
),
);
}
}
苹果手机 iPad
我试图用于背景的图像https://i.imgur.com/jWOE61B.jpg
任何帮助表示赞赏🙂
class HomePage extends StatelessWidget {
Color gradientStart = Colors.transparent;
Color gradientEnd = Colors.black;
@override
Widget build(BuildContext context) {
return Material(
child: Stack(
children: <Widget>[
ShaderMask(
shaderCallback: (rect) {
return LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [gradientStart, gradientEnd],
).createShader(Rect.fromLTRB(0, -140, rect.width, rect.height-20));
},
blendMode: BlendMode.darken,
child: Container(
decoration: BoxDecoration(
// gradient: LinearGradient(
// colors: [gradientStart, gradientEnd],
// begin: FractionalOffset(0, 0),
// end: FractionalOffset(0, 1),
// stops: [0.0, 1.0],
// tileMode: TileMode.clamp
// ),
image: DecorationImage(
image: ExactAssetImage('assets/images/screen-1.jpg'),
fit: BoxFit.cover,
),
),
),
),
Column(
children: [
Expanded(
child: Container(
child: Align(
alignment: FractionalOffset(0.5, 0.0),
child: Container(
margin: EdgeInsets.only(top: 110.0),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey[600],
blurRadius:
20.0, // has the effect of softening the shadow
spreadRadius:
0, // has the effect of extending the shadow
// offset: Offset(
// 10.0, // horizontal, move right 10
// 10.0, // vertical, move down 10
// ),
)
],
),
child: Image.asset('assets/images/Medtrics_Icon.png',
width: 70),
),
),
),
flex: 1,
),
Expanded(
child: Container(
margin: EdgeInsets.only(bottom: 10.0),
child: Text(
'Explore New Job Opportunities',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.white),
textAlign: TextAlign.center,
)),
flex: 0,
),
Expanded(
child: Container(
margin: EdgeInsets.only(bottom: 28.0),
child: Text(
'We do all the best for your future endeavors by providing the connections you need during your job seeking process.',
style: TextStyle(fontSize: 16.0, color: Colors.white),
textAlign: TextAlign.center,
),
padding: EdgeInsets.symmetric(vertical: 18.0),
constraints: BoxConstraints(
maxWidth: 330.0,
),
),
flex: 0,
),
Expanded(
child: ButtonTheme(
minWidth: 320.0,
height: 50.0,
child: RaisedButton(
onPressed: () {},
textColor: Colors.blueAccent,
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)
),
child: Container(
child: Text(
'Sign Up',
style: TextStyle(
fontSize: 16, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),
),
),
flex: 0,
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(20),
child: ButtonTheme(
minWidth: 320.0,
height: 50.0,
child: RaisedButton(
onPressed: () {},
textColor: Colors.white,
color: Colors.blueAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)
),
child: Container(
child: Text(
'Continue with Google',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
),
),
),
),
flex: 0,
),
Expanded(
child: Container(
margin: EdgeInsets.only(bottom: 20.0),
child: ButtonTheme(
minWidth: 200.0,
height: 50.0,
child: FlatButton(
onPressed: () {
Navigator.pushNamed(context, '/signup');
},
textColor: Colors.white,
child: Container(
child: Text(
'Log In',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold
),
textAlign: TextAlign.center,
),
),
),
),
),
flex: 0,
),
],
),
]
),
);
}
}
iPhone X
如何在flutter BoxDecoration中显示来自.network的图片？
[英]How to show image from network in flutter BoxDecoration?
如何调整位于 BoxDecoration flutter 中的图像的大小？
[英]How to resize an image that is possitioned in a BoxDecoration flutter?
Flutter - 有什么方法可以将渐变颜色应用于 BoxDecoration 中的图像？
[英]Flutter - Is there any way to apply a gradient color to an image in a BoxDecoration?
如何将 boxdecoration 的水平列表视图放在另一个 boxdecoration 下？
[英]How do i put a horizontal listview of boxdecoration under another boxdecoration?
flutter ImageAsset图像延伸到BoxDecoration容器外部
[英]flutter ImageAsset Image extending outside BoxDecoration container
Flutter - 如何在 BoxDecoration 中创建变量 colors
[英]Flutter - How to create variable colors in BoxDecoration
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.