Container의 형태를 변형하는 방법 여러 가지 메모
하고 싶은 일
아래와 같은 라벨을 만들고 싶다.
CustomPaint를 사용한 방법
main.dart
Container(
child: CustomPaint(
painter: _TrianglePainter(),
child: Container(
padding: EdgeInsets.all(5),
child: Text(
"Label One",
style: TextStyle(color: Colors.white),
),
),
),
),
class _TrianglePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
var paint = Paint();
paint.color = Colors.blue;
var path = Path();
path.moveTo(0, 0);
path.lineTo(size.width, 0);
path.lineTo(size.width + 15, size.height / 2);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
path.lineTo(0, 0);
path.close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}
ShapeDecoration을 사용한 예
main.dart
Container(
padding: EdgeInsets.all(5),
child: Text("Label Two", style: TextStyle(color: Colors.white)),
decoration: ShapeDecoration(
color: Colors.deepOrange,
shape: _TagShape(),
))
class _TagShape extends ShapeBorder {
@override
EdgeInsetsGeometry get dimensions {
return const EdgeInsets.only();
}
@override
Path getInnerPath(Rect rect, {TextDirection textDirection}) {
return getOuterPath(rect, textDirection: textDirection);
}
@override
Path getOuterPath(Rect rect, {TextDirection textDirection}) {
return Path()
..moveTo(rect.left, rect.top)
..lineTo(rect.left, rect.bottom)
..lineTo(rect.right, rect.bottom)
..lineTo(rect.right + 15, rect.top + rect.height / 2)
..lineTo(rect.right, rect.top)
..lineTo(rect.left, rect.top)
..close();
}
@override
void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {}
@override
ShapeBorder scale(double t) {
return null;
}
}
Reference
이 문제에 관하여(Container의 형태를 변형하는 방법 여러 가지 메모), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/naoaki_kaito/items/ae8cb42d9a49b8072de2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)