Flutter如何给容器赋予三角形形状？答案

【问题标题】：Flutter how to give triangle shape to container?Flutter如何给容器赋予三角形形状？
【发布时间】：2021-07-06 11:56:07
【问题描述】：

我有一个带边框半径的简单容器

喜欢这个

            Container(
                width: double.infinity,
                height: 500,
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(topLeft: Radius.circular(30), bottomLeft: Radius.circular(30), bottomRight: Radius.circular(30),),
                    boxShadow: [
                      BoxShadow(
                          blurRadius: 7,
                          color: Color(0xffecedf1),
                          spreadRadius: 4)
                    ])),

它的方形形状我想给一个三角形的一侧形状像这样

需要知道如何实现这种类型的容器？

【问题讨论】：

你可以使用 ClipPath 小部件

标签： flutter dart

【解决方案1】：

您可以使用this 包。

添加该小部件后，编写您的代码

ClipPath(
            clipper: RoundedDiagonalPathClipper(),
            child: Container(
              height: 320,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(50.0)),
                color: Colors.orange,
              ),
              child: Center(child: Text("RoundedDiagonalPathClipper()")),
            ),
          ),

它会起作用的。

解决方案：- 2

您可以在this中自定义形状

参考：-https://blog.logrocket.com/drawing-shapes-in-flutter-with-custompaint-and-shape-maker/

【讨论】：