How to create gradient border for Container in Flutter

Question

Figma design I am having difficulty creating a border for a Container in which the color is a gradient. The design is based on a Figma design that I have to code. My idea of wrapping an outer container and padding it inside is not effective. What should I do?

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,

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

Figma color and border

Im expecting a correct answer that can help me to fix my problem , tks guy new Edit : this answer code below is not working :((

Take a look at this question: https://stackoverflow.com/q/55395641/8144311 — Zahra, Feb 27 '23 at 06:04
the code below is working for me on DartPad https://dartpad.dev/b281f3e779e8905a8f9c83c1ce29141d — MarcoB, Feb 27 '23 at 20:12

score 0 · Answer 1 · answered Feb 26 '23 at 23:02

You could try to add 2 nested container where the padding of the inner is actually the border thickness. For each container define the gradient you like:

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

How to create gradient border for Container in Flutter

1 Answers1