aagarwal1012 / aagarwal1012/Animated-Text-Kit

Rotate Animation Causes Row to Move

Open
#274 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
Dart
Stars
1.8k
Forks
321
PR merge metrics
No merged PRs in 30d

Description

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: [
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

Contributor guide

Open the contributing guide

Research direction

The issue is with RotateAnimatedText causing layout shifts in a Row inside a Column and SingleChildScrollView. Start by examining the RotateAnimatedText implementation in the animated_text_kit package, likely in lib/src/rotate.dart. Reproduce the bug with the provided code sample on Flutter web. Look at how the animation affects the widget's size or constraints during the rotation transition. Check if there's a fixed height or width that should be applied to prevent the row from moving.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter
Domain
desktop, frontend, mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.