[英]How to create this kind of shape in Flutter?
您可以使用 Stack 小部件,并将 Positioned 小部件作为其子小部件,并带有一个带有圆圈的容器,之后您可以将圆圈推出屏幕,以便只渲染它的一部分
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: MyApp._title,
home: Scaffold(
body: Column(
children: [
CircleCorner(),
],
)),
);
}
}
class CircleCorner extends StatelessWidget {
const CircleCorner({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return SizedBox(
width: size.width,
height: 300,
child: Stack(
children: [
Positioned(
top: -460,
right: -380,
child: Container(
width: 600.0,
height: 600.0,
decoration: new BoxDecoration(
color: Colors.black87,
shape: BoxShape.circle,
),
),
),
],
),
);
}
}
我建议这样做,当然必须根据您的要求进行一些更改
class Demo extends StatelessWidget {
const Demo({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SafeArea(
child: Container(
color: Colors.white,
child: Stack(
fit: StackFit.expand,
children: [
CustomPaint(
painter: BackgroundPainter(),
),
const Padding(
padding: EdgeInsets.only(top: 50, right: 50),
child: Align(
alignment: Alignment.topRight,
child: Icon(Icons.menu, size: 50),
),
),
],
),
),
);
}
}
class Point {
final double _xAxis;
final double _yAxis;
Point(this._xAxis, this._yAxis);
}
class BackgroundPainter extends CustomPainter {
final Paint _bluePaint;
BackgroundPainter()
: _bluePaint = Paint()
..color = Colors.lightBlue.shade300
..style = PaintingStyle.fill;
@override
void paint(Canvas canvas, Size size) {
paintBlue(size, canvas);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
void paintBlue(Size size, Canvas canvas) {
final path = Path();
path.moveTo(size.width, 0);
path.lineTo(size.width * 0.60, 0);
_addPointsToPath(path, [
Point(size.width * 0.55, size.height * 0.25),
Point(size.width, size.height * 0.25),
]);
canvas.drawPath(path, _bluePaint);
}
void _addPointsToPath(Path path, List<Point> points) {
for (var i = 0; i < points.length - 2; i++) {
final xDiff = (points[i]._xAxis + points[i + 1]._xAxis) / 2;
final yDiff = (points[i]._yAxis + points[i + 1]._yAxis) / 2;
path.quadraticBezierTo(points[i]._xAxis, points[i]._yAxis, xDiff, yDiff);
}
final secondLastPoint = points[points.length - 2];
final lastPoint = points[points.length - 1];
path.quadraticBezierTo(secondLastPoint._xAxis, secondLastPoint._yAxis,
lastPoint._xAxis, lastPoint._yAxis);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.