How to set gradient color to Container's border in flutter

Question

I'm trying to set gradient color to container's border line, here is the example i need.

here is my code.

Container(
                height: 50,
                width: 140,
                decoration: BoxDecoration(
                  border: Border.all(
                    color: Colors.black
                  ),
                  borderRadius: BorderRadius.circular(30),
                  color: Colors.white
                ),
                child: const Center(
                  child: Text(
                    'Sign in',
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Colors.black,
                    ),
                  ),
                ),
              )

i couldn't find any solution to this, i tried chat gpt and all, still i couldn't find any solution,

This could help you https://stackoverflow.com/questions/55395641/outlined-transparent-button-with-gradient-border-in-flutter — Niladri Raychaudhuri, Mar 21 '23 at 06:29
You can wrap with another container with white background and have some padding around it to show top level container color — Md. Yeasin Sheikh, Mar 21 '23 at 06:40

score 1 · Accepted Answer · answered Mar 21 '23 at 06:49

This way you can achieve a gradient border.

Container(
                height: 50,
                width: 140,
                padding: const EdgeInsets.all(2),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(30),
                  gradient: const LinearGradient(
                    colors: [Colors.red, Colors.blue],
                  )
                ),
                child: Container(
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(30),
                    color: Colors.white,
                  ),
                  child: const Text(
                    'Sign in',
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Colors.black,
                    ),
                  ),
                ),
              ),

not good solution if button must be transparent – Nagual Mar 21 '23 at 07:49 — Nagual, Mar 21 '23 at 07:49

How to set gradient color to Container's border in flutter

1 Answers1