How to create a conic gradient border?

You can make you own border implementation, and in this case, it's not even that hard. The only thing you need to keep in mind is that the canvas can overpaint any part of the view (window).

In this example I used linear instead of a conic gradient because I think it replicates better the image and because there is no conic gradient (yet), if you want a conic gradient you will need to use a shader or a image shader with the gradient.

Most of RoundedRectangleGradientBorder is boilerplate, the only required override is paint().

import 'dart:ui' as ui; import 'package:flutter/material.dart'; import 'package:flutter/foundation.dart'; // objectRuntimeType() / listEquals() void main() => runApp( const MaterialApp(home: App()), // ); class App extends StatefulWidget { const App({super.key}); @override AppState createState() => AppState(); } class AppState extends State<App> { final base_color = Color(0xFF27425E); final mix_color = Color(0xFFA7C5E2); @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Color(0xFF3F3F3F), body: Center( child: Container( decoration: ShapeDecoration( color: base_color, shape: RoundedRectangleGradientBorder( side: BorderSide(width: 3.0), borderRadius: BorderRadius.all(Radius.circular(30)), gradient: LinearGradient( begin: Alignment(-0.2, -1.0), end: Alignment(0.2, 1.0), colors: <Color>[ Color.lerp(base_color, mix_color, 0.5)!, Color.lerp(base_color, mix_color, 0.1)!, Color.lerp(base_color, mix_color, 0.1)!, Color.lerp(base_color, mix_color, 0.5)!, ], ), ), ), child: Container(width: 300, height: 150), ), ), ); } } // Overrides the border paint color with a [Gradient] class RoundedRectangleGradientBorder extends RoundedRectangleBorder { const RoundedRectangleGradientBorder({ super.side, super.borderRadius, required this.gradient, }); final Gradient gradient; @override ShapeBorder scale(double t) { return RoundedRectangleGradientBorder( side: side.scale(t), borderRadius: borderRadius * t, gradient: gradient.scale(t), ); } @override ShapeBorder? lerpFrom(ShapeBorder? a, double t) { if (a is RoundedRectangleGradientBorder) { return RoundedRectangleGradientBorder( side: BorderSide.lerp(a.side, side, t), borderRadius: BorderRadiusGeometry.lerp(a.borderRadius, borderRadius, t)!, gradient: Gradient.lerp(a.gradient, null, t)!, ); } return super.lerpFrom(a, t); } @override ShapeBorder? lerpTo(ShapeBorder? b, double t) { if (b is RoundedRectangleGradientBorder) { return RoundedRectangleGradientBorder( side: BorderSide.lerp(side, b.side, t), borderRadius: BorderRadiusGeometry.lerp(borderRadius, b.borderRadius, t)!, gradient: Gradient.lerp(null, b.gradient, t)!, ); } return super.lerpTo(b, t); } @override RoundedRectangleGradientBorder copyWith({ BorderSide? side, BorderRadiusGeometry? borderRadius, Gradient? gradient, }) { return RoundedRectangleGradientBorder( side: side ?? this.side, borderRadius: borderRadius ?? this.borderRadius, gradient: gradient ?? this.gradient, ); } @override void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) { final border_paint = Paint(); border_paint.shader = gradient.createShader(rect); switch (side.style) { case BorderStyle.none: break; case BorderStyle.solid: final border_rrect = borderRadius.resolve(textDirection).toRRect(rect); if (side.width == 0.0) { canvas.drawRRect(border_rrect, border_paint); } else { final inner_rrect = border_rrect.deflate(side.strokeInset); final outer_rrect = border_rrect.inflate(side.strokeOutset); canvas.drawDRRect(outer_rrect, inner_rrect, border_paint); } } } @override bool operator ==(Object other) { if (other.runtimeType != runtimeType) { return false; } return other is RoundedRectangleGradientBorder && other.side == side && other.borderRadius == borderRadius && other.gradient == gradient; } @override int get hashCode => Object.hash(side, borderRadius, gradient); @override String toString() { return '${objectRuntimeType(this, 'RoundedRectangleGradientBorder')} ($side, $borderRadius, $gradient)'; } } 

You should paint border with gradient on canvas. I think it will be possible to do it without canvas.

You could do something like this:

class GradientBorderContainer extends StatelessWidget { GradientBorderContainer({ required Gradient gradient, required this.child, this.backgroundDecoration, double strokeWidth = 1.0, BorderRadius borderRadius = AppTheme.borderRadiusCircular16, super.key, }) : painter = CustomGradient( gradient: gradient, strokeWidth: strokeWidth, borderRadius: borderRadius, ); final Decoration? backgroundDecoration; final CustomGradient painter; final Widget child; @override Widget build(BuildContext context) { Widget widget = RepaintBoundary( child: CustomPaint(painter: painter, child: child), ); if (backgroundDecoration != null) { widget = DecoratedBox(decoration: backgroundDecoration!, child: widget); } return widget; } } 

class CustomGradient extends CustomPainter { CustomGradient({ required this.borderRadius, required this.gradient, required this.strokeWidth, }) : p = Paint() ..style = PaintingStyle.stroke ..strokeWidth = strokeWidth; final Gradient gradient; final double strokeWidth; final Paint p; final BorderRadius borderRadius; @override void paint(Canvas canvas, Size size) { final rect = Rect.fromLTRB( strokeWidth / 2, strokeWidth / 2, size.width - strokeWidth / 2, size.height - strokeWidth / 2, ); final rRect = RRect.fromRectAndCorners( rect, topLeft: borderRadius.topLeft, topRight: borderRadius.topRight, bottomLeft: borderRadius.bottomLeft, bottomRight: borderRadius.bottomRight, ); p.shader = gradient.createShader(rect); canvas.drawRRect(rRect, p); } @override bool shouldRepaint(covariant CustomGradient oldDelegate) => oldDelegate.gradient != gradient || oldDelegate.borderRadius != borderRadius || oldDelegate.strokeWidth != strokeWidth; } 

then in widget somewhere you need it:

GradientBorderContainer( gradient: AppGradient.firstGradient, borderRadius: AppTheme.borderRadiusCircular20, strokeWidth: 1.4, backgroundDecoration: const BoxDecoration( borderRadius: AppTheme.borderRadiusCircular20, gradient: AppGradient.secondGradient, ), child: Padding( padding: allPadding20, ...... .... static const firstGradient = LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomCenter, colors: [ ColorPalette.white, ColorPalette.whiteWithOpacity01, ColorPalette.whiteWithOpacity01, ColorPalette.whiteWithOpacity40, ], stops: [0.0212, 0.66, 0.7, 0.9302], ); static const secondGradient = LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [ ColorPalette.granitWithOpacity30, ColorPalette.granitWithOpacity30, ColorPalette.ebony, ], stops: [0, 0.4, 1], );