DEV Community

loading...
Cover image for Flutter Create a Rounded Container with a gradient border

Flutter Create a Rounded Container with a gradient border

ValerianaGit💙
Flutter and iOS dev. For the love of mobile.
・Updated on ・1 min read

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,
           ),
         ),`
Enter fullscreen mode Exit fullscreen mode

Here is your end result
Alt Text

Please follow my page to share in this Flutter journey!

Discussion (2)

Collapse
rodionm profile image
Rodion Mostovoy

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

Collapse
rodionm profile image
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,
        ),
      ),
    );
Enter fullscreen mode Exit fullscreen mode