我已经实现了渲染我一直在寻找屏幕顶部的ClipPath。我现在想做的是像“镜面效果”一样在屏幕底部显示倒置的剪切路径,但我无法实现。
这是我的代码:
return Stack(
children: <Widget>[
ClipPath(
clipper: AddInformationClipper(),
child: Container(
decoration: BoxDecoration(color: TheBaseColors.lightGreen),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(15.0, 50.0, 0.0, 0.0),
child: Text('This is',
style: TextStyle(
fontSize: 30.0, fontWeight: FontWeight.bold)),
),
Container(
padding: EdgeInsets.fromLTRB(60.0, 80.0, 0.0, 0.0),
child: Text('Your information',
style: TextStyle(
fontSize: 30.0, fontWeight: FontWeight.bold)),
),
Container(
padding: EdgeInsets.fromLTRB(300.0, 35.0, 0.0, 0.0),
child: Text('.',
style: TextStyle(
fontSize: 80.0,
fontWeight: FontWeight.bold,
color: TheBaseColors.lightGreen)),
)
],
),
),
//TEXTFIELDS SHOULD GO HERE
Center(child: TextFormProfile()),
],
),
],
);
}
}
class AddInformationClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = Path();
path.moveTo(0, size.height / 4);
path.lineTo(size.width - 40, 0);
path.lineTo(0, 0);
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
我需要在屏幕底部添加另一个Clippath,这是相反的。