如何在 Flutter 中混合多个渐变？

Question

设计师在他们创建的 Figma 设计中结合了两个或多个渐变。在一些设计中，他们将径向渐变与线性渐变相结合；而其他一些设计，他们将线性渐变与另一个线性渐变结合起来。

这是用 CSS 可以轻松完成的事情，但是，在 Flutter 中，我还无法实现它。我已经阅读了 Flutter 的几乎所有文档，但似乎没有解决方案。无论如何，我可以在不让设计师改变设计的情况下组合两个渐变吗？

Answer 1

必须将容器包裹在容器中才能达到此效果：

Container(
  decoration: BoxDecoration(
    gradient: gradientOne,
  ),
  child: Container(
    decoration: BoxDecoration(
      gradient: gradientTwo,
    ),
    child: content,
  ),
)

适用于半透明渐变。

Answer 2

尝试使用

Gradient.lerp(yourFirstGradient, yourSecondGradient, 0.5)

两者必须是同一类型

Answer 3

渐变：线性渐变（

          begin: Alignment.topRight,
          end: Alignment.bottomLeft,
          colors: [Colors.blue, Colors.red])),

Answer 4

如果你像这样混合多个渐变

所以尝试这样

主体：柱（

      children:<Widget> [

         Container(

          decoration: BoxDecoration(

              gradient: LinearGradient(

                  begin: Alignment.topRight,

                  end: Alignment.bottomLeft,

                  colors: [Colors.blue, Colors.red])),
         
           child: Center(

               child: Text(
              '',

              style: TextStyle(

                  fontSize: 48.0,

                  fontWeight: FontWeight.bold,

                  color: Colors.white),

            ),
          ),
        ),

        Container(

          decoration: BoxDecoration(

              gradient: LinearGradient(

                  begin: Alignment.topRight,

                  end: Alignment.bottomLeft,
                  colors: [Colors.white, Colors.black])),

          child: Center(

            child: Text(

              '',
              style: TextStyle(

                  fontSize: 48.0,

                  fontWeight: FontWeight.bold,

                  color: Colors.white),

            ),
          ),
        )
      ],
       ));

Answer 5

这是一个简单的类，它递归地创建

DecoratedBox

来应用多个渐变：

import 'package:flutter/material.dart';

class StackedGradient extends StatelessWidget {
  // Gradients are stacked in-order. That is: first gradient is on the bottom, last gradient is on the top.
  final List<Gradient> _gradients;

  const StackedGradient(this._gradients);

  @override
  Widget build(final BuildContext context) => _buildGradientWidget(_gradients);

  Widget _buildGradientWidget(final List<Gradient> remainingGradients) => DecoratedBox(
        decoration: BoxDecoration(gradient: remainingGradients.first),
        child: remainingGradients.length > 1 ? _buildGradientWidget(remainingGradients.sublist(1)) : null,
      );
}

可以这样使用：

StackedGradient([
    LinearGradient(...),
    LinearGradient(...),
    LinearGradient(...),
  ]

Answer 6

gradient: LinearGradient(
    begin: Alignment.topCenter, 
    end: Alignment.bottomCenter, 
    colors: [ Color.fromARGB(255, 255, 255, 255), 
              Color.fromARGB(255, 218, 217, 217)]
 )
),

//这就是我在容器中所做的。我将整个脚手架包裹在一个容器中，使背景变成白色到浅灰色。