如何在顫動中創建彎曲的容器

Question

我正在嘗試在顫動中創建這個設計

當我嘗試增加彎曲容器的高度來創建 MyDocs 容器設計時，它的彎曲會受到干擾。 請幫助如何做到這一點。

這是我的代碼

Widget build(BuildContext context) {
    return SafeArea(
        child: Container(
      child: Column(children: [
        ClipPath(
          clipper: ProsteThirdOrderBezierCurve(
            position: ClipPosition.bottom,
            list: [
              ThirdOrderBezierCurveSection(
                p1: Offset(0, 100),
                p2: Offset(0, 210),
                p3: Offset(MediaQuery.of(context).size.width, 100),
                p4: Offset(MediaQuery.of(context).size.width, 200),
              ),
            ],
          ),
          child: Container(
            decoration: const BoxDecoration(
              color: Color.fromARGB(255, 52, 84, 109),
            ),
            height: 200,
            child: Column(children: [
              const SizedBox10(),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: SizedBox(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height * 0.07,
                  child: TextField(
                    decoration: InputDecoration(
                        suffixIcon: const Icon(Icons.search),
                        contentPadding: const EdgeInsets.all(20.0),
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(30.0),
                        ),
                        filled: true,
                        hintStyle: TextStyle(color: Colors.grey[800]),
                        hintText: "Search...",
                        fillColor: Colors.white70),
                  ),
                ),
              ),
            ]),
          ),
        ),

這是它的輸出

Answer 1

您可以將ClipPath小部件與自定義剪輯器一起使用。

對於自定義剪裁器，您可以嘗試使用 flutter_custom_clippers包。