[Flutter] 使用Flutter實現在動態背景中，前景文字頂部漸入效果

先來看看效果圖：

如上圖所示，背景會不斷變化，可能是一個動畫，可能是播放的視頻什么的。

然后，上面疊加了文字。注意細節，文字區域頂部和背景之間，看起來有一個透明度漸入的蒙板效果，整個文字區域很自然的與背景過渡。

 

那么，在Flutter中，如何實現些效果呢？

這里的重點就是讓文字區域頂部的透明度逐漸減小。文字區域整個是一個滾動塊。但並沒有找到什么直接的屬性什么的。

其實呢，像這種效果，Flutter 中使用 ShaderMask 就可以很容易實現了。

在這之前，我們應該先了解一下什么是 Shader ? 做游戲的朋友對這個肯定不會莫生，沒錯，Shader 就是“着色器”， 用來實現圖像渲染的，它是可以代替固定的渲染管線的可編輯程序。

直接寫Shader並不太容易，好在Flutter中並不需要這樣。

 

直接上代碼吧：

          Align(
            alignment: Alignment.bottomLeft,
            child: Container(
              width: _screen.size.width * 0.65,
              height: (_screen.size.height - _screen.padding.vertical) * 0.5,
              margin: EdgeInsets.only(left: 24, bottom: 24),
              child: ShaderMask(
                child: SingleChildScrollView(
                  clipBehavior: Clip.antiAlias,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: msgList,
                  ),
                ),
                blendMode: BlendMode.dstIn,  // 顯示目標圖像，但僅顯示兩個圖像重疊的位置。源圖像未呈現，僅被視為蒙版。忽略源的顏色通道，只有不透明度才有效。
                shaderCallback: (bounds) {
                  return LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [Color(0x00000000), Color(0xbf000000), Color(0xff000000)],
                    stops: [0.0, 0.2, 1.0],
                    tileMode: TileMode.repeated,
                  ).createShader(bounds);
                },
              ),
            ),
          )

 

關鍵代碼就這些了。是不是很簡單？