Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error in first run after upgrade to v3.0.0 #168

Closed
sahmadreza opened this issue Dec 9, 2020 · 38 comments · Fixed by #176
Closed

Error in first run after upgrade to v3.0.0 #168

sahmadreza opened this issue Dec 9, 2020 · 38 comments · Fixed by #176
Assignees
Labels
bug Something isn't working

Comments

@sahmadreza
Copy link

sahmadreza commented Dec 9, 2020

Hi,
After updating the plugin version from 2.5.4 to 3.0.0, an error will be displayed below the first run.

But after a few seconds the animation starts and works

I did not change the code and just updated the plugin and after the update this problem occurred

My Code:

                    SizedBox(
                      height: 100,
                      child: FadeAnimatedTextKit(
                        onTap: () {
                          print("Tap Event");
                        },
                        isRepeatingAnimation: true,
                        text: [
                          "do IT!",
                          "do it RIGHT!!",
                          "do it RIGHT NOW!!!"
                        ],
                        textStyle: TextStyle(
                            fontSize: 27.0,
                            fontWeight: FontWeight.w400,
                          color: Colors.white
                        ),
                        textAlign: TextAlign.start,
                      ),
                    ),

Expected behavior

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following NoSuchMethodError was thrown building AnimatedBuilder(animation: AnimationController#f1944(▶ 0.942), dirty, state: _AnimatedState#da5af):
The getter 'value' was called on null.
Receiver: null
Tried calling: value

The relevant error-causing widget was: 
  FadeAnimatedTextKit file:///E:/Projects/Android/robo_investment/lib/app.dart:112:30
When the exception was thrown, this was the stack: 
#0      Object.noSuchMethod (dart:core-patch/object_patch.dart:51:5)
#1      FadeAnimatedText.animatedBuilder (package:animated_text_kit/src/fade.dart:45:24)
#2      _AnimatedTextKitState.build.<anonymous closure> (package:animated_text_kit/src/animated_text.dart:187:32)
#3      AnimatedBuilder.build (package:flutter/src/widgets/transitions.dart:1443:19)
#4      _AnimatedState.build (package:flutter/src/widgets/transitions.dart:181:48)
...
════════════════════════════════════════════════════════════════════════════════════════════════════

(package:animated_text_kit/src/fade.dart:45:24) :

  @override
  Widget animatedBuilder(BuildContext context, Widget child) {
    return Opacity(
      opacity: **_fadeIn.value** != 1.0 ? _fadeIn.value : _fadeOut.value,
      child: textWidget(text),
    );
  }

Screenshots
https://i.imgur.com/2s1nTEo.png

Flutter:
Flutter (Channel stable, 1.22.4, on Microsoft Windows [Version 10.0.18363.1082], locale en-US)

  • version 1.22.4
  • channel stable

Dart:

  • version 2.10.4

Android Studio.

  • version: 4.1.0
@kw2019ltd
Copy link

same issue

@awhitford
Copy link
Collaborator

I'm sorry to see this. Honestly, this should be impossible because animatedBuilder is called after initAnimation which initializes _fadeIn.

I am unable to reproduce this problem. Are you able to reproduce this with the example application? It looks like you are using Windows for an Android target? What Android device target are you using?

@kw2019ltd Are you using Windows for an Android target too? What Android device target are you using?

@sahmadreza
Copy link
Author

sahmadreza commented Dec 10, 2020

I'm sorry to see this. Honestly, this should be impossible because animatedBuilder is called after initAnimation which initializes _fadeIn.

I am unable to reproduce this problem. Are you able to reproduce this with the example application? It looks like you are using Windows for an Android target? What Android device target are you using?

@kw2019ltd Are you using Windows for an Android target too? What Android device target are you using?

Yes, I use windows 10
Device tested:

  • Samsung c9000 android Api 26
  • Android virtual device with Api 22 (Android studio AVD)

@aagarwal1012
Copy link
Owner

@sahmadreza, did you try flutter clean and rebuilding the app?

@sahmadreza
Copy link
Author

@sahmadreza, did you try flutter clean and rebuilding the app?

Yes , I tried again and the error is still there

The relevant error-causing widget was: 
  AnimatedBuilder file:///C:/Users/AHMADREZA-PC/AppData/Roaming/Pub/Cache/hosted/pub.dartlang.org/animated_text_kit-3.0.0/lib/src/animated_text.dart:183:13
When the exception was thrown, this was the stack: 
#0      Object.noSuchMethod (dart:core-patch/object_patch.dart:51:5)
#1      FadeAnimatedText.animatedBuilder (package:animated_text_kit/src/fade.dart:45:24)
#2      _AnimatedTextKitState.build.<anonymous closure> (package:animated_text_kit/src/animated_text.dart:187:32)
#3      AnimatedBuilder.build (package:flutter/src/widgets/transitions.dart:1443:19)
#4      _AnimatedState.build (package:flutter/src/widgets/transitions.dart:181:48)
...
════════════════════════════════════════════════════════════════════════════════════════════════════

Is there a problem with the dart version?

@awhitford
Copy link
Collaborator

@sahmadreza Can you please confirm:

  • Does this issue appear with the example app?
  • Does this issue appear while testing on a physical device?

I have a hypothesis that this is related to this line:

if (mounted) setState(() {});

However, I am not experiencing an issue with Android or the iOS Simulator on my Mac. If this issue is limited to Windows, I wonder if this is really a Flutter bug because Flutter should be consistent across platforms.

@awhitford
Copy link
Collaborator

I submitted PR #169 that refactors the initialization sequence. I highly suspect that the PR addresses this issue. If it does not, then I suspect a Flutter bug with Windows.

@awhitford
Copy link
Collaborator

Version 3.0.1 has been released: https://pub.dev/packages/animated_text_kit/changelog 🎉
Please confirm if this resolves your problem with Windows.

@alittlebitofit
Copy link

alittlebitofit commented Dec 12, 2020

Hi, I get the same error when I use TypewriterAnimatedTextKit.
I am using:

  • Ubuntu 20.10 LTS
  • Samsung Galaxy M31, API level 29.
    animated_text_kit_AS

@kw2019ltd
Copy link

Version 3.0.1 has been released: https://pub.dev/packages/animated_text_kit/changelog 🎉
Please confirm if this resolves your problem with Windows.

working fine now no issue thanks

@awhitford
Copy link
Collaborator

awhitford commented Dec 12, 2020

@alittlebitofit Thanks for the feedback. Can you please confirm if you can recreate this issue with the example app? If not, then please share some source code that reproduces the issue.

@awhitford
Copy link
Collaborator

@kw2019ltd OK, excellent, good news! 🎉

@AlienKevin
Copy link

AlienKevin commented Dec 12, 2020

I got the same error with TypewriterAnimatedTextKit using version 3.0.1.

My platform

  • MacOS Big Sur
  • iOS Simulator iPhone 12 Pro

My code

I tried two approaches but neither worked.

Approach 1

TypewriterAnimatedTextKit(
    text: ['Some Text Here'],
    textStyle: TextStyle(
        fontSize: 45.0,
        fontWeight: FontWeight.w900,
    ),
)

Approach 2

AnimatedTextKit(
    animatedTexts: [
        TypewriterAnimatedText(
            'Some Text Here',
            textStyle: TextStyle(
                fontSize: 45.0,
                fontWeight: FontWeight.w900,
            ),
        ),
    ],
)

Error message:

======== Exception caught by widgets library =======================================================
The following NoSuchMethodError was thrown building AnimatedBuilder(animation: AnimationController#d6c2c(▶ 0.619), dirty, state: _AnimatedState#2afa6):
The getter 'value' was called on null.
Receiver: null
Tried calling: value

The relevant error-causing widget was: 
  TypewriterAnimatedTextKit

@awhitford
Copy link
Collaborator

@AlienKevin Are you able to reproduce this issue with the example app?

I am unable to reproduce this issue. I maintain that it should be impossible because build should not be called before initState, and so the initAnimation will happen before animatedBuild. However, I believe folks are running into this -- I just can't explain it. 😕

@AnirudhKK
Copy link

AnirudhKK commented Dec 12, 2020

Having the same issue

TypewriterAnimatedTextKit( text: ['Animated Text'], textStyle: TextStyle( fontSize: 45.0, fontWeight: FontWeight.w900, ), ),
gives
======== Exception caught by widgets library ======================================================= The getter 'value' was called on null. Receiver: null Tried calling: value The relevant error-causing widget was: TypewriterAnimatedTextKit ====================================================================================================

@awhitford
Copy link
Collaborator

@AnirudhKK Can you share your environment? (OS, Flutter channel, Device Target?) Also, are you able to reproduce this with the example app?

@AnirudhKK
Copy link

Flutter 1.22.4 • channel stable • Android • Huawei JKM LX1 . Will let you know if I can reproduce it on example app.

@awhitford
Copy link
Collaborator

@AnirudhKK Are you using a Mac or Windows or Linux?

@AnirudhKK
Copy link

Windows 10 Pro 20H2

@AnirudhKK
Copy link

@awhitford again got the same error on Flutter Counter App

The getter 'value' was called on null. Receiver: null Tried calling: value

https://gist.github.com/AnirudhKK/3d932bce33ee7e672907068d0e7ba23d

@awhitford
Copy link
Collaborator

@AnirudhKK I appreciate the feedback. I used the same code from your gist, but am still unable to reproduce or even logically explain how this could be possible.

Since you can recreate it... Can you try adding a breakpoint on lines 40 and 65:

_typewriterText = StepTween(

final typewriterValue = _typewriterText.value;

Then, are you seeing the breakpoint on line 65 stop before line 40? (Because that shouldn't be the case. Line 40 should execute before line 65, so the _typewriterText variable will have been set, and there should be no issue.)

Line 40 should be called once when the widget is added to the tree. Then, line 65 is called frequently during build.

@ThinkDigitalSoftware
Copy link

I'm getting this error as well with animated_text_kit: ^3.0.1. I only pasted your example in a Center in a scaffold.

// @dart=2.9
import 'package:animated_text_kit/animated_text_kit.dart';
import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  Home({Key key}) : super(key: key);

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

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: SizedBox(
          width: 250.0,
          child: TypewriterAnimatedTextKit(
            onTap: () {
              print("Tap Event");
            },
            text: [
              "Discipline is the best tool",
              "Design first, then code",
              "Do not patch bugs out, rewrite them",
              "Do not test bugs out, design them out",
            ],
            textStyle: TextStyle(fontSize: 30.0, fontFamily: "Agne"),
            textAlign: TextAlign.start,
          ),
        ),
      ),
    );
  }
}

Flutter 1.25.0-9.0.pre.42 • channel master • https://github.com/flutter/flutter.git
Framework • revision a76bb1a08e (22 hours ago) • 2020-12-12 00:17:51 -0700
Engine • revision 4797b06652
Tools • Dart 2.12.0 (build 2.12.0-141.0.dev)

Running on macOS as a target device

@ThinkDigitalSoftware
Copy link

ThinkDigitalSoftware commented Dec 13, 2020

@awhitford, Adding a UniqueKey() to my scaffold completely eliminated the problem. As I was hot restarting, each time, more and more errors would print out, taking longer and longer for the animation to start. Now this isn't an issue

Update: This does cause animations to restart on setState if they're on the same page as the key. Going to move it upwards and see if that helps
Update 2: Moving the key to a context higher up solved it. I put it in the enclosing widget

@kw2019ltd
Copy link

hi sorry still getting same issue

I/flutter (11202): The getter 'value' was called on null.
I/flutter (11202): Receiver: null
I/flutter (11202): Tried calling: value
I/flutter (11202):
I/flutter (11202): The relevant error-causing widget was:
I/flutter (11202): FadeAnimatedTextKit-[<'13-12-20'>]
I/flutter (11202): file:///C:/Users/kotai/AndroidStudioProjects/plants_price_flutter_app/lib/widget/plants/header/sticky_header_details.dart:280:18
I/flutter (11202):
I/flutter (11202): When the exception was thrown, this was the stack:
I/flutter (11202): #0 Object.noSuchMethod (dart:core-patch/object_patch.dart:51:5)
I/flutter (11202): #1 FadeAnimatedText.animatedBuilder (package:animated_text_kit/src/fade.dart:45:24)
I/flutter (11202): #2 _AnimatedTextKitState.build. (package:animated_text_kit/src/animated_text.dart:186:32)
I/flutter (11202): #3 AnimatedBuilder.build (package:flutter/src/widgets/transitions.dart:1443:19)
I/flutter (11202): #4 _AnimatedState.build (package:flutter/src/widgets/transitions.dart:181:48)

@ThinkDigitalSoftware
Copy link

@kw2019ltd did you hot restart already?

@alittlebitofit
Copy link

alittlebitofit commented Dec 13, 2020

@alittlebitofit Thanks for the feedback. Can you please confirm if you can recreate this issue with the example app? If not, then please share some source code that reproduces the issue.

@awhitford Thanks for the response.

example app works without any side-effect at all.

Ok, I'll share the source code: https://pastebin.com/MaUcqn0B

And this is the error output: https://pastebin.com/zMYwDfjb

PS: I'm on flutter channel beta, and TypewriterAnimatedTextKit works cool with version 2.5.4

@aagarwal1012 aagarwal1012 added the bug Something isn't working label Dec 13, 2020
@awhitford
Copy link
Collaborator

I was finally able to reproduce this issue last night after switching to the dev channel. I can trigger this issue and clearly see that animatedBuilder is running before initAnimation, which still does not make sense to me. 😖

@ThinkDigitalSoftware
Copy link

ThinkDigitalSoftware commented Dec 13, 2020

Another issue I noticed is that if you did a set state while an animation is running, all the words in the animation receive null values for their fade in, fade out, duration, etc.

@awhitford
Copy link
Collaborator

I have distilled the issue down to a leaner reproducible test case, but still cannot explain what is going on. I may have discovered a Flutter bug, but odds are that I am just not seeing the issue. I ended up posting the issue on Stack Overflow for feedback: https://stackoverflow.com/questions/65285189/flutter-animatedbuilder-builder-bug

@AlienKevin
Copy link

Example app

All animations work seamlessly

My app

NoSuchMethodError

Code

P.S. I tried removing my own AnimationController but it doesn't help.

class WelcomeScreen extends StatefulWidget {
  static String id = 'welcome';

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

class _WelcomeScreenState extends State<WelcomeScreen>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<Color> animation;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: Duration(milliseconds: 500),
      vsync: this,
    );

    animation = ColorTween(begin: Colors.blueGrey, end: Colors.white)
        .animate(controller);

    controller.addListener(() {
      setState(() {});
    });
    controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: animation.value,
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 24.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Row(children: <Widget>[
              TypewriterAnimatedTextKit(
                text: ['Flash Chat'],
                textStyle: TextStyle(
                  fontSize: 45.0,
                  fontWeight: FontWeight.w900,
                ),
              ),
            ]),
          ],
        ),
      ),
    );
  }
}

@awhitford
Copy link
Collaborator

Update: I now understand what is happening. 🎉
Unfortunately, it is actually a non-trivial design flaw. So now I need to refactor to fix it properly, and I'm experimenting with a few options.

@ThinkDigitalSoftware
Copy link

Update: I now understand what is happening. 🎉
Unfortunately, it is actually a non-trivial design flaw. So now I need to refactor to fix it properly, and I'm experimenting with a few options.

What's the basic issue? Maybe I know a good workaround to save some work?

@awhitford
Copy link
Collaborator

Thank you @ThinkDigitalSoftware for the offer. My biggest issue was that I was unable to reproduce this, but I knew it was real because so many complained. I now can reliably recreate the bug. In fact, it's so easy now that I'm astonished I didn't expose this issue before. (Testing definitely needs to be tweaked.)

See the SO article. Basically, setState triggers a widget rebuild, which is messing with the AnimatedText class state. In a nutshell, I have discovered (the hard way) why StatefulWidgets are TWO classes. AnimatedText is basically being rebuilt like a StatelessWidget, and then losing its state. I erroneously thought that state would be managed by AnimatedTextKitState, but obviously that's not the case. I do finally understand what's going on.

I built a fix that works. However, as I was transforming each implementation, it occurred to me whether I should simply make AnimatedText a StatefulWidget -- that way, I feel that I'm not recreating the wheel so much. But the snag is how to best hook into the Animation Controller to add the _animationEndCallback. The problem is that the _animationEndCallback is from the AnimatedTextKit parent, not the AnimatedText subclass. I'm also debating on who should own the Animation Controller -- should each AnimatedText just create one, or should they use the AnimatedTextKit's parent? The devil is in the details...

Part of me would like to experiment with flutter_hooks, but the other part of me would like to avoid adding a dependency.

An annoying thing about this solution is that I ultimately need to tweak each AnimatedText subclass. As a result, I want the best solution. I'm sad that some of the elegance of the v3 refactoring is going away, but I am retaining most of the key benefits (removed duplicate code, more flexible animation combinations, backwards compatibility). And, I am seeing the possibility of folding TextLiquidFill to be like other AnimatedText subclasses.

I hope to resolve this today.

@ThinkDigitalSoftware
Copy link

ThinkDigitalSoftware commented Dec 14, 2020

You should look into using keys to maintain state. Adding them in the right place helps widgets identify their states and keeps them from rebuilding from scratch. This could solve everything. It definitely reduced the number of times I encountered this issue, but I'm not sure I put them in the right place and I didn't try modifying your library with these to test it

@awhitford
Copy link
Collaborator

I did some experimentation with adding Keys in the beginning, but now that I understand the problem, it won't solve this particular problem. I need to segregate the State so that it gets maintained.

@awhitford
Copy link
Collaborator

Update: PR #176 fixes this issue. 🎉 🎉 🎉
In the end, I figured out a super simple solution that did not require modifying AnimatedText or any of its subclasses.

I updated the example app to show a Tap Count, which was a simple example of calling setState during an animation that triggers the widget rebuild and exposes this bug. Before the AnimatedTextKit fix, I am able to reproduce the error. After the fix, I am no longer able to reproduce the error. This gives me confidence that this has been resolved.

I appreciate everyone's feedback, help, and patience.

@aagarwal1012 Let's work on releasing 3.0.2.

@awhitford
Copy link
Collaborator

Version 3.0.2 has been released! - https://pub.dev/packages/animated_text_kit/changelog

@alittlebitofit
Copy link

yay i updated to 3.0.2 and it works finally! thank you ^^

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants