[英]How to create curved widget without using border-radius in flutter
I'm a beginner of flutter development.我是颤振开发的初学者。 I'm trying to create a curved widget using the border-radius component, but I'm not able to create an exact mockup screen.
我正在尝试使用 border-radius 组件创建一个弯曲的小部件,但我无法创建一个精确的模型屏幕。 Please guide me on how to draw the curved widget.
请指导我如何绘制弯曲的小部件。 Here I have attached my mockup sample.
在这里,我附上了我的样机样本。
Thanks in advance.提前致谢。
Here is an example how you can achieve it using CustomClipper
这是一个如何使用
CustomClipper
实现它的CustomClipper
class ClippingApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: ClipPath(
clipper: CurvedBottomClipper(),
child: Container(
color: Colors.lightGreen,
height: 250.0,
child: Center(
child: Padding(
padding: EdgeInsets.only(bottom: 50),
child: Text(
"Curved View",
style: TextStyle(
fontSize: 25,
color: Colors.white,
),
),
)),
),
),
);
}
}
class CurvedBottomClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
// I've taken approximate height of curved part of view
// Change it if you have exact spec for it
final roundingHeight = size.height * 3 / 5;
// this is top part of path, rectangle without any rounding
final filledRectangle =
Rect.fromLTRB(0, 0, size.width, size.height - roundingHeight);
// this is rectangle that will be used to draw arc
// arc is drawn from center of this rectangle, so it's height has to be twice roundingHeight
// also I made it to go 5 units out of screen on left and right, so curve will have some incline there
final roundingRectangle = Rect.fromLTRB(
-5, size.height - roundingHeight * 2, size.width + 5, size.height);
final path = Path();
path.addRect(filledRectangle);
// so as I wrote before: arc is drawn from center of roundingRectangle
// 2nd and 3rd arguments are angles from center to arc start and end points
// 4th argument is set to true to move path to rectangle center, so we don't have to move it manually
path.arcTo(roundingRectangle, pi, -pi, true);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
// returning fixed 'true' value here for simplicity, it's not the part of actual question, please read docs if you want to dig into it
// basically that means that clipping will be redrawn on any changes
return true;
}
}
And this is what you will get with this code:这就是您将通过此代码获得的结果:
You can have circular containers, you can experiment how to position it on your screen你可以有圆形容器,你可以试验如何在屏幕上放置它
Container(
width: double.infinity,
height: 500,
decoration: new BoxDecoration(
color: Colors.green,
shape: BoxShape.circle,
),
child: Text('Curved View'),
alignment: Alignment.center,
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.