Text(
  widget.text,
  style: TextStyle(
    fontSize: 48,
    fontWeight: FontWeight.bold,
    foreground: Paint()
      ..style = PaintingStyle.fill
      ..strokeWidth = 5
      ..color = Colors.white,
    shadows: [
      Shadow(
        blurRadius: 10,
        color: Colors.white,
        offset: Offset(0, 0),
      ),
      Shadow(
        blurRadius: 20,
        color: Colors.white30,
        offset: Offset(0, 0),
      ),
    ],
  ),
)
```![](http://img.cdn.guoshuyu.cn/20230322_N21/image3.png)

Здесь стоит отметить, что аналогичный подход можно применить к изображению, чтобы добиться эффекта "светового пятна". Ниже приведён пример кода, который использует вложенные `Stack`, два `Image` и `BackdropFilter` с `ImageFilter`, чтобы создать эффект размытости, создающий вид светящегося изображения.

```dart
var child = Image.asset(
  'static/test_logo.png',
  width: 250,
);
return Stack(
  children: [
    child,
    Positioned.fill(
      child: BackdropFilter(
        filter: ImageFilter.blur(
          sigmaX: blurRadius,
          sigmaY: blurRadius,
        ),
        child: Container(color: Colors.transparent),
      ),
    ),
    child,
  ],
)

List<Offset> generatePoints() {
  List<Offset> points = [];
  points.add(Offset(-1, -1));
  points.add(Offset(-1, 0));
  points.add(Offset(0, -1));
  return points;
}

![](http://img.cdn.guoshuyu.cn/20230322_N21/image6.png)

Если в этот момент белый `Container` заменить на текстовое содержимое, то можно получить такой эффект, как показано ниже. Видите ли вы похожесть на случайное перемещение текста? Далее нам достаточно генерировать каждый раз один путь, чтобы реализовать требуемый эффект "разрыв" текста.
![](http://img.cdn.guoshuyu.cn/20230322_N21/image7.png)

> Для того чтобы каждый раз генерировался новый `Path`, нам достаточно сделать эту реализацию случайной. Как показано ниже, мы используем метод `generatePoint`, чтобы случайным образом генерировать 60 точек каждый раз. Затем эти точки преобразуются в путь с помощью метода `computePath`. Этот путь затем передается в метод `getClip` класса `CustomClipper`.

> Обратите внимание на условие `i % 2`, которое позволяет предыдущему значению x или y оставаться тем же местоположением, обеспечивая непрерывность при соединении.

```dart
class RandomTearingClipper extends CustomClipper<Path> {
  bool tear;

  RandomTearingClipper(this.tear);

  List<Offset> generatePoint() {
    List<Offset> points = [];
    var x = -1.0;
    var y = -1.0;
    for (var i = 0; i < 60; i++) {
      if (i % 2 != 0) {
        x = Random().nextDouble() * (Random().nextBool() ? -1 : 1);
      } else {
        y = Random().nextDouble() * (Random().nextBool() ? -1 : 1);
      }
      points.add(Offset(x, y));
    }
    return points;
  }

  @override
  Path getClip(Size size) {
    var points = generatePoint();
    var polygon = Polygon(points);
    if (tear)
      return polygon.computePath(rect: Offset.zero & size);
    else
      return Path()..addRect(Offset.zero & size);
  }

  @override
  bool shouldReclip(RandomTearingClipper oldClipper) => true;
}

timer = Timer.periodic(Duration(milliseconds: 400), (timer) {
  tearFunction();
});
```return ClipPath(
   child: Center(
     child: Text(
       widget.text,
       style: TextStyle(
         fontSize: 48,
         fontWeight: FontWeight.bold,
         foreground: Paint()
           ..style = PaintingStyle.fill
           ..strokeWidth = 1
           ..color = Colors.white,
         shadows: [
           Shadow(
             blurRadius: 10,
             color: Colors.white,
             offset: Offset(0, 0),
           ),
           Shadow(
             blurRadius: 20,
             color: Colors.white30,
             offset: Offset(0, 0),
           ),
         ],
       ),
     ),
   ),
   clipper: RandomTearingClipper(tear),
 );
```![image](http://img.cdn.guoshuyu.cn/20230322_N21/image8.gif)

> На данный момент это выглядит недостаточно реалистично.

# Деформация и мигание

Для достижения желаемого эффекта нам ещё требуется выполнить несколько специальных операций, таких как создание двух фигур с различными цветами и позициями «неоновых текстов», чтобы реализовать эффект «деформации и мигания».

Например, следующий код показывает, как можно использовать `ShaderMask`, чтобы создать текст с градиентной заливкой. Это используется для временной замены и усиления цвета во время мигания.

```dart
ShaderMask(
  blendMode: BlendMode.srcATop,
  shaderCallback: (bounds) {
    return LinearGradient(
      colors: [Colors.blue, Colors.green, Colors.red],
      stops: [0.0, 0.5, 1.0],
    ).createShader(bounds);
  },
  child:

transform:
    Matrix4.translationValues(randomPosition(4), randomPosition(4), 0),

double randomPosition(int position) {
  return Random().nextInt(position).toDouble() * 
         (Random().nextBool() ? -1 : 1);
}
```| ![image](http://img.cdn.guoshuyu.cn/20230322_N21/image11.gif) | ![image](http://img.cdn.guoshuyu.cn/20230322_N21/image12.gif) |
| ------------------------------------------------------------ | ------------------------------------------------------------ |

Итоговый этап — объединение этих эффектов текста с помощью `Stack`. Мы используем таймер для постоянной смены состояний «поломки» и «нормального режима» текста, а также случайного выбора различных состояний «поломки».

```dart
timer = Timer.periodic(Duration(milliseconds: 400), (timer) {
  tearFunction();
});
timer2 = Timer.periodic(Duration(milliseconds: 600), (timer) {
  tearFunction();
});

tearFunction() {
  count++;
  tear = count % 2 == 0;
  if (tear == true) {
    setState(() {});
    Future.delayed(Duration(milliseconds: 150), () {
      setState(() {
        tear = false;
      });
    });
  }
}