如何创建带有线性渐变边框的提升按钮

Question

我正在尝试在颤振中创建一个带有线性渐变边框的升高按钮，我使用了不同的方法，但我没有得到想要的结果，请谁能帮助我。

我尝试为提升的按钮创建自定义小部件，但它似乎不起作用。

这是我创建的自定义小部件......

class GradientElevatedButtonBorder extends StatelessWidget {
  final List<Color> colors;
  final double width;
  final Radius borderRadius;

  GradientElevatedButtonBorder({
    required this.colors,
    this.width = 2,
    this.borderRadius = Radius.circular(10),
  });

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: GradientBorderPainter(
        colors: colors,
        width: width,
        borderRadius: borderRadius,
      ),
    );
  }
}

class GradientBorderPainter extends CustomPainter {
  final List<Color> colors;
  final double width;
  final Radius borderRadius;

  GradientBorderPainter({
    required this.colors,
    this.width = 2,
    this.borderRadius = Radius.circular(10),
  });

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = width;

    final gradient = LinearGradient(
      colors: colors,
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    );

    paint.shader = gradient.createShader(
      Rect.fromLTWH(0, 0, size.width, size.height),
    );

    final path = Path()
      ..addRRect(
        RRect.fromRectAndRadius(
          Rect.fromLTWH(0, 0, size.width, size.height),
          borderRadius,
        ),
      );

    canvas.drawPath(path, paint);
  }

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

我使用此类作为 ElevatedButton 小部件的边框属性：

    ElevatedButton(
      style: ElevatedButton.styleFrom(
        side: BorderSide.none,
        padding: EdgeInsets.all(15),
        elevation: 0,
        primary: Colors.transparent,
        shape: GradientElevatedButtonBorder(
          colors: [
            Colors.red,
            Colors.blue,
            Colors.green,
          ],
        ),
      ),
      onPressed: () {},
      child: Text('Gradient Elevated Button'),
    )

有没有人能解决这个问题？

Answer 1

我可以提供一些棘手的方法来完成此任务：

使用提供渐变边框的gradient_borders包。

 Container(
              width: 200,
              height: 50,
              decoration: BoxDecoration(
               border: const GradientBoxBorder( // depend on that package to use GradientBoxBorder
                  gradient: LinearGradient(colors: [Colors.blue, Colors.red]),
                  width: 3,
                ),
                borderRadius: BorderRadius.circular(16),
              ),
              child: Center(child: Text('Press')),
            ),

您可以自由地使用一个容器覆盖另一个来进行设计：

    Container(
        width: 200,
        padding: EdgeInsets.all(3),
        height: 50,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Colors.blue, Colors.red],
          ),
          borderRadius: BorderRadius.circular(16),
        ),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(13),
          ),
          child: Center(child: Text('Press')),
        )),

结果：

希望对您有帮助。