Advertisement
namo352

gradiant circle border

Jul 30th, 2024 (edited)
128
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
Dart 3.63 KB | None | 0 0
  1. import 'package:flutter/material.dart';
  2.  
  3. class MyHomePage extends StatelessWidget {
  4.   const MyHomePage({super.key});
  5.  
  6.   @override
  7.   Widget build(BuildContext context) {
  8.     const gradiantColor = [
  9.       Color.fromARGB(100, 235, 235, 235),
  10.       Color.fromARGB(255, 235, 235, 235),
  11.       Color.fromARGB(255, 235, 235, 235),
  12.       Color.fromARGB(255, 235, 235, 235),
  13.       Color.fromARGB(100, 235, 235, 235),
  14.     ];
  15.     double width = MediaQuery.of(context).size.width;
  16.     return Scaffold(
  17.       body: Center(
  18.         child: ClipRect(
  19.           clipBehavior: Clip.antiAlias,
  20.           child: Container(
  21.             color: Colors.white,
  22.             width: width,
  23.             height: width / 1.5,
  24.             child: Stack(
  25.               children: [
  26.                 _buildGradientCircle(width / 1.8, 0.75, gradiantColor),
  27.                 _buildGradientCircle(width / 2, 0.6, gradiantColor),
  28.                 Transform.scale(
  29.                   scaleX: 0.7,
  30.                   scaleY: 0.7,
  31.                   child: Container(
  32.                     decoration: const BoxDecoration(
  33.                       color: Colors.amber,
  34.                       shape: BoxShape.circle,
  35.                     ),
  36.                   ),
  37.                 ),
  38.               ],
  39.             ),
  40.           ),
  41.         ),
  42.       ),
  43.     );
  44.   }
  45.  
  46.   Widget _buildGradientCircle(
  47.       double size, double scale, List<Color> gradientColors) {
  48.     return Center(
  49.       child: SizedBox(
  50.         height: size,
  51.         child: ClipRect(
  52.           clipBehavior: Clip.hardEdge,
  53.           child: GradientBorderShadowCircle(
  54.             scale: scale,
  55.             borderWidth: 2,
  56.             shadowBlurRadius: 20,
  57.             gradient: LinearGradient(
  58.               colors: gradientColors,
  59.               begin: Alignment.topCenter,
  60.               end: Alignment.bottomCenter,
  61.             ),
  62.           ),
  63.         ),
  64.       ),
  65.     );
  66.   }
  67. }
  68.  
  69. class GradientBorderShadowCircle extends StatelessWidget {
  70.   final double scale;
  71.   final double borderWidth;
  72.   final double shadowBlurRadius;
  73.   final Gradient gradient;
  74.  
  75.   const GradientBorderShadowCircle({
  76.     super.key,
  77.     required this.scale,
  78.     required this.borderWidth,
  79.     required this.shadowBlurRadius,
  80.     required this.gradient,
  81.   });
  82.  
  83.   @override
  84.   Widget build(BuildContext context) {
  85.     return Transform.scale(
  86.       scale: scale,
  87.       child: CustomPaint(
  88.         size: Size(double.infinity, double.infinity),
  89.         painter: _GradientBorderShadowPainter(
  90.           borderWidth: borderWidth,
  91.           shadowBlurRadius: shadowBlurRadius,
  92.           gradient: gradient,
  93.         ),
  94.       ),
  95.     );
  96.   }
  97. }
  98.  
  99. class _GradientBorderShadowPainter extends CustomPainter {
  100.   final double borderWidth;
  101.   final double shadowBlurRadius;
  102.   final Gradient gradient;
  103.  
  104.   _GradientBorderShadowPainter({
  105.     required this.borderWidth,
  106.     required this.shadowBlurRadius,
  107.     required this.gradient,
  108.   });
  109.  
  110.   @override
  111.   void paint(Canvas canvas, Size size) {
  112.     final rect = Rect.fromLTWH(0, 0, size.width, size.height);
  113.     final paint = Paint()
  114.       ..shader = gradient.createShader(rect)
  115.       ..style = PaintingStyle.stroke
  116.       ..strokeWidth = borderWidth;
  117.  
  118.     final shadowPaint = Paint()
  119.       ..shader = gradient.createShader(rect)
  120.       ..maskFilter = MaskFilter.blur(BlurStyle.outer, shadowBlurRadius);
  121.  
  122.     final radius = (size.width / 2) - (borderWidth / 2);
  123.  
  124.     canvas.drawCircle(size.center(Offset.zero), radius, shadowPaint);
  125.     canvas.drawCircle(size.center(Offset.zero), radius, paint);
  126.   }
  127.  
  128.   @override
  129.   bool shouldRepaint(covariant CustomPainter oldDelegate) {
  130.     return false;
  131.   }
  132. }
  133.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement