dart 设计一张在Flutter中呈三角形的线性梯度卡片

cwdobuhd 于 2023-05-04 发布在 Flutter

关注(0)|答案(2)|浏览(174)

我有一张卡片，其中包含产品的图像和产品的详细信息，即在堆栈中的图像。

问题是梯度设计就像一个三角形的形状，即

我尝试过在容器小部件的Box Decoration中使用线性渐变，如下所示：

Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                height: 141,
                width: double.maxFinite,
                decoration: const BoxDecoration(
                  borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(10),
                    bottomRight: Radius.circular(10),
                  ),
                  gradient: LinearGradient(
                    begin: Alignment.bottomLeft,
                    end: Alignment.topRight,
                    colors: [Colors.black, Color(0x00000000)],
                  ),
                ),
                child: Container(
                  // Data inside Column
                ),
              ),
            ),

但没起作用

dart

来源：https://stackoverflow.com/questions/76153546/design-a-card-with-linear-gradient-in-a-triangular-shape-in-flutter

2条答案

按热度按时间

6l7fqoea1#

你应该加上渐变的开始和结束的位置，你做到了，但是你忘记了参数stops: [0.7, 1]，你可以从0到1给出任何你想要的数字。
如果不起作用，请尝试将颜色更改为colors: [Colors.black, Colors.transparent]。希望这对你有帮助

赞(0）回复(0）举报 2023-05-04

pvabu6sv2#

您可以添加更多的颜色透明和添加自定义对齐
例如：

Container(
                height: 300,
                width: 300,
                decoration:  BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(10),
                  gradient:const LinearGradient(
                    begin:Alignment(-0.1, 1),
                    end: Alignment.topRight,
                    colors: [Colors.yellow, Colors.transparent,Colors.transparent,Colors.transparent,],
                  ),
                ),
            )

赞(0）回复(0）举报 2023-05-04

我来回答

dart 设计一张在Flutter中呈三角形的线性梯度卡片

2条答案

相关问题

热门标签

最新问答