how to make icon and text translation animation on flutter

Issue

how to make this animation on flutter

icon and text
the default state is the icon is shown and the text is disappears
when click the icon: the icon goes up and text goes under icon and appears
otherwise the icon goes in center and the text disappears

like this video

https://i.imgur.com/S0LXr3o.mp4

https://drive.google.com/file/d/1nwpgjOM_6TUaaVaSdsIZp0oYi4CdWSMR/view?usp=sharing

Solution

you can use AnimationController and AnimationBuilder combined with Stack + Positioned
or you can even use the Transform Widget with the same concept!

I’ve write an example to make the animation

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

class AnimationExerciseScreen extends StatefulWidget {
  const AnimationExerciseScreen({Key? key}) : super(key: key);

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

class _AnimationExerciseScreenState extends State<AnimationExerciseScreen>
    with SingleTickerProviderStateMixin {
  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 3),
    );

    animationController.forward();
  }

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

  late final AnimationController animationController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              height: 100,
              child: AnimatedBuilder(
                animation: animationController,
                builder: (context, child) => Stack(
                  children: [
                    Positioned(
                      top: 0 + (40 * animationController.value),
                      child: Icon(Icons.cloud),
                    ),
                    Positioned(
                      bottom: 0 + (40 * animationController.value),
                      child: Opacity(
                        opacity: 1 - animationController.value,
                        child: Text('Cloud'),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

video link:
https://imgur.com/RJg5PWw

Explanation:
the animation controller has a value of 0 to 1 with the type of double, which will represent the amount percentage of the animation

in the above example, I’m using 3 seconds duration of the animation controller so the animation will be visible to our eyes easily, so I use animationController.forward to play the animation at the initState

note: the placement of the animation is not optimized for performance, this example is just for example to understand how the animation works
if you want to optimize the animation, you can put your widget to child attribute of the AnimationBuilder for more info you can read them here and here and here and so much more! you can explore tons of articles to improve your flutter app’s performance!

Answered By – AngDrew

Answer Checked By – Marilyn (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *