如何在 Flutter 中为 Container 创建渐变边框

Question

我在为颜色为渐变的容器创建边框时遇到困难。该设计基于我必须编码的 Figma 设计。我的包装外容器并在里面填充的想法是无效的。我该怎么办？

class PoppinButton extends StatelessWidget {
  const PoppinButton({Key? key, required this.text}) : super(key: key);
  final String text;
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 55,
      padding: const EdgeInsets.all(2),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(30),
          gradient: const LinearGradient(
              begin: Alignment(1,-1),
              end: Alignment(1,-1),
              colors: <Color>[Color(0xFFFF53C0),Color(0x00FF53C0),],
              // stops: [0.1507, 1.044]
          )
      ),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(30),
          gradient: const LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: <Color>[Color(0xFFB6116B),Color(0xFF3B1578)],
            stops: [0.1507, 1.044]
          )
        ),
        child: Center(
          child: Text(text,style: GoogleFonts.poppins(
            textStyle: const TextStyle(
              color: Colors.white,
              fontSize: 18,

            )
          ),),
        ),
      ),
    );
  }
}

我期待一个可以帮助我解决问题的正确答案，tks guy

Answer 1

您可以尝试添加 2 个嵌套容器，其中内部填充实际上是边框厚度。为每个容器定义你喜欢的渐变：

class PoppinButton extends StatelessWidget {
  const PoppinButton({Key? key, required this.text}) : super(key: key);
  final String text;

  @override
  Widget build(BuildContext context) {
    final innerDecoration = BoxDecoration(
      borderRadius: BorderRadius.circular(30),
      gradient: const LinearGradient(
        begin: Alignment.centerLeft,
        end: Alignment.centerRight,
        colors: <Color>[
          Color(0xFFFF53C0),
          Color(0xFF5A1475),
        ],
        stops: [0.1507, 1.044],
      ),
    );

    final outerBoxDecoration = BoxDecoration(
      borderRadius: BorderRadius.circular(30),
      gradient: const LinearGradient(
        begin: Alignment.centerLeft,
        end: Alignment.centerRight,
        colors: <Color>[
          Color(0xFFFDC2E0),
          Color(0xFFB6116B),
        ],
        stops: [0.1507, 1.044],
      ),
    );

    return Container(
      height: 55,
      decoration: outerBoxDecoration,
      child: Padding(
        padding: const EdgeInsets.all(4.0),
        child: Container(
          decoration: innerDecoration,
          child: Center(
              child: Text(
            text,
            style: const TextStyle(
              color: Colors.white,
              fontSize: 18,
            ),
          )),
        ),
      ),
    );
  }
}