[英]Custom flutter widget shape
I'm attempting to build the following layout in Flutter. 我正在尝试在Flutter中构建以下布局。
I'm looking to achieve 2 things: 我想要实现两件事:
Any ideas? 有任何想法吗?
There are multiple ways you could do this. 有多种方法可以做到这一点。 One would be to use a CustomPainter to use it as the background and have it draw the pink + picture. 一种方法是使用CustomPainter将其用作背景并让它绘制粉红色+图片。
Another way would be to use a stack, something like this: 另一种方法是使用堆栈,如下所示:
container (with pink background)
-> stack
-> picture, clipped
-> text, etc
You'd lay out the text however you normally would, and you'd align the picture to the right and define a ClipPath that clipped it as you want it. 您可以按照惯例布置文本,然后将图片右对齐并定义一个ClipPath ,可以根据需要剪切它。
To make the text wrap, put it within a ConstrainedBox or SizedBox and make sure it's set to wrap (softwrap property I believe). 要进行文本换行,将其放在ConstrainedBox或SizedBox中 ,并确保将其设置为wrap(我认为是softwrap属性)。
Here is my code: 这是我的代码:
Stack(
children: <Widget>[
Pic(),
Info(),
],
)
For widget Pic: 对于小部件Pic:
Container(
decoration: BoxDecoration(
image: DecorationImage(
alignment: Alignment.centerRight,
fit: BoxFit.fitHeight,
image: NetworkImage(
'https://media.sproutsocial.com/uploads/2014/02/Facebook-Campaign-Article-Main-Image2.png'),
),
),
)
For widget Info: 对于小部件信息:
ClipPath(
clipper: TrapeziumClipper(),
child: Container(
color: Colors.white,
padding: EdgeInsets.all(8.0),
width: MediaQuery.of(context).size.width * 3/5,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ConstrainedBox(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 6/15
),
child: Text(
'Testing clipping with soft wrap',
softWrap: true,
style: Theme.of(context).textTheme.title,
),
),
],
),
),
)
For TrapeziumClipper: 对于TrapeziumClipper:
class TrapeziumClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final path = Path();
path.lineTo(size.width * 2/3, 0.0);
path.lineTo(size.width, size.height);
path.lineTo(0.0, size.height);
path.close();
return path;
}
@override
bool shouldReclip(TrapeziumClipper oldClipper) => false;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.