flutter - Flutter 自定义 Painter 设计

Question

我一直在尝试用定制画家或定制剪刀设计这个，尤其是弯曲的底部，有人能帮我吗？

Answer 1

如果您想设计自己的形状，可以使用https://fluttershapemaker.com/

Answer 2

我做了类似的事情，但有 3 个区域。此小部件有效，您可以根据需要进行个性化设置：

  Widget _getColumnColor(
      {Color color1,
      Color color2,
      Color color3,
      double radius,
      Widget content1,
      Widget content2,
      Widget content3}) {
    return Column(
      children: [
        Expanded(
            flex: 2,
            child: Stack(
              children: [
                Container(
                  color: color2,
                ),
                Container(
                  height: double.infinity,
                  width: double.infinity,
                  decoration: BoxDecoration(
                    color: color1,
                    borderRadius: BorderRadius.only(
                      bottomRight: Radius.circular(radius),
                    ),
                  ),
                  child: content1,
                ),
              ],
            )),
        Expanded(
            flex: 1,
            child: Stack(
              children: [
                Row(
                  children: [
                    Expanded(
                        child: Container(
                      color: color1,
                    )),
                    Expanded(child: Container(color: color3))
                  ],
                ),
                Container(
                  decoration: BoxDecoration(
                    color: color2,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(radius),
                      bottomRight: Radius.circular(radius),
                    ),
                  ),
                  width: double.infinity,
                  height: double.infinity,
                  child: content2,
                ),
              ],
            )),
        Expanded(
            flex: 1,
            child: Stack(
              children: [
                Row(
                  children: [
                    Expanded(
                        child: Container(
                      color: color2,
                    )),
                    Expanded(child: Container(color: color3))
                  ],
                ),
                Container(
                  decoration: BoxDecoration(
                    color: color3,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(radius),
                      bottomRight: Radius.circular(radius),
                    ),
                  ),
                  width: double.infinity,
                  height: double.infinity,
                  child: content3,
                ),
              ],
            )),
      ],
    );
  }

color1、color2 和 color3 是区域颜色，radius 是角的半径，content1、content2 和 content3 是三个区域内的内容。