aagarwal1012 / Animated-Text-Kit

🔔 A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]
https://animated-text-kit.web.app
MIT License
1.65k stars 305 forks source link

Rotate Animation Causes Row to Move #274

Open RhinoInani opened 2 years ago

RhinoInani commented 2 years ago

Hello, First, I would like to say amazing work on the package it truly is one of the better free flutter packages out there! But I think there is a small bug with the rotating text animation.

I am working on a flutter web project and wanted to use the package. Though when I copied your sample code for the rotating animation and put it in a Column that is wrapped around a SingleChildScrollView the entire row seems to be moving whenever the animation is occurring. Im not sure if this is a coding mistake on my part or a true bug.

I have attached the code to reproduce below along with a short video.

body: SingleChildScrollView(
        padding: EdgeInsets.all(size.longestSide * 0.03),
        controller: scrollController,
        child: Column(
          children: [
            Row(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                const SizedBox(width: 20.0, height: 100.0),
                const Text(
                  'Be',
                  style: TextStyle(fontSize: 43.0),
                ),
                const SizedBox(width: 20.0, height: 100.0),
                DefaultTextStyle(
                  style: const TextStyle(
                    fontSize: 40.0,
                    fontFamily: 'Horizon',
                  ),
                  child: AnimatedTextKit(animatedTexts: [
                    RotateAnimatedText('AWESOME'),
                    RotateAnimatedText('OPTIMISTIC'),
                    RotateAnimatedText('DIFFERENT'),
                  ]),
                ),
              ],
            )
          ],
        ),
      ),

Here is the result for: flutter --version:

Flutter 2.5.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 18116933e7 (3 weeks ago) • 2021-10-15 10:46:35 -0700
Engine • revision d3ea636dc5
Tools • Dart 2.14.4

Below is a screen recording of the problem.

https://user-images.githubusercontent.com/69125015/140864513-5624d00b-0c71-427f-85d2-91074188c850.mov

Hoping for the best!

Thanks, Rhino Inani

Akomea commented 2 years ago

Try wrapping DefaultTextStyle or the AnimatedTextKit widget in a Container and set a fixed height