如何像这个例子一样在颤动中变换一个矩形？答案

【问题标题】：How to transform a rectangle in flutter like in this example?如何像这个例子一样在颤动中变换一个矩形？
【发布时间】：2019-08-07 02:51:25
【问题描述】：

我是 Flutter 和 Dart 的初学者，我正在设计一个自定义导航栏。我想知道的是如何使用flutter将矩形变成这种形状？

非常感谢任何有关自定义绘制小部件的帮助或教程！

【问题讨论】：

标签： flutter

【解决方案1】：

ClipPath 可以成为您的解决方案，您可以像这样创建自定义剪辑器：

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path myPath = Path();
    myPath.lineTo(0.0, size.height);

    myPath.quadraticBezierTo(
        size.width / 4,
        size.height / 1.2,
        size.width / 2,
        size.height / 1.2
    );
    myPath.quadraticBezierTo(
        size.width - (size.width / 4),
        size.height / 1.2,
        size.width,
        size.height);
    myPath.lineTo(size.width, 0.0);
    return myPath;
  }

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

我在下面发布了我的整个代码，您可以使用它并转换为您需要的代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: Center(
              child: ClipPath(
            clipper: MyClipper(),
            child: Container(
              height: 200,
              width: 300,
              color: Colors.black26,
            ),
          )),
        ),
      ),
    );
  }
}

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path myPath = Path();
    myPath.lineTo(0.0, size.height);

    myPath.quadraticBezierTo(
        size.width / 4,
        size.height / 1.2,
        size.width / 2,
        size.height / 1.2
    );
    myPath.quadraticBezierTo(
        size.width - (size.width / 4),
        size.height / 1.2,
        size.width,
        size.height);
    myPath.lineTo(size.width, 0.0);
    return myPath;
  }

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

【讨论】：

在发布此问题后，我设法获得了一些教程。我已经看到了 Clip 路径，但我不确定如何制作上部曲线。
我设法创建了它。它与您提供的示例相似，但多了 1 个二次贝塞尔曲线。
嘿@AndreiCaisim Caisim，你能告诉我你是怎么做到的curve。