Flutter - обтравочный контур, который я рисую, выглядит наоборот

Question

Я хочу обрезать этот путь в дизайне:

, но код работает так:

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;
}

У меня та же проблема, когда я копирую код из источников, которые я вижу в inte rnet.

Как я могу решить эту проблему?

Спасибо.

Answer 1

Вы можете скопировать и вставить полный код ниже
Для экрана начальная точка (0,0) - это верхний левый угол экрана
Сначала можно перейти к path.moveTo(0, size.height); и начать рисовать
Вы может ссылаться на https://medium.com/flutter-community/paths-in-flutter-a-visual-guide-6c906464dcd0

фрагмент кода

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

рабочая демонстрация

полный код

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

Answer 2

Попробуйте добавить ListView с обратным свойством true.