[英]Custom Shape in Flutter
I'm trying to draw a shape like this with some text and data in it.我正在尝试绘制这样的形状,其中包含一些文本和数据。
I am using CustomPaint for this我为此使用 CustomPaint
CustomPaint(
painter: new RightBox(context),
child: container()
),
Container container() {
return Container(
height: 200,
width: 200,
color: Colors.black,
margin: EdgeInsets.only(left: 20),
child: Center(child: Text("Hi Khushal",
style: TextStyle(
color: Colors.white
),
),)
);
}
class RightBox extends CustomPainter {
RightBox(this.context);
BuildContext context;
@override
void paint(Canvas canvas, Size size) {
size = MediaQuery.of(context).size;
Paint paint = Paint()
..color = Colors.black;
Path path = Path()
..moveTo(size.width * 0.02 + size.width * 0.5, size.height * 0.85)
..lineTo(size.width * 0.05 + size.width * 0.5, size.height * 0.70)
..lineTo(size.width * 0.45 + size.width * 0.5, size.height * 0.67)
..lineTo(size.width * 0.48 + size.width * 0.5, size.height * 0.85);
path.close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(RightBox oldDelegate) {
return true;
}
}
I want the text to be shown in the bottom right CustomPaint Widget, I am passing a child Container to the CustomPaint but instead, I'm getting a widget positioned separately in the stack.我希望文本显示在右下角的 CustomPaint 小部件中,我将一个子容器传递给 CustomPaint,但相反,我在堆栈中单独放置了一个小部件。 I know I'm doing something wrong, please help me achieve the UI.
我知道我做错了什么,请帮助我实现 UI。
Your painter
is taking the full size of the screen.您的
painter
正在占用屏幕的全尺寸。 Hence, you need to align
the container
to put it inside the painter.因此,您需要
align
container
以将其放入画家内部。 Here is one way to do it.这是一种方法。 There are several ways to do it.
有几种方法可以做到。
You put your container
and painter
inside a stack
widget.您将
container
和painter
放在stack
小部件中。 Align
the container
according to your needs.根据您的需要
Align
container
。 Make sure to give a few padding
and margin
to get a more accurate result.确保提供一些
padding
和margin
以获得更准确的结果。
Stack(
children: <Widget>[
Align(
alignment: Alignment.bottomRight,
child: Container(
height: 200,
width: 200,
alignment: Alignment.bottomRight,
child: Center(
child: Text(
"Hi Khushal",
style: TextStyle(color: Colors.black),
),
)),
),
CustomPaint(
painter: RightBox(context),
),
],
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.