Как добавить эффект неонового свечения к границе / тени виджета? - PullRequest
Новая
       20

Как добавить эффект неонового свечения к границе / тени виджета?

1 голос
/ 03 июня 2019

Есть ли способ создать подобные эффекты с помощью флаттера (CustomPaint со специальным шейдером или что-то в этом роде)?

enter image description here

enter image description here

Например.У меня есть этот контейнер, и я нарисовал несколько строк на нем, используя CustomPainter.Могу ли я нарисовать эти линии, используя неоновый эффект, как на картинках?Класс Paint имеет свойство шейдера, которое, как я думал, я могу настроить для достижения этой цели, но я не понимаю, как это сделать.

Container(
          color: Colors.white,
          width: 300,
          height: 300,
          child: CustomPaint(
            painter: NeonPainter(),

          ),


        ),



class NeonPainter extends CustomPainter {
  Paint neonPaint = Paint();


  NeonPainter() {
    neonPaint.color = const Color(0xFF3F5BFA);
    neonPaint.strokeWidth = 2.5;
    neonPaint.shader = /// how to create a shader or something for that?
    neonPaint.someOtherProperty///

  }

  @override
  void paint(Canvas canvas, Size size) {
    drawLine(canvas, size.width / 2 - 50, size.height / 2, size.width / 2 + 50,
        size.height / 2);
    drawLine(canvas, size.width / 2 + 50, size.height / 2, size.width / 2 + 100,
        size.height / 2 + 50);
    drawLine(canvas, size.width / 2 + 100, size.height / 2 + 50,
        size.width / 2 - 100, size.height / 2 + 50);
    drawLine(
        canvas, size.width / 2 - 100, size.height / 2 + 50, size.width / 2 - 50,
        size.height / 2);
  }

  void drawLine(canvas, double x1, double y1, double x2, double y2) {
    canvas.drawLine(Offset(x1, y1), Offset(x2, y2), neonPaint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

1 Ответ

1 голос
/ 03 июня 2019

Вы можете использовать виджет BoxShadow. Вы можете установить цвет, blurRadius, SpreadRadius и смещение, чтобы добиться того, что вы хотите ..

Обратите внимание, что в примере я использовал его, чтобы получить тень. Но вы можете получить свечение, если правильно установите свойства .. 

 Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(50),
                boxShadow: [
                  BoxShadow(
                    color: Color(0xFF000000).withAlpha(60),
                    blurRadius: 6.0,
                    spreadRadius: 0.0,
                    offset: Offset(
                      0.0,
                      3.0,
                    ),
                  ),
                ]),
...