Shutter: add gradient stroke to font

Write it at the front

Achieve the effect shown in the figure below , This number has gradients inside and outside .

Content

Realize stroke

Search the Internet for a round , You can see by using Stack, Let's make two Text superposition , And to the previous Text Set external stroke , You can get the following results .

 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),
              ),
            ],
          )

Achieve gradient

Color gradient use ShaderMask To process , It can help us calculate the rectangle of the text , Then we set it directly to LinearGradient that will do .

In the use of ShaderMask When , The color of the font needs to be white . Due to stroke Text We use foreground To add stroke , Therefore, the color setting should also be handled here , Not like another Text equally , stay TextStyle Inside color Property settings , Otherwise, an error will be reported .

  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),
                ),
              )
            ],
          )

Some adjustments

The above has basically achieved our initial effect , But there is still a problem , That is, there is some whiteness on the edge of the text , This is because of the tracing strokeWidth Some big , It exceeds the rectangular range of the text , Our gradient rendering range is only within the rectangle .

It can be seen here that some parts have crossed the left and right borders ：

If you use English characters , It will be more obvious ：

For these situations , I am currently dealing with two kinds ：

1. For the case of left and right boundaries , Add white space characters before and after the text ：
   
2. For the case of upper and lower boundaries , adjustment TextStyle in height attribute ：
   

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),
                ),
              )

Reference resources

How to decorate text stroke in Flutter?
How to create gradient text in Flutter