How To Set Up Spring Animation Using Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 09-10-2020

Spring animation example

How To Set Up Spring Animation Using Flutter Android App

 Spring Animation 

Step 1:
 
We cannot directly remove the time stamp from  Spring Animation  but using the intl.dart package we can easily filter the date stamp from time stamp. So open your flutter project’s pubspec.yaml in code

dependencies:
  flutter:
    sdk: flutter
  spring: ^1.0.4

step 2: 
After done saving the pubspec.yaml file, Open your flutter project root folder in Command Prompt or Terminal and execute flutter pub get command. 
flutter pub get

Step 3: 
Open your project’s main.dart file and import material.dart and  spring: ^1.0.4. dart package.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:spring/enum.dart';
import 'package:spring/spring.dart';

Complete Code For Spring Animation  IN FLutter
Main.dart
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:spring/enum.dart';
import 'package:spring/spring.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.indigo[300],
          leading: Icon(Icons.menu),
          title: Text('Spring Demo'),
        ),
        body: Demo(),
      ),
    );
  }
}

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIOverlays([]);

    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                SpringExample(AnimType.Rotate),
                SpringExample(AnimType.Blink),
                SpringExample(AnimType.Bubble)
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                SpringExample(AnimType.Slide_In_Left),
                SpringExample(AnimType.Shake),
                SpringExample(AnimType.Slide_In_Right)
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                SpringExample(AnimType.FlipY),
                SpringExample(AnimType.FadeIn),
                SpringExample(AnimType.FlipX)
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                SpringExample(
                  AnimType.Fade_In_Bottom,
                ),
                SpringExample(AnimType.FadeOut),
                SpringExample(AnimType.Fade_In_Right)
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class SpringExample extends StatefulWidget {
  final AnimType animType;

  SpringExample(this.animType);

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

class _SpringExampleState extends State<SpringExample> {
  final _key = GlobalKey<SpringState>();

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

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        _key.currentState.animate(motion: Motion.Mirror);
      },
      child: Spring(
        key: _key,
        motion: Motion.Mirror,
        animType: widget.animType,
        animStatus: (status) => print(status),
        child: SizedBox(
          width: 70,
          height: 70,
          child: Card(
            color: Colors.pink,
            elevation: 10,
          ),
        ),
      ),
    );
  }
}

Related Post