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.

Answer 1

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"),
              )),
            ),
          ),
        ),
      ),
    );
  }
}