Flutter - Clipping Path I draw looks reverse

Question

I want to clip this path in design :

but the code works like this :

return Scaffold(
      body: Center(
        child: Container(
          child: CustomPaint(
            painter: CurvePainter(),
            child: Container(
              child: Center(child: Text("TEST")),
            ),
          ),
        ),
      ),
    );
  }
}

class CurvePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint()..color = AppColors.colorPrimary;
    // create a path

    Path path = Path();
    path.lineTo(0, size.height * 0.75);
    path.quadraticBezierTo(size.height, size.height * 0.75, size.width, size.width * 0.30);
    path.lineTo(size.width, 0);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

I have the same problem when I copy the code from the sources I see on the internet.

How can I solve this problem?

Thank you.

Solution

You can copy paste run full code below
For the screen, the start point (0,0) is the screen’s top left corner
You can first move to path.moveTo(0, size.height); and start drawing
You can reference https://medium.com/flutter-community/paths-in-flutter-a-visual-guide-6c906464dcd0

code snippet

class CurvePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint()..color = Colors.pink;
    // create a path

    Path path = Path();
    path.moveTo(0, size.height);
    path.lineTo(0, size.height * 0.6);
    /*path.quadraticBezierTo(
        size.height, size.height * 0.10, size.width, size.width * 0.5);*/
    path.quadraticBezierTo(
        size.width / 3, size.height * 0.45, size.width, size.height * 0.45);
    path.lineTo(size.width, size.height);
    canvas.drawPath(path, paint);
  }

working demo

full code

import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class CurvePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint()..color = Colors.pink;
    // create a path

    Path path = Path();
    path.moveTo(0, size.height);
    path.lineTo(0, size.height * 0.6);
    /*path.quadraticBezierTo(
        size.height, size.height * 0.10, size.width, size.width * 0.5);*/
    path.quadraticBezierTo(
        size.width / 3, size.height * 0.45, size.width, size.height * 0.45);
    path.lineTo(size.width, size.height);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          child: CustomPaint(
            painter: CurvePainter(),
            child: Container(
              child: Center(
                  child: Padding(
                padding: const EdgeInsets.only(top: 120.0),
                child: Text("TEST"),
              )),
            ),
          ),
        ),
      ),
    );
  }
}

Comments

[Muhammet Ömer]

yeah, this is also a solution but complex

[Muhammet Ömer]

It works for me. Thank you. Thanks to this code, I draw differently on 4 screens.