Beautiful Animations with CustomPaint in Flutter
Aadarsh Kunwar
Posted on October 25, 2024
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;
}
}
💖 💪 🙅 🚩
Aadarsh Kunwar
Posted on October 25, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.