flutter container with custom shape
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: CustomPaint(
painter: Chevron(),
child: Container(
width: 100.0,
height: 120.0,
child: Padding(
padding: EdgeInsets.only(top: 30.0),
child: Align(
alignment: Alignment.topCenter,
child: Text("1", style: TextStyle(fontSize: 24.0)),
),
),
),
),
),
);
}
}
class Chevron extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final Gradient gradient = new LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.orangeAccent, Colors.yellow],
tileMode: TileMode.clamp,
);
final Rect colorBounds = Rect.fromLTRB(0, 0, size.width, size.height);
final Paint paint = new Paint()
..shader = gradient.createShader(colorBounds);
Path path = Path();
path.moveTo(0, 0);
path.lineTo(0, size.height);
path.lineTo(size.width / 2, size.height - size.height / 3);
path.lineTo(size.width, size.height);
path.lineTo(size.width, 0);
path.close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}