Logo

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
Categories
4 categories in total
coding
open
programming
open
flutter
open
dart
open
Beautiful Animations with CustomPaint in Flutter

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;
  }
}

Featured ones: