How To Create Shake Animation Using Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 27-11-2020

we are going to learn how to create a shake animation in Flutter.

How To Create Shake Animation Using Flutter Android App

Shake Animation
Complete Code For Shake Animation In Flutter
main.dart

 

import 'package:flutter/material.dart';
import 'package:vector_math/vector_math_64.dart';
import 'dart:math';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;
  MyHomePage({this.title});
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>   with SingleTickerProviderStateMixin {
  AnimationController animationController;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 5),
    )..addListener(() => setState(() {}));

    animation = Tween<double>(
      begin: 50.0,
      end: 120.0,
    ).animate(animationController);

    animationController.forward();
  }

  Vector3 _shake() {
    double progress = animationController.value;
    double offset = sin(progress * pi * 10.0);
    return Vector3(offset * 4, 0.0, 0.0);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("Shake Animation")),
      body: Center(
        child: Transform(
          transform: Matrix4.translation(_shake()),
          child: FlutterLogo(
            size: 60.0,
          ),
        ),
      ),
    );
  }
}

Related Post