i am new to flutter and to custom painter.
This is my custom painter class
class ShapesPainter extends CustomPainter {
double _kCurveHeight = 35;
@override
void paint(Canvas canvas, Size size) {
final p = Path();
p.lineTo(0, size.height - _kCurveHeight);
p.relativeQuadraticBezierTo(size.width / 2, 2 * _kCurveHeight, size.width, 0);
p.lineTo(size.width, 0);
p.close();
canvas.drawPath(p, Paint()..color = Colors.red);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
This is the code i need to format:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
body: CustomPaint(
painter: ShapesPainter(),
** size: const Size(400,200),**
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: const Padding(
padding: EdgeInsets.fromLTRB(10, 30, 0, 0),
child: Text(
"Welcome",
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
color: Colors.black,
letterSpacing: 2),
)),
),
SizedBox(height: 40),
Expanded(
child: Row(
children: <Widget>[
Expanded(flex:3,child:Placeholder()),
Expanded(
flex:4,
child: Placeholder()
),
]),
),
Placeholder()],),
),
);
}
}
As u can see my tree of widget is composed by a column of 3 element and the 2nd element of the column a row with 2 element.
XXXXXXXXXXX
X X 1
XXXXXXXXXXX
X X X 2
X X X 3
XXXXXXXXXXX
X X 4
X X 5
XXXXXXXXXXX
I want that my red custom paint take just half of the screen (roughly 1,2,3).
I tried to:
Research into container. Not sure about why use it coz it can't have more than 1 child in it, so I cant wrap first 2 column element in a container and then leave out the last one.
I tried to wrap the first 2 column element directly with custom pain but it doesn't work.
I tried to resize the custom paint in the bold part ** size: const Size(400,200),** Nothing changed
But if I wrap column declaration with custom paint widget it works but take whole screen :(
Maybe I am missing something important in how widget tree works?