在过去的3 ish天里，我一直在努力解决这个问题。基本上，我希望我的应用程序的主页在屏幕底部有一个波浪状的图案。它类似于这个：
但是，我希望我的wave版本看起来像这样：
我怎么在flutter中做到这一点呢？我不想手动绘制它，然后将其用作jpg或png，我想使用容器或flutter本地的东西来制作它。谢谢！
agxfikkp1#
注册并使用此在线工具生成曲线。https://fluttershapemaker.com观看此视频了解如何使用该工具shapemaker video tutorial最后从工具生成类并使用它。
示例代码如下
import 'package:flutter/material.dart'; class RPSCustomPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { Paint paint0 = Paint() ..color = const Color.fromARGB(255, 33, 150, 243) ..style = PaintingStyle.stroke ..strokeWidth = 1; Path path0 = Path(); path0.moveTo(size.width * 0.0029500, size.height * 0.5714286); path0.quadraticBezierTo(size.width * 0.0394500, size.height * 0.5007143, size.width * 0.0999500, size.height * 0.5000000); path0.quadraticBezierTo(size.width * 0.1583100, size.height * 0.5003571, size.width * 0.2039500, size.height * 0.5685714); path0.quadraticBezierTo(size.width * 0.2407000, size.height * 0.5006429, size.width * 0.2999800, size.height * 0.4993571); path0.quadraticBezierTo(size.width * 0.3602400, size.height * 0.5010714, size.width * 0.4003700, size.height * 0.5700000); path0.quadraticBezierTo(size.width * 0.4403600, size.height * 0.5012714, size.width * 0.5000700, size.height * 0.5000000); path0.quadraticBezierTo(size.width * 0.5604700, size.height * 0.5002286, size.width * 0.6011100, size.height * 0.5695857); path0.quadraticBezierTo(size.width * 0.6403500, size.height * 0.5004429, size.width * 0.7000400, size.height * 0.4998714); path0.quadraticBezierTo(size.width * 0.7604000, size.height * 0.4992857, size.width * 0.8011100, size.height * 0.5671429); path0.quadraticBezierTo(size.width * 0.8406100, size.height * 0.4996429, size.width * 0.9002000, size.height * 0.5000000); path0.quadraticBezierTo(size.width * 0.9602000, size.height * 0.4982143, size.width * 1.0029500, size.height * 0.5685714); path0.cubicTo( size.width * 0.7529500, size.height * 0.5692857, size.width * 0.7529500, size.height * 0.5692857, size.width * 0.0029500, size.height * 0.5714286); path0.close(); canvas.drawPath(path0, paint0); } @override bool shouldRepaint(covariant CustomPainter oldDelegate) { return true; } }
添加到widget树
@override Widget build(BuildContext context) { double curveWidth = MediaQuery.of(context).size.width; return Scaffold( body: Column(children: [ // CustomPaint( size: Size( curveWidth, (curveWidth * 0.7) .toDouble()), //You can Replace [curveWidth] with your desired width for Custom Paint and height will be calculated automatically painter: RPSCustomPainter(), ), ])); }
1条答案
按热度按时间agxfikkp1#
注册并使用此在线工具生成曲线。
https://fluttershapemaker.com
观看此视频了解如何使用该工具
shapemaker video tutorial
最后从工具生成类并使用它。
示例代码如下
添加到widget树