CODEWITHSUNDEEP
dartflutter
shakil.k
shakil.k

Reputation: 1723

Flutter - I am looking for a way to do a pulse animation

i am trying to achieved some thing like this in flutter enter image description here

Upvotes: 19

Views: 16966

Answers (3)

Richard Heap
Richard Heap

Reputation: 51751

One way is with CustomPainter and an animation. Also look at SpriteWidget.

import 'dart:math';

import 'package:flutter/material.dart';

class SpritePainter extends CustomPainter {
  final Animation<double> _animation;

  SpritePainter(this._animation) : super(repaint: _animation);

  void circle(Canvas canvas, Rect rect, double value) {
    double opacity = (1.0 - (value / 4.0)).clamp(0.0, 1.0);
    Color color = Color.fromRGBO(0, 117, 194, opacity);

    double size = rect.width / 2;
    double area = size * size;
    double radius = sqrt(area * value / 4);

    final Paint paint = Paint()..color = color;
    canvas.drawCircle(rect.center, radius, paint);
  }

  @override
  void paint(Canvas canvas, Size size) {
    Rect rect = Rect.fromLTRB(0.0, 0.0, size.width, size.height);

    for (int wave = 3; wave >= 0; wave--) {
      circle(canvas, rect, wave + _animation.value);
    }
  }

  @override
  bool shouldRepaint(SpritePainter oldDelegate) {
    return true;
  }
}

class SpriteDemo extends StatefulWidget {
  @override
  SpriteDemoState createState() => SpriteDemoState();
}

class SpriteDemoState extends State<SpriteDemo>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
    );
    //_startAnimation();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _startAnimation() {
    _controller
      ..stop()
      ..reset()
      ..repeat(period: const Duration(seconds: 1));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Pulse')),
      body: CustomPaint(
        painter: SpritePainter(_controller),
        child: SizedBox(
          width: 200.0,
          height: 200.0,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _startAnimation,
        child: new Icon(Icons.play_arrow),
      ),
    );
  }
}

void main() {
  runApp(
    MaterialApp(
      home: SpriteDemo(),
    ),
  );
}

Upvotes: 47

Wian Snyman
Wian Snyman

Reputation: 41

For those looking to create an animation which is not circular, but rectangular with possible rounded borders, you can replace the SpritePainter from the top answer with:

class SpritePainter extends CustomPainter {
  final Animation<double> _animation;

  SpritePainter(this._animation) : super(repaint: _animation);

  void roundedRect(Canvas canvas, Rect rect, double animValue, int waveAmount) {
    double opacity = (1.0 - (animValue / waveAmount)).clamp(0.0, 1.0);
    Color color = new Color.fromRGBO(0, 117, 194, opacity);

    final pixelMiltiplier = 20;
    final newWidth = rect.width + animValue*pixelMiltiplier;
    final newHeight = rect.height + animValue*pixelMiltiplier;
    final widthIncrease = newWidth/rect.width;
    final heightIncrease = newHeight/rect.height;
    final widthOffset = (widthIncrease - 1) / 2;
    final heightOffet = (heightIncrease - 1) / 2;

    final Paint paint = new Paint()..color = color;
    canvas.drawRRect(
        RRect.fromRectAndRadius(
            Rect.fromLTWH(-rect.width * widthOffset, -rect.height * heightOffet,
                rect.width * widthIncrease, rect.height * heightIncrease),
            Radius.circular(15.0)),
        paint);
  }

  @override
  void paint(Canvas canvas, Size size) {
    Rect rect = new Rect.fromLTRB(0.0, 0.0, size.width, size.height);
    final waveAmount = 1;

    if (!_animation.isDismissed) {
      for (int wave = waveAmount-1; wave >= 0; wave--) {
        roundedRect(canvas, rect, wave + _animation.value, waveAmount);
      }
    }
  }

  @override
  bool shouldRepaint(SpritePainter oldDelegate) {
    return true;
  }
}

Upvotes: 1

PAP DAOUDA THIOME
PAP DAOUDA THIOME

Reputation: 11

You can also use Flare with: flare_flutter. It's more simple.

Upvotes: 0

Related Questions