aagarwal1012 / aagarwal1012/Animated-Text-Kit

Rotate Animation Causes Row to Move

未关闭
#274 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
主要语言
Dart
星标
1.8k
派生
321
PR 合并指标
30 天内没有已合并 PR

描述

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

贡献指南

打开贡献指南

调研方向

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.

由索引模型根据 Issue 内容生成。

评估

技术栈
dart, flutter
领域
desktop, frontend, mobile
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
描述清楚
新手友好度
55/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。