Flutter Create a Rounded Container with a gradient border

Recognition where it is due. I got most of this approach from Ankit Dubey from stackOverflow. Though I added how to round the circle. If you find this helpful, please head over to his answer in stackOverflow and upvote him. Here

Your constants file

final kInnerDecoration = BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.circular(32),
);
// border for all 3 colors
final kGradientBoxDecoration = BoxDecoration(
gradient: LinearGradient(
colors: [Colors.yellow.shade600, Colors.orange, Colors.red]),
border: Border.all(
color: Colors.amber, //kHintColor, so this should be changed?
),
borderRadius: BorderRadius.circular(32),
);

Your Widget

`ClipOval(
           clipBehavior: Clip.antiAlias,
           child: Container(
             child: Padding(
               padding: const EdgeInsets.all(8.0), //width of the border
               child: ClipOval(
                 clipBehavior: Clip.antiAlias,
                 child: Container(
                   width:
                       240.0, // this width forces the container to be a circle
                   height:
                       240.0, // this height forces the container to be a circle
                   child: Text(
                     "12",
                     style: TextStyle(
                       fontSize: 200.0,
                     ),
                     textAlign: TextAlign.center,
                   ),
                   decoration: kInnerDecoration,
                 ),
               ),
             ),
             decoration: kGradientBoxDecoration,
           ),
         ),`

Here is your end result

Please follow my page to share in this Flutter journey!

Comments

[Rodion Mostovoy]

Thank you!
PS. Better to set child as a last argument.

[Rodion Mostovoy]

Also it's not necessary to use ClipOval:

    final borderWidth = 1.0;
    final kInnerDecoration = BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(20),
    );
    final kGradientBoxDecoration = BoxDecoration(
      gradient: LinearGradient(
colors: [Colors.yellow.shade600, Colors.orange, Colors.red]),,
      borderRadius: BorderRadius.circular(20),
    );

    return Container(
      decoration: kGradientBoxDecoration,
      child: Padding(
        padding: EdgeInsets.all(borderWidth),
        child: DecoratedBox(
          decoration: kInnerDecoration,
          child: child,
        ),
      ),
    );