Flutter實現(xiàn)漸變色加描邊字體效果

更新時間：2021年11月26日 14:31:55 作者：J_D_Chi

這篇文章介紹了Flutter實現(xiàn)漸變色描邊字體效果的方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

寫在前面

實現(xiàn)如下圖的效果，這個數(shù)字的內(nèi)部和外部都有漸變色。

內(nèi)容

實現(xiàn)描邊

在網(wǎng)上搜索一輪，可以看到通過用?Stack，來讓兩個?Text疊加，并對上一個?Text設(shè)置外部描邊，就可以得到如下的效果。

 Stack(
            alignment: Alignment.center,
            children: [
              Text(
                '100',
                style: TextStyle(
                    fontSize: 40,
                    fontWeight: FontWeight.bold,
                    foreground: Paint()
                      ..style = PaintingStyle.stroke
                      ..strokeWidth = 6
                      ..color = Colors.black),
              ),
              Text(
                '100',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 40,
                    fontWeight: FontWeight.bold),
              ),
            ],
          )

實現(xiàn)漸變

顏色的漸變使用 ShaderMask來進(jìn)行處理，它可以幫我們計算出文字的矩形，然后我們直接設(shè)置給 LinearGradient即可。

在使用 ShaderMask的時候，字體的顏色需要是白色。由于描邊的 Text 我們使用 foreground來添加描邊，故顏色的設(shè)置也應(yīng)該在這里處理，不能像另一個 Text 一樣，在 TextStyle 里的 color屬性設(shè)置，否則會報錯。

  Stack(
            alignment: Alignment.center,
            children: [
              ShaderMask(
                shaderCallback: (Rect bounds) {
                  return LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [Color(0xFF8F1FFF), Color(0xFFFF00FF)],
                  ).createShader(Offset.zero & bounds.size);
                },
                child: Text(
                  '100',
                  style: TextStyle(
                      fontSize: 40,
                      fontWeight: FontWeight.bold,
                      foreground: Paint()
                        ..style = PaintingStyle.stroke
                        ..strokeWidth = 6
                        ..color = Colors.white),
                ),
              ),
              ShaderMask(
                shaderCallback: (Rect bounds) {
                  return LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [Colors.white, Color(0xFFFFBDE9)],
                  ).createShader(Offset.zero & bounds.size);
                },
                child: Text(
                  '100',
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 40,
                      fontWeight: FontWeight.bold),
                ),
              )
            ],
          )

一些調(diào)整

上面已經(jīng)基本實現(xiàn)了我們最初的效果，但仍存在一點問題，就是文字描邊的邊緣部分有一些露白的情況，這是因為描邊的 strokeWidth有些大，超過了文字的矩形范圍，而我們的漸變渲染范圍只在矩形內(nèi)。

在這里可以看到是有部分越過了左右邊界：

如果用英文字符來看的話，會更明顯：

針對這些情況，我目前是兩種處理：

對于左右邊界的情況，給文字前后添加空白字符：

對于上下邊界的情況，調(diào)整?TextStyle里?height屬性：

ShaderMask(
                shaderCallback: (Rect bounds) {
                  return LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [Color(0xFF8F1FFF), Color(0xFFFF00FF)],
                  ).createShader(Offset.zero & bounds.size);
                },
                child: Text(
                  'you',
                  style: TextStyle(
                      fontSize: 40,
                      height: 1.4,
                      fontWeight: FontWeight.bold,
                      foreground: Paint()
                        ..style = PaintingStyle.stroke
                        ..strokeWidth = 6
                        ..color = Colors.white),
                ),
              )