颤振中的自定义形状（带有弯曲边缘）答案

【问题标题】：Custom shape in flutter ( with curved edges )颤振中的自定义形状（带有弯曲边缘）
【发布时间】：2021-11-12 00:01:50
【问题描述】：

你好，我正在尝试在 Flutter 中实现这个 UI

预期输出

输出现在得到的东西

如何在 LTE 和 ZTL 之前制作这条曲线。使用定位小部件以外的堆栈时如何在颤动中定位小部件？

到目前为止我所做的代码。

import 'package:flutter/material.dart';

class NavHome extends StatelessWidget {
  const NavHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        SizedBox(
          height: MediaQuery.of(context).size.height * 0.023,
        ),
        Stack(children: [
          Container(
              height: MediaQuery.of(context).size.height * 0.35,
              width: MediaQuery.of(context).size.width * 0.90,
              decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey.withOpacity(0.5), //color of shadow
                      spreadRadius: 2, //spread radius
                      blurRadius: 3, // blur radius
                      offset: const Offset(0, 0),
                    ),
                  ],
                  color: const Color(0xff0C2242),
                  borderRadius: BorderRadius.circular(17))),
          Container(
              height: MediaQuery.of(context).size.height * 0.27,
              width: MediaQuery.of(context).size.width * 0.90,
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(17))),
          Positioned(
            top: MediaQuery.of(context).size.height * 0.27,
            left: MediaQuery.of(context).size.height * 0.15,
            child: Container(
              height: MediaQuery.of(context).size.height * 0.08,
              width: MediaQuery.of(context).size.width * 0.30,
              decoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(17),
                      bottomRight: Radius.circular(17))),
            ),
          )
        ])
      ],
    );
  }
}

【问题讨论】：

查看ShapeBorder官方文档

标签： flutter user-interface stack

【解决方案1】：

我不确定是否会实现原始 UI。所以，这里是建议在图表下方创建一个 Row 小部件并添加三个卡片小部件然后尝试根据您的形状更改边框形状

【讨论】：

好的，我会试试的

【解决方案2】：

您应该使用 CustomClipper 。阅读文档 https://api.flutter.dev/flutter/rendering/CustomClipper-class.html

【讨论】：