сделайте полукруг сверху для контейнера с помощью (path.quadraticBezierTo) Flutter

Question

Я пытаюсь сделать форму, как на изображении ниже ...

введите описание изображения здесь

Я не знаю, как сделать это как изображение ...

мой код ...

ClipPath(
    clipper: MyClipper(),
    child: Container(
    margin: EdgeInsets.only(top: size.height * 0.6),
    height: 500,
    width: size.width,
    color: Colors.white,
    ),
),

С первой попытки я сделал первая точка на (0,1) ...

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();

    path.moveTo(0, size.height);

    path.lineTo(0, size.height * 0.2);
//    path.lineTo(size.width, size.height);
//    path.lineTo(size.width, size.height * 0.5);

    path.quadraticBezierTo(size.width / 2, 0, size.width, size.height * 0.2);

    path.lineTo(size.width, size.height);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

вторая попытка, я сделал первую точку на (0,0.5) ...

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();

    path.moveTo(0, size.height * 0.5);

    path.quadraticBezierTo(size.width / 2, 0, size.width, size.height * 0.5);
    
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}

Я знаю мотыгу чтобы сделать это снизу, но я не знаю, как это сделать

пожалуйста, мне нужно объяснение ответа.

Answer 1

Вы можете скопировать и вставить полный код ниже
Вы можете указать https://blog.usejournal.com/how-to-draw-custom-shapes-in-flutter-aa197bda94bf

Сделайте Quadrati c Bezier на C, используя B как контроль.

code snippet

Path getClip(Size size) {
    var path = Path();

    path.moveTo(0.0, height);
    path.quadraticBezierTo(
        size.width / 2, size.height * 0.2, size.width, size.height - height);
    path.lineTo(size.width, 0.0);
    path.lineTo(0.0, 0.0);

    path.close();

    return path;
  }

введите описание изображения здесь

полный код

import 'package:flutter/material.dart';

class ClipPainter extends CustomPainter {
  final CustomClipper<Path> clipper;

  ClipPainter(this.clipper);

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();
    paint.color = Colors.blue[800];
    paint.style = PaintingStyle.fill;
    canvas.drawPath(clipper.getClip(size), paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

class ArcClipper extends CustomClipper<Path> {
  ArcClipper(this.height);

  ///The height of the arc
  final double height;

  @override
  Path getClip(Size size) {
    var path = Path();

    path.moveTo(0.0, height);
    path.quadraticBezierTo(
        size.width / 2, size.height * 0.2, size.width, size.height - height);
    path.lineTo(size.width, 0.0);
    path.lineTo(0.0, 0.0);

    path.close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    ArcClipper oldie = oldClipper as ArcClipper;
    return height != oldie.height;
  }
}

class Arc extends StatelessWidget {
  const Arc({
    Key key,
    @required this.height,
    @required this.child,
  }) : super(key: key);

  /// The widget which one of [edge]s is going to be clippddddded as arc
  final Widget child;

  ///The height of the arc
  final double height;

  @override
  Widget build(BuildContext context) {
    var clipper = ArcClipper(height);
    return CustomPaint(
      painter: ClipPainter(clipper),
      child: ClipPath(
        clipper: clipper,
        child: child,
      ),
    );
  }
}

void main() => runApp(MyApp());

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

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Test'),
        ),
        body: Center(
            child: Container(
          width: 100,
          height: 100,
          decoration: BoxDecoration(
            border: Border.all(),
          ),
          child: Arc(
              height: 50,
              child: Container(
                  decoration: BoxDecoration(
                    border: Border.all(),
                  ),
                  width: 100,
                  height: 100)),
        )));
  }
}

Answer 2

Решение - когда я удаляю margin, он работает хорошо.

Причина, по которой я использовал margin, потому что я хочу, чтобы мой Container находился внизу экрана, я ответил margin по Positioned : bottom: 0 внутри Stack

Stack(
 children: <Widget>[
   Positioned(
     bottom: 0,
     child: ClipPath(
     clipper: MyClipper(),
     child: Container(
//       margin: EdgeInsets.only(top: size.height * 0.5),
         height: size.height * 0.45,
         width: size.width,
         color: Colors.white,
         ),
      ),
   ),
 ]
),