Animação Flutter

AnimatedBuilder.dart

import 'package:flutter/material.dart';
import 'package:flutter_modular/flutter_modular.dart';
import 'login_controller.dart';

class LoginPage extends StatefulWidget {
  final String title;
  const LoginPage({Key key, this.title = "Login"}) : super(key: key);
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends ModularState<LoginPage, LoginController>
    with SingleTickerProviderStateMixin {
  // Animation Controller
  AnimationController _animationController;
  // Animation Value
  Animation<double> _animation;

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

    _animationController = AnimationController(
      vsync: this, // Ticker
      duration: Duration(milliseconds: 3000),
    );

    _animation = Tween(
      begin: 0.0,
      end: 500.0,
    ).animate(_animationController);

    _animation.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _animationController.reverse();
      } else if (status == AnimationStatus.dismissed) {
        _animationController.forward();
      }
    });

    _animationController.forward();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: GrowTransition(
      animation: _animation,
      child: LogoWidget(),
    ));
  }
}

class GrowTransition extends StatelessWidget {
  final Widget child; // Widget a ser animado
  final Animation<double> animation; // Animação

  const GrowTransition({Key key, this.animation, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedBuilder(
        animation: animation,
        builder: (context, child) {
          return Container(
            height: animation.value,
            width: animation.value,
            child: child,
          );
        },
        child: child,
      ),
    );
  }
}

class LogoWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 10),
      child: FlutterLogo(),
    );
  }
}

AnimatedList.dart

import 'package:flutter/material.dart';
import 'package:flutter_modular/flutter_modular.dart';
import 'package:jumbo_mobile/app/utils/colorsTheme.dart';
import 'login_controller.dart';

class LoginPage extends StatefulWidget {
  final String title;
  const LoginPage({Key key, this.title = "Login"}) : super(key: key);
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends ModularState<LoginPage, LoginController>
    with SingleTickerProviderStateMixin {
  List<String> listItem = ['item01', 'item02', 'item03', 'item04'];
  final listKey = GlobalKey<AnimatedListState>();

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: PageView(
          children: <Widget>[
            AnimatedList(
              key: listKey,
              initialItemCount: listItem.length,
              itemBuilder: (context, index, animation) {
                return SizeTransition(
                  sizeFactor: animation,
                  child: ListTile(
                    title: Text(
                      listItem[index],
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          listKey.currentState
              .insertItem(0, duration: Duration(milliseconds: 350));
          listItem = ['Novo Item', ...listItem];
        },
        backgroundColor: Colors.white,
        child: Icon(
          Icons.add,
          color: accentColor,
        ),
      ),
    );
  }
}

AnimatedWidget.dart

// AnimatedWidget

import 'package:flutter/material.dart';
import 'package:flutter_modular/flutter_modular.dart';
import 'login_controller.dart';

class LoginPage extends StatefulWidget {
  final String title;
  const LoginPage({Key key, this.title = "Login"}) : super(key: key);

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

class _LoginPageState extends ModularState<LoginPage, LoginController>
    with SingleTickerProviderStateMixin {
  // Animation Controller
  AnimationController _animationController;
  // Animation Value
  Animation<double> _animation;

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

    _animationController = AnimationController(
      vsync: this, // Ticker
      duration: Duration(milliseconds: 3000),
    );

    _animation = Tween(
      begin: 0.0,
      end: 500.0,
    ).animate(_animationController);

    _animationController.forward();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Logo(animation: _animation),
      ),
    );
  }
}

class Logo extends AnimatedWidget {
  Logo({Key key, Animation<double> animation})
      : super(key: key, listenable: animation);

  @override
  Widget build(BuildContext context) {
  final Animation<double> animation = listenable;
    return Container(
      margin: EdgeInsets.symmetric(vertical: 10),
      height: animation.value,
      width: animation.value,
      child: FlutterLogo(),
    );
  }
}

AnimationController.dart

//AnimationController

class _LoginPageState extends ModularState<LoginPage, LoginController>
    with SingleTickerProviderStateMixin {
  // Animation Controller
  AnimationController _animationController;
  // Animation Value
  Animation<double> _animation;

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

    _animationController = AnimationController(
      vsync: this, // Ticker
      duration: Duration(milliseconds: 3000),
    );

    _animation = Tween(
      begin: 0.0,
      end: 200.0,
    ).animate(CurvedAnimation(
      parent: _animationController,
      curve: Curves.bounceOut,
    ));

    _animationController.addListener(() {
      setState(() {});
    });

    _animationController.forward();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: _animation.value,
          height: _animation.value,
          color: Colors.white,
        ),
      ),
    );
  }
}

AnimetedContainer.dart

import 'package:flutter/material.dart';
import 'package:flutter_modular/flutter_modular.dart';
import 'login_controller.dart';

class LoginPage extends StatefulWidget {
  final String title;
  const LoginPage({Key key, this.title = "Login"}) : super(key: key);
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends ModularState<LoginPage, LoginController>
    with SingleTickerProviderStateMixin {
  bool color = true;
  double width = 100;
  double height = 100;
  int duration = 1000;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Center(
            child: AnimatedOpacity(
              opacity: color ? 1.0 : 0.5,
              duration: Duration(milliseconds: duration),
              child: AnimatedContainer(
                color: color ? Colors.white : Colors.yellow,
                width: width,
                height: height,
                duration: Duration(milliseconds: duration),
              ),
            ),
          ),
          Switch(
              activeColor: Colors.white,
              inactiveThumbColor: Colors.yellow,
              value: color,
              onChanged: (value) {
                setState(() {
                  color = value;
                  duration = 1000;
                });
              }),
          SizedBox(
            height: 30.0,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              RaisedButton(
                color: Colors.white,
                onPressed: () {
                  setState(() {
                    height = height - 10;
                    width = width - 10;
                  });
                },
                child: Icon(
                  Icons.remove_circle,
                  color: Colors.redAccent,
                ),
              ),
              RaisedButton(
                color: Colors.white,
                onPressed: () {
                  setState(() {
                    height = height + 50;
                    width = width + 50;
                  });
                },
                child: Icon(
                  Icons.add_circle,
                  color: Colors.green,
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

AnimetedOpacity.dart

import 'package:flutter/material.dart';
import 'package:flutter_modular/flutter_modular.dart';
import 'login_controller.dart';

class LoginPage extends StatefulWidget {
  final String title;
  const LoginPage({Key key, this.title = "Login"}) : super(key: key);
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends ModularState<LoginPage, LoginController>
    with SingleTickerProviderStateMixin {
  bool _visible = true;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          AnimatedOpacity(
            opacity: _visible ? 1.0 : 0.0,
            duration: Duration(milliseconds: 2500),
            curve: Curves.linear,
            child: Center(
                child: Container(
              width: 150,
              height: 150,
              color: Colors.white,
            )),
          ),
          Switch(
              activeColor: Colors.white,
              value: _visible,
              onChanged: (value) {
                setState(() {
                  _visible = value;
                });
              })
        ],
      ),
    );
  }
}

AnimetedPadding.dart

import 'package:flutter/material.dart';
import 'package:flutter_modular/flutter_modular.dart';
import 'login_controller.dart';

class LoginPage extends StatefulWidget {
  final String title;
  const LoginPage({Key key, this.title = "Login"}) : super(key: key);
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends ModularState<LoginPage, LoginController>
    with SingleTickerProviderStateMixin {
  double topValue = 10;
  double bottomValue = 340;
  bool top = true;
  String actionOnTop = 'Cair';
  String actionOnBot = 'Subir';

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: <Widget>[
        SizedBox(
          height: 45,
        ),
        Center(
          child: Container(
            height: 400,
            child: AnimatedPadding(
              padding: EdgeInsets.only(top: topValue, bottom: bottomValue),
              duration: Duration(milliseconds: 3000),
              curve: top ? Curves.bounceIn : Curves.bounceOut,
              child: Container(
                width: 50,
                height: 50,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(200),
                    color: Colors.white),
              ),
            ),
          ),
        ),
        RaisedButton(
          color: Colors.white,
          onPressed: () {
            setState(() {
              top = !top;
              topValue = top ? 10 : 340;
              bottomValue = top ? 340 : 10;
            });
          },
          child: Text(top ? actionOnTop : actionOnBot),
        )
      ],
    ));
  }
}

ProgressoAnimacao.dart

import 'package:flutter/material.dart';
import 'package:flutter_modular/flutter_modular.dart';
import 'login_controller.dart';

class LoginPage extends StatefulWidget {
  final String title;
  const LoginPage({Key key, this.title = "Login"}) : super(key: key);

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

class _LoginPageState extends ModularState<LoginPage, LoginController>
    with SingleTickerProviderStateMixin {
  // Animation Controller
  AnimationController _animationController;
  // Animation Value
  Animation<double> _animation;

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

    _animationController = AnimationController(
      vsync: this, // Ticker
      duration: Duration(milliseconds: 3000),
    );

    _animation = Tween(
      begin: 0.0,
      end: 500.0,
    ).animate(_animationController);

    _animationController.forward();

    _animation.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _animationController.reverse();
      } else if (status == AnimationStatus.dismissed) {
        _animationController.forward();
      }
    });
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Logo(animation: _animation),
      ),
    );
  }
}

class Logo extends AnimatedWidget {
  Logo({Key key, Animation<double> animation})
      : super(key: key, listenable: animation);

  @override
  Widget build(BuildContext context) {
    final Animation<double> animation = listenable;
    return Container(
      margin: EdgeInsets.symmetric(vertical: 10),
      height: animation.value,
      width: animation.value,
      child: FlutterLogo(),
    );
  }
}

Sequenciais.dart

import 'package:flutter/material.dart';
import 'package:flutter_modular/flutter_modular.dart';
import 'login_controller.dart';

class LoginPage extends StatefulWidget {
  final String title;
  const LoginPage({Key key, this.title = "Login"}) : super(key: key);
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends ModularState<LoginPage, LoginController>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

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

    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 3000),
    );

    _animationController.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _animationController.reverse().orCancel;
      } else if (status == AnimationStatus.dismissed) {
        _animationController.forward().orCancel;
      }
    });

    _animationController.forward().orCancel;
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: BoxAnimation(
          controller: _animationController.view,
        ),
      ),
    );
  }
}

class BoxAnimation extends StatelessWidget {
  BoxAnimation({Key key, this.controller})
      : opacidade = Tween<double>(
          begin: 0.0,
          end: 1.0,
        ).animate(CurvedAnimation(
          parent: controller,
          curve: Interval(0.0, 0.3),
        )),
        largura = Tween<double>(
          begin: 25.0,
          end: 150.0,
        ).animate(CurvedAnimation(
          parent: controller,
          curve: Interval(0.2, 0.5),
        )),
        altura = Tween(
          begin: 25.0,
          end: 150.0,
        ).animate(CurvedAnimation(
          parent: controller,
          curve: Interval(0.2, 0.5),
        )),
        borda = Tween(
          begin: BorderRadius.circular(4.0),
          end: BorderRadius.circular(75.0),
        ).animate(CurvedAnimation(
          parent: controller,
          curve: Interval(0.5, 0.75),
        )),
        super(key: key);

  final Animation<double> controller;
  final Animation<double> opacidade;
  final Animation<double> largura;
  final Animation<double> altura;
  final Animation<BorderRadius> borda;

  Widget _buildAnimation(BuildContext context, Widget child) {
    return Container(
      child: Opacity(
        opacity: opacidade.value,
        child: Container(
          width: largura.value,
          height: altura.value,
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(color: Colors.deepOrange, width: 3.0),
            borderRadius: borda.value,
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      builder: _buildAnimation,
      animation: controller,
    );
  }
}