CODEWITHSUNDEEP
flutterdartflutter-animation
Lambasoft
Lambasoft

Reputation: 999

How can I create the following transition effect using Flutter?

I want to create the same transition effect used on the iOS version of Tinder when you press on the "Sign In" button, using Flutter.

enter image description here

I failed to do it using Hero Animation as the "Sign In" button disappears and does not transition in my gif example.

Can someone lead me to the correct widgets, or show me an example. I'm still new to flutter animation and I'm totally lost.

Upvotes: 0

Views: 208

Answers (1)

Aldy Yuan
Aldy Yuan

Reputation: 2045

You can create animation widget like this:

class ShowUp extends StatefulWidget {
  final Widget child;
  final int delay;

  const ShowUp({Key key, this.delay, @required this.child}) : super(key: key);
  @override
  _ShowUpState createState() => _ShowUpState();
}

class _ShowUpState extends State<ShowUp> with TickerProviderStateMixin {
  AnimationController _animationController;
  Animation<Offset> _animationOffset;

  @override
  void initState() {
    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    final curve =
        CurvedAnimation(parent: _animationController, curve: Curves.decelerate);
    _animationOffset =
        Tween<Offset>(begin: const Offset(0.0, 0.35), end: Offset.zero)
            .animate(curve);

    if (widget.delay == null) {
      _animationController.forward();
    } else {
      Timer(Duration(milliseconds: widget.delay), () {
        _animationController.forward();
      });
    }
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: _animationController,
      child: SlideTransition(
        position: _animationOffset,
        child: widget.child,
      ),
    );
  }
}

By using FadeTransition and SlideTransition, with CurvedAnimation I think this is what you looking for and then you called it like this:

ShowUp(
  delay: 300,
  child: FlatButton(
    color: Colors.blue,
    child: Text("Create Account"),
    onPressed: () {},
  ),
),

And the last thing you use bool variabel for condition whether user press SignIn button or not, if they pressed it you called setState and then change all the button with showUp animation. Is it confusing?. I make full example here for better understanding.

Upvotes: 1

Related Questions