Flutter – Make Animation Bouncing on Tap

In Flutter, we can create a bounce animation using the AnimatedContainer widget along with Curves. The Curves.bounceOut curve is used to create the bounce effect when the animation starts. In this article, we are going to Implement the Bounce Animation Effect Using AnimatedContainer Widget. A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the Package

First of all import material.dart file.

import 'package:flutter/material.dart';

Step 3: Execute the main Method

Here the execution of our app starts.

Dart

void main() {
  runApp(
    MyApp(),
  );
}

Step 4: Create MyApp Class

In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false,
      home: BounceAnimationDemo(),
    );
  }
}

Step 5: Create BounceAnimationDemo Class

This class contains a method named as _startBounceAnimation method: This method is called when the “Start Bounce Animation” button is pressed. It uses the setState function to update the height variable to 200.0, causing the box to grow in height. After a delay of 500 milliseconds, it updates the height back to 100.0, effectively creating a bounce effect. The AnimatedContainer widget is used to animate the height of the box. It has a duration of 500 milliseconds, making the animation last for half a second. The curve property is set to Curves.bounceOut, which creates the bounce effect. The width is set to 100, and the height is controlled by the height variable.

 AnimatedContainer(
              duration: Duration(milliseconds: 500),
              curve: Curves.bounceOut, // Use the bounce curve for animation
              width: 100,
              height: height, // Height of the box animated with a bounce effect
              color: Colors.blue,
            ),

Dart

class BounceAnimationDemo extends StatefulWidget {
  @override
  _BounceAnimationDemoState createState() => _BounceAnimationDemoState();
}

class _BounceAnimationDemoState extends State<BounceAnimationDemo> {
  double height = 100.0; // Initial height of the box

  void _startBounceAnimation() {
    setState(() {
      height = 200.0; // Set the target height for the bounce animation
    });

    Future.delayed(Duration(milliseconds: 500), () {
      setState(() {
        height = 100.0; // Reset the height after the bounce animation
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bounce Animation Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AnimatedContainer(
              duration: Duration(milliseconds: 500),
              curve: Curves.bounceOut, // Use the bounce curve for animation
              width: 100,
              height: height, // Height of the box animated with a bounce effect
              color: Colors.blue,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _startBounceAnimation,
              child: Text('Start Bounce Animation'),
            ),
          ],
        ),
      ),
    );
  }
}

Here is the full Code of main.dart file

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp(),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false,
      home: BounceAnimationDemo(),
    );
  }
}

class BounceAnimationDemo extends StatefulWidget {
  @override
  _BounceAnimationDemoState createState() => _BounceAnimationDemoState();
}

class _BounceAnimationDemoState extends State<BounceAnimationDemo> {
  double height = 100.0; // Initial height of the box

  void _startBounceAnimation() {
    setState(() {
      height = 200.0; // Set the target height for the bounce animation
    });

    Future.delayed(Duration(milliseconds: 500), () {
      setState(() {
        height = 100.0; // Reset the height after the bounce animation
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bounce Animation Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AnimatedContainer(
              duration: Duration(milliseconds: 500),
              curve: Curves.bounceOut, // Use the bounce curve for animation
              width: 100,
              height: height, // Height of the box animated with a bounce effect
              color: Colors.blue,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _startBounceAnimation,
              child: Text('Start Bounce Animation'),
            ),
          ],
        ),
      ),
    );
  }
}

Output: