[英]Flutter container write text over background image
I want to make a design like following我想做一个像下面这样的设计
I build the base layout with background image.我用背景图像构建基本布局。 Following is the code to achieve that.以下是实现这一目标的代码。 Now i want to put "Grocery store" Text on top of this image and other widgets.现在我想把“杂货店”文本放在这张图片和其他小部件的顶部。 How can i do that?我怎样才能做到这一点?
Widget build(BuildContext context) {
return Container(
height: 190.0,
width: size.width,
margin: const EdgeInsets.symmetric(
horizontal: 16.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Expanded(
child: Container(
width: size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(11.0),
image: DecorationImage(
image: NetworkImage(https://www.exampledomain.com/images/background.jpg),
fit: BoxFit.cover,
),
),
// child: ????
),
),
],
),
),
],
),
);}
Stack
/ Align
is your friend. Stack
/ Align
是你的朋友。
Take a look here https://api.flutter.dev/flutter/widgets/Stack-class.html看看这里https://api.flutter.dev/flutter/widgets/Stack-class.html
Here is a basic example (based in your code):这是一个基本示例(基于您的代码):
Widget build(BuildContext context) {
return Stack(
children: [
Align(
alignment: Alignment.center,
child: Container(
alignment: Alignment.center,
color: Colors.red,
height: 190.0,
width: size.width,
margin: const EdgeInsets.symmetric(
horizontal: 16.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Expanded(
child: Container(
width: size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(11.0),
image: DecorationImage(
image: NetworkImage(
"http://www.exampledomain.com/images/background.jpg"),
//fit: BoxFit.cover,
),
),
),
),
],
),
),
],
),
),
),
Align(
alignment: Alignment.center,
child: Text("Grocery store"))
]
);
}
child: Container(
width: size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(11.0),
image: DecorationImage(
image: NetworkImage(https://www.exampledomain.com/images/background.jpg),
fit: BoxFit.cover,
),
),
child: Text('Grocery store'),
//padding: <-- Using to shift text position a little bit for your requirement
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.