Flutter - 如何在所有边缘上获得线性渐变？答案

【问题标题】：Flutter - How to get linear gradient across all edges?Flutter - 如何在所有边缘上获得线性渐变？
【发布时间】：2021-11-26 10:44:19
【问题描述】：

LinearGradient(
                    //tileMode: TileMode.clamp,
                    colors: [
                      kRecordButtonColor.withOpacity(0.4),
                      kRecordButtonColor,
                      kRecordButtonColor,
                      kRecordButtonColor.withOpacity(0.4),
                    ],
                    stops: const [
                      0,
                      0.2,
                      0.8,
                      1,
                    ],
                  ),

如您所见，这段代码只能帮助我在 2 条边上获得渐变，我需要在所有 4 条边上使用它。

【问题讨论】：

也许你可以使用 RadialGradient？
试过了，没有得到想要的结果。它不是一个简单的容器。因为它是用 Inkwell 包裹的，所以我猜它有点复杂。

标签： flutter containers gradient linear-gradients

【解决方案1】：

试试这个而不是你的容器：

Stack(
          alignment: Alignment.center,
          children: [
            Container(
              margin: EdgeInsets.all(16.0),
              width: 55,
              height: 55,
              decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(10),
                  gradient: LinearGradient(
                    colors: [
                      Colors.red.withOpacity(0.5),
                      Colors.red,
                      Colors.red,
                      Colors.red.withOpacity(0.5),
                    ],
                    stops: const [
                      0,
                      0.2,
                      0.8,
                      1,
                    ],
                  )),
            ),
            Container(
              margin: EdgeInsets.all(16.0),
              width: 55,
              height: 55,
              decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(10),
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [
                      Colors.white.withOpacity(0.5),
                      Colors.white.withOpacity(0.0),
                      Colors.white.withOpacity(0.0),
                      Colors.white.withOpacity(0.5),
                    ],
                    stops: const [
                      0,
                      0.2,
                      0.8,
                      1,
                    ],
                  )),
            ),
          ],
        ),

【讨论】：

我感谢您的努力，但这是一个非常丑陋的黑客。我尝试了一段时间，调整了一些值，但这仍然没有覆盖角落。基本上，当您增加拐角半径时，拐角看起来比边缘更暗。