0

I'm relatively new to Flutter building my first mobile app for a client.

I have a stateful widget that is just a title text for a page. I want to fade-in that widget whenever the user navigates to that page.

I've tried a delayed approach with a Timer (which feels a little gross) with a setState inside changing a _isTitleVisible variable which controls the opacity of the AnimatedOpacity widget. This seems to mostly work but after the first navigation, I get a blip of the animation which seems to be running twice.

Here is the current implementation showing the blip of the title.

enter image description here

I'm very open to alternative methods of making this work, this is just what I have found in my own googling.

Any help would be greatly appreciated!

Using Flutter - v1.22.5

Code:

import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class FadeInTitle extends StatefulWidget {
  @override
  _FadeInTitleState createState() => _FadeInTitleState();
}

class _FadeInTitleState extends State<FadeInTitle> {
  bool _isTitleVisible = false;
  Timer _timer;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _timer = Timer(
      Duration(milliseconds: 300),
      () => {
        setState(() {
          _isTitleVisible = true;
        }),
      },
    );
  }

  @override
  void dispose() {
    // TODO: implement dispose
    _timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    print('FadeInTitle Build');
    return AnimatedOpacity(
      opacity: _isTitleVisible ? 1.0 : 0.0,
      duration: Duration(milliseconds: 500),
      child: Text(
        'Morning Reflection',
        style: TextStyle(
          color: Colors.white,
          fontSize: 20,
        ),
      ),
    );
  }
}
Preston Schwartz
  • 49
  • 1
  • 5
  • Can you elaborate more on what you mean by 'blip of the animation'? Also, you should call `super.dispose()` at the end of your overridden `dispose` method, not at the beginning. – hman_codes Dec 29 '20 at 19:54
  • Yeah sorry, the fade-in animation with start and then about halfway through it will disappear and then fade-in again. Thanks for the super.dispose() pointer, I'll change that now, maybe that will help. – Preston Schwartz Dec 30 '20 at 04:58
  • I think I misunderstood your question, so let me ask: so the end result you want (and not getting with that code) is that whenever the user navigates to that page (by pressing back button, for example) you want the animation to run again from the beginning? – hman_codes Dec 30 '20 at 13:47
  • The user will never hit this screen by hitting the back button but you are correct, I would like this title to fade-in on the screen every time a user navigates to this screen. I've attached a gif of the current implementation showcasing the blip. – Preston Schwartz Dec 30 '20 at 14:14
  • I think this is a problem only in debug mode. Have you tried running the app in [release mode](https://stackoverflow.com/questions/51000869/flutter-how-to-make-release-version-in-android-studio)? The blip disappeared for me in that mode. – hman_codes Dec 30 '20 at 15:32
  • 1
    Just tried it via `flutter run --release` and it still happens. I feel like it has something to do with the widget being built initially and then after the delay with the setState it builds it again with the _isTitleVisible variable set to try causing it to disappear and then fade-in. – Preston Schwartz Dec 30 '20 at 15:40
  • In that case, my best guess is that it has to do with the onTap transition (but that's all I can offer at this point). As an alternative to using `Timer`, you can have a `TweenSequence` with an `AnimationController`. The first `Tween` in the sequence would be `Tween(begin: 0.0, end: 0.0)`, and the second would have its params `begin: 0.0`, and `end: 1.0`. Call `controller.forward()` at the end of `initState()`. It's worth the shot, but I doubt it will fix the problem. Good luck, sir. – hman_codes Dec 30 '20 at 15:55

0 Answers0