Like Animation or Live Telecast Like in Flutter

Like Animation or Live Telecast Like in Flutter :

Like Animation or Live Telecast Like in Flutter : This flutter tutorial post is live telecast match, video, learning etc. That particular telecast like animation and count. lets learn about Like Animation or Live Telecast Like in Flutter.

Like Animation or Live Telecast Like in Flutter

Like Animation or Live Telecast Like in Flutter :

button_bounce.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class AnimatedButton extends StatefulWidget {
  final VoidCallback onPressed;

  const AnimatedButton({Key key, this.onPressed}) : super(key: key);

  @override
  _AnimatedButtonState createState() => _AnimatedButtonState();
}

class _AnimatedButtonState extends State<AnimatedButton>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 800),
    );

    animation = TweenSequence(
      <TweenSequenceItem<double>>[
        TweenSequenceItem<double>(
          tween: Tween<double>(begin: 1.0, end: 1.4),
          weight: 1,
        ),
        TweenSequenceItem<double>(
          tween: Tween<double>(begin: 1.4, end: 0.6),
          weight: 1,
        ),
        TweenSequenceItem<double>(
          tween: Tween<double>(begin: 0.6, end: 1.0),
          weight: 1,
        ),
      ],
    ).animate(_controller);
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (BuildContext context, Widget child) {
        return ScaleTransition(
          scale: animation,
          child: FloatingActionButton(
            onPressed: _onTapDown,
            child: Icon(
              Icons.star,
              color: Colors.white,
            ),
            mini: true,
          ),
        );
      },
    );
  }

  Future _onTapDown() async {
    widget.onPressed();

    await _controller.forward();
    _controller.reset();
  }
}

// for testing
class BounceDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: AnimatedButton()),
    );
  }
}

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

floating_points.dart

import 'package:flutter/material.dart';

enum Direction { start, end }

class FloatingNumber extends StatefulWidget {
  final int number;
  final Color color;
  final Direction direction;

  const FloatingNumber({
    Key key,
    @required this.number,
    @required this.color,
    this.direction = Direction.start,
  }) : super(key: key);

  @override
  FloatingNumberState createState() => FloatingNumberState();
}

class FloatingNumberState extends State<FloatingNumber>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _slideAnimation;
  Animation<double> _opacityAnimation;

  final _animationDuration = const Duration(milliseconds: 600);

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      vsync: this,
      duration: _animationDuration,
    );

    final dx = widget.direction == Direction.start ? -0.5 : 0.5;

    _slideAnimation =
        Tween<Offset>(begin: Offset(dx,0.0), end: Offset(dx, -10.0))
            .animate(_controller);

    _opacityAnimation = Tween<double>(begin: 1.0, end: 0.0)
        .chain(CurveTween(curve: Curves.easeInOutSine))
        .animate(_controller);

    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (BuildContext context, Widget child) {
        return AnimatedOpacity(
          opacity: _opacityAnimation.value,
          duration: _animationDuration,
          child: SlideTransition(
            position: _slideAnimation,
            child: Text(
              '+${widget.number}',
              style: TextStyle(
                color: widget.color,
                fontSize: 18.0 + widget.number,
              ),
            ),
          ),
        );
      },
    );
  }
}

const List<Direction> directions = [
  Direction.start,
  Direction.start,
  Direction.start,
  Direction.end,
  Direction.end,
  Direction.end,
  Direction.start,
  Direction.start,
  Direction.end,
  Direction.end,
];

const List<Color> colors = [
  Color(0xFF3AEAFF),
  Color(0xFF3CCD48),
  Color(0xFFFFFC21),
  Color(0xFFF1A26C),
  Color(0xFFED49AA),
  Color(0xFF10F0FF),
  Color(0xFF02F019),
  Color(0xFFFDF525),
  Color(0xFFFF8C02),
  Color(0xFFFF58D6),
];



// for testing
class FloatingNumbersDemo extends StatefulWidget {
  @override
  FloatingNumbersDemoState createState() => FloatingNumbersDemoState();
}

class FloatingNumbersDemoState extends State<FloatingNumbersDemo> {
  List<Widget> numbers = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(onPressed: _onTapDown),
      body: Center(
        child: SizedBox(
          height: 300,
          width: 200,
          child: Stack(
            children: <Widget>[
              ...numbers,
            ],
          ),
        ),
      ),
    );
  }

  Future _onTapDown() async {
    for (var i = 1; i < 11; ++i) {
      setState(() {
        var selector = (i - 1) % 10;
        numbers.add(FloatingNumber(
          number: i,
          color: colors[selector],
          direction: directions[selector],
        ));
      });
      await Future.delayed(Duration(milliseconds: 100));
    }
  }
}

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

star_button.dart

import 'package:flutter/material.dart';

import 'button_bounce.dart';
import 'floating_points.dart';
import 'pulse.dart';

class StarButton extends StatefulWidget {
  final VoidCallback onPressed;

  const StarButton({Key key, this.onPressed}) : super(key: key);

  @override
  StarButtonState createState() => StarButtonState();
}

class StarButtonState extends State<StarButton>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  var pulseAnimationDuration = const Duration(milliseconds: 300);

  Animation<double> pulseAnimation;

  List<FloatingNumber> numbers = [];

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: pulseAnimationDuration,
    );

    pulseAnimation = TweenSequence(
      <TweenSequenceItem<double>>[
        TweenSequenceItem<double>(
          tween: Tween<double>(begin: -1.0, end: -0.0),
          weight: 0.01,
        ),
        TweenSequenceItem<double>(
          tween: Tween<double>(begin: 0.0, end: 1.0),
          weight: 1,
        ),
        TweenSequenceItem<double>(
          tween: Tween<double>(begin: 1.0, end: -1.0),
          weight: 0.01,
        ),
      ],
    ).animate(_controller);
  }

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

  Future _startPulseAnimation() async {
    _controller.stop();
    _controller.reset();

    await _controller.forward();
  }

  Future _showNumbers() async {
    for (var i = 1; i < 11; ++i) {
      setState(() {
        // subtract 1 because the loop starts from 0, and take mod 10 to limit it to the array bounds.
        var selector = (i - 1) % 10;
        numbers.add(FloatingNumber(
          number: i,
          color: colors[selector],
          direction: directions[selector],
        ));
      });
      await Future.delayed(Duration(milliseconds: 300));
    }
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 44,
      width: 44,
      child: Stack(
        overflow: Overflow.visible,
        children: <Widget>[
          PositionedDirectional(
            bottom: 0,
            end: -2,
            child: SizedBox(
              height: 100,
              width: 48,
              child: Stack(
                children: numbers,
              ),
            ),
          ),
          PositionedDirectional(
            bottom: -128,
            end: -128,
            child: CustomPaint(
              painter: PulsePainter(pulseAnimation),
              child: SizedBox(
                width: 300,
                height: 300,
              ),
            ),
          ),
          PositionedDirectional(
            bottom: -2,
            end: -2,
            child: AnimatedButton(
              onPressed: () {
                widget.onPressed?.call();

                _startPulseAnimation();
                Stream.periodic(pulseAnimationDuration, (v) => v)
                    .take(10)
                    .listen((count) => _startPulseAnimation());
                _showNumbers();
              },
            ),
          ),
        ],
      ),
    );
  }
}

// for testing
class StarButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: StarButton(),
      ),
    );
  }
}

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

pulse.dart

import 'package:flutter/material.dart';

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

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

  void circle(Canvas canvas, Rect rect, double value) {
    print("value = ${value}");
    double opacity = (1.0 - (value / 2.0)).clamp(0.0, 1.0);
    print("opacity = ${opacity}");
//    Color color = Colors.yellow.withOpacity(opacity == 0.5 ? 0.0 : opacity);
    Color color = Colors.yellow.withOpacity(opacity);

    double size = rect.width / 4;
    double radius = size * value;

    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, size.width, size.height);

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

  @override
  bool shouldRepaint(PulsePainter oldDelegate) {
    return false;
  }
}

// for testing
class SpriteDemo extends StatefulWidget {
  @override
  PulseDemoState createState() => PulseDemoState();
}

class PulseDemoState extends State<SpriteDemo>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  var animationDuration = const Duration(milliseconds: 400);

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

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

  Future _startAnimation() async {
    _controller.stop();
    _controller.reset();

    await _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;

    return Scaffold(
      body: Center(
        child: CustomPaint(
          painter: PulsePainter(_controller),
          child: SizedBox(
            width: size.width / 2,
            height: size.width / 2,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Stream.periodic(animationDuration, (v) => v)
              .take(10)
              .listen((count) => _startAnimation());
        },
      ),
    );
  }
}

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

main.dart

import 'package:flutter/material.dart';
import 'star_button.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tutorial',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Like Animation'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        floatingActionButton: StarButton(onPressed: () {}));
  }
}

i hope you would understand the flutter tutorial about Like Animation or Live Telecast Like in Flutter.

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in