I've used CustomPaint to create stunning animations like rotating squares and expanding circles, giving a unique look to Flutter apps. It's a powerful tool for customized UI designs. Check out the full code in my GitHub repo: github.com/aadarshk7/flutter_utils 💻
Flutter #CustomPaint #Animations #UI #GitHub
import 'package:flutter/material.dart'; import 'dart:math'; void main() { runApp(MaterialApp( home: CombinedAnimationScreen(), )); } class CombinedAnimationScreen extends StatefulWidget { @override _CombinedAnimationScreenState createState() => _CombinedAnimationScreenState(); } class _CombinedAnimationScreenState extends State<CombinedAnimationScreen> with SingleTickerProviderStateMixin { late AnimationController _controller; @override void initState() { super.initState(); // Initialize the AnimationController _controller = AnimationController( vsync: this, duration: const Duration(seconds: 4), )..repeat(reverse: true); // Repeat animation } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( body: Container( decoration: const BoxDecoration( gradient: LinearGradient( colors: [Color(0xFF00F260), Color(0xFF0575E6)], begin: Alignment.topLeft, end: Alignment.bottomRight, ), ), child: Center( child: AnimatedBuilder( animation: _controller, builder: (context, child) { return Stack( alignment: Alignment.center, children: [ // Custom paint for the expanding and contracting circles CustomPaint( painter: ExpandingCirclesPainter(_controller.value), child: SizedBox( width: 300, height: 300, ), ), // Custom paint for the rotating square CustomPaint( painter: RotatingSquarePainter(_controller.value), child: SizedBox( width: 150, height: 150, ), ), ], ); }, ), ), ), ); } } class ExpandingCirclesPainter extends CustomPainter { final double progress; ExpandingCirclesPainter(this.progress); @override void paint(Canvas canvas, Size size) { final center = Offset(size.width / 2, size.height / 2); // Gradient paint with fading effect final paint = Paint() ..style = PaintingStyle.fill ..color = Colors.deepPurple.withOpacity(1.0 - progress); // Draw multiple expanding circles for (int i = 1; i <= 5; i++) { final radius = (size.width / 10) * i * progress; canvas.drawCircle(center, radius, paint); } } @override bool shouldRepaint(covariant CustomPainter oldDelegate) { return true; } } class RotatingSquarePainter extends CustomPainter { final double progress; RotatingSquarePainter(this.progress); @override void paint(Canvas canvas, Size size) { final paint = Paint() ..style = PaintingStyle.fill ..shader = LinearGradient( colors: [Colors.deepPurpleAccent, Colors.orangeAccent, Colors.pink], stops: [0.3, 0.6, 1.0], ).createShader(Rect.fromLTWH(0, 0, size.width, size.height)); final center = Offset(size.width / 2, size.height / 2); final side = size.width / 2; // Apply rotation transformation canvas.save(); canvas.translate(center.dx, center.dy); canvas.rotate(2 * pi * progress); canvas.translate(-center.dx, -center.dy); final rect = Rect.fromCenter(center: center, width: side, height: side); canvas.drawRect(rect, paint); canvas.restore(); } @override bool shouldRepaint(covariant CustomPainter oldDelegate) { return true; } }
Top comments (0)