如何在 flutter 中創建 Instagram 不斷變化的漸變背景

Question

如何在 flutter 中創建類似自動更改漸變背景顏色的 Instagram

Answer 1

我不知道您所說的“類似 Instagram 的自動漸變漸變”是什么意思，但我猜您的意思是容器中的平滑顏色過渡。 為此，有兩種主要方法。

• 最簡單的一種：使用 動畫容器並將其顏色屬性分配給一個局部變量，您可以稍后使用setState()更改該變量。 AnimatedContainer將在狀態中的初始顏色和最終顏色之間插入值，創建效果。

• 使用Animated Builder創建插入 colors 的Tween並使用AnimationController控制何時以及如何更改。 在這篇 Medium 文章中，您可以找到有關此方法的更多信息。

Answer 2

我也不知道您所說的“類似 Instagram 的自動漸變漸變”是什么意思：但我假設您會達到與 Instagram 漸變相同的外觀：例如這個

可以這樣做：

 Container(
    margin:
        EdgeInsets.symmetric(horizontal: getProportionateScreenWidth(10)),
    padding: EdgeInsets.all(getProportionateScreenWidth(12)),
    height: getProportionateScreenHeight(44),
    width: getProportionateScreenWidth(44),
    decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topRight,
        end: Alignment.bottomRight,
        colors: [
          Colors.purple,
          Colors.pink,
         Colors.orange,
        ],
      ),
      // color: color,
      shape: BoxShape.circle,
    ),
    child: SvgPicture.asset(icon!,color: Colors.white,),
  ),