我是Flutter的新手。如何创建此处标记的形状?我试过了。下面是代码。
Positioned(
top: 30.0,
left: 15.0,
width: 50.0,
height: 20.0,
child: Container(
decoration: BoxDecoration(
color: Colors.pink,
shape: BoxShape.rectangle
),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 4.0,horizontal: 8.0),
child: Text('අලුත්ම පුවත',style: TextStyle(color: Colors.white, fontSize: 10.0,fontWeight: FontWeight.bold)),
),
),
您可以使用clipPath实现所需的输出。
以下代码可帮助您更多地理解。
class DeleteWidget extends StatefulWidget {
@override
_DeleteWidgetState createState() => _DeleteWidgetState();
}
class _DeleteWidgetState extends State<DeleteWidget> {
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ClipPath(
clipper: SkewCut(),
child: Container(
color: Colors.red,
width: 200,
height: 50,
child: Center(child: Text("Hello World")),
),
),
),
);
}
}
class SkewCut extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final path = Path();
path.lineTo(size.width, 0);
path.lineTo(size.width - 20, size.height);
path.lineTo(0, size.height);
path.close();
return path;
}
@override
bool shouldReclip(SkewCut oldClipper) => false;
}