Flutter Animate

Thanks to the animate_do project for giving me development inspiration.

Thanks to the animate.css project for giving me the visual experience.

This project is my personal learning project (if successful, it will be integrated into the project of my company).

1. Learn the basic layout effects of Flutter;
2. Learn the Flutter Animate effect and create the corresponding animation component library;

How To Use

demo_flutter_animate_simple.mov

install package

flutter_animate:
  git:
    url: https://github.com/harrischen/flutter_animate.git
    ref: main

use package

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isAnimate = false;

  void _changeToEnd() => setState(() => isAnimate = true);
  void _changeToStart() => setState(() => isAnimate = false);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              height: 160.0,
              child: Row(
                children: [
                  Expanded(
                    child: isAnimate
                        ? Flip(
                            child: const DemoIcon(),
                            completed: _changeToStart,
                          )
                        : const DemoIcon(),
                  ),
                  Expanded(
                    child: isAnimate
                        ? FlipInX(
                            child: const DemoIcon(),
                            completed: _changeToStart,
                          )
                        : const DemoIcon(),
                  ),
                  Expanded(
                    child: isAnimate
                        ? FlipInY(
                            child: const DemoIcon(),
                            completed: _changeToStart,
                          )
                        : const DemoIcon(),
                  )
                ],
              ),
            ),
            ElevatedButton(
              child: Text(isAnimate ? 'In Animation' : 'Play'),
              onPressed: _changeToEnd,
            ),
          ],
        ),
      ),
    );
  }
}

class DemoIcon extends StatelessWidget {
  const DemoIcon({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Icon(
      Icons.adb_rounded,
      size: 56.0,
    );
  }
}

✨ Features

Attention seekers

• bounce
• flash
• pulse
• rubberBand
• shakeX
• shakeY
• headShake
• swing
• tada
• wobble
• jello
• heartBeat

Back entrances

• backInDown
• backInLeft
• backInRight
• backInUp

Back exits

• backOutDown
• backOutLeft
• backOutRight
• backOutUp

Bouncing entrances

• bounceIn
• bounceInDown
• bounceInLeft
• bounceInRight
• bounceInUp

Bouncing exits

• bounceOut
• bounceOutDown
• bounceOutLeft
• bounceOutRight
• bounceOutUp

Fading entrances

• fadeIn
• fadeInDown
• fadeInLeft
• fadeInRight
• fadeInUp
• fadeInTopLeft
• fadeInTopRight
• fadeInBottomLeft
• fadeInBottomRight

Fading exits

• fadeOut
• fadeOutDown
• fadeOutLeft
• fadeOutRight
• fadeOutUp
• fadeOutTopLeft
• fadeOutTopRight
• fadeOutBottomRight
• fadeOutBottomLeft

Flippers

• flip
• flipInX
• flipInY
• flipOutX
• flipOutY

Lightspeed

• lightSpeedInRight
• lightSpeedInLeft
• lightSpeedOutRight
• lightSpeedOutLeft

Rotating entrances

• rotateIn
• rotateInDownLeft
• rotateInDownRight
• rotateInUpLeft
• rotateInUpRight

Rotating exits

• rotateOut
• rotateOutDownLeft
• rotateOutDownRight
• rotateOutUpLeft
• rotateOutUpRight

Specials

• hinge
• jackInTheBox
• rollInLeft
• rollInRight
• rollOutLeft
• rollOutRight

Zooming entrances

• zoomIn
• zoomInDown
• zoomInLeft
• zoomInRight
• zoomInUp

Zooming exits

• zoomOut
• zoomOutDown
• zoomOutLeft
• zoomOutRight
• zoomOutUp

Sliding entrances

• slideInDown
• slideInLeft
• slideInRight
• slideInUp

Sliding exits

• slideOutDown
• slideOutLeft
• slideOutRight
• slideOutUp

Flutter Doctor

[✓] Flutter (Channel stable, 2.5.1, on macOS 11.6 20G165 darwin-x64, locale zh-Hans-CN)
    • Flutter version 2.5.1 at /usr/local/Caskroom/flutter/2.5.1/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ffb2ecea52 (9 weeks ago), 2021-09-17 15:26:33 -0400
    • Engine revision b3af521a05
    • Dart version 2.14.2