dev-resources.site
for different kinds of informations.
Beautiful Animations with CustomPaint in Flutter
Published at
10/25/2024
Categories
coding
programming
flutter
dart
Author
Aadarsh Kunwar
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;
}
}
Articles
12 articles in total
What's new in Flutter 3.27
read article
Top 10 flutter interview questions
read article
Beautiful Animations with CustomPaint in Flutter
currently reading
Slider in Flutter
read article
Back after a gap because of my exams
read article
Flutter Date and Time Picker
read article
Flutter PopupMenuButton
read article
Flutter DropdownButton
read article
Flutter ListTile
read article
Aadarsh Kunwar
read article
Flutter BottomNavigationBar
read article
Flutter
read article
Featured ones: