0

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?

0 Answers0