How To Create Bouncing Animation Using Flutter App

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

Animations assume a significant function in upgrading the general user experience of your application from the visual input, motion, and up to the animations you can actually envision!. Much the same as some other items coordinated into an application, animations must be a functional element instead of only a regular stylistic theme.Utilizing the traditional frameworks, you would typically need to compose complex animation controllers and designs where you set the timings, tweens, and advances.

How To Create Bouncing Animation Using Flutter App

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

import 'package:flutter/material.dart';
void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.light().copyWith(primaryColor: Colors.deepOrange),
      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;

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

    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 600),
      lowerBound: 0.0,
      upperBound: 0.1,
    );
    _animationController.addListener(() {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    double scale = 1 - _animationController.value;
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.pink,
          title: Text("Bouncing Animation")),
      body: Center(
        child: GestureDetector(
          onTapUp: _onTapUp,
          onTapDown: _onTapDown,
          child: Transform.scale(
            scale: scale,
            child: Container(
              width: 300,
              height: 75,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(38.0),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black26,
                    offset: Offset(0.0, 2.0),
                    blurRadius: 5.0,
                    spreadRadius: 0.25,
                  ),
                ],
              ),
              child: Text("Tap to Bounce"),
              alignment: Alignment.center,
            ),
          ),
        ),
      ),
    );
  }

  void _onTapDown(TapDownDetails details) {
    _animationController.forward();
  }

  void _onTapUp(TapUpDetails details) {
    _animationController.reverse();
  }
}

Related Post