flutterflutter-layoutborder

Is there a way to put a gradient colored border around a container?


What I have:

Container(
        decoration: BoxDecoration( 
          borderRadius: BorderRadius.circular(35),
          border: Border.all(
            color: const Color(0xFFE800E8),//<---- Insert Gradient Here 
            width: 1.5,
          )
        ),
),

This a visual representation of the border, which is currently pink, this is what I want to make gradient:


Solution

  • I'm not sure if there is a simpler way. But you could construct it using a couple of containers like this:

    Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            Colors.black,
            Colors.pinkAccent,
          ],
        ),
        borderRadius: BorderRadius.circular(35),
      ),
      height: 100,
      child: Padding(
        padding: const EdgeInsets.all(1.5),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(35),
          ),
          child: Center(
            child: Text('Enter further widgets here'),
          ),
        ),
      ),
    ),
    

    Gradient border