Duration is speed up 10 times

0

I am encountering a very strange issue with Duration in my welcome screen in two occasions.

First, I placed the icon with AvatarGlow and I set:

duration: const Duration(seconds: 5)

Second, I am using delayed animations to build up the welcome screen:

            DelayedAnimation(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                ],
              ),
              delay: delayedAmount + 750,
            ),

Now my issue is device-related, I guess. When I build the app on any Android Device Emulator the duration is completely correct, so the Avatar glowing effect has a duration of 5 seconds, BUT when I am building this app on my physical Xiaomi Mi A2 the whole duration is speed up times 10. I have to set the duration to 50 seconds to actually achieve 5 seconds.

It seems it only affects my welcome screen as I tested a simple countdown with Duration() on another screen and a second is actually a second there.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; // statusbar color
import 'delayed_animation.dart';
import 'package:avatar_glow/avatar_glow.dart';

class WelcomeView extends StatefulWidget {
  WelcomeView({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _WelcomeView createState() => new _WelcomeView();
}

class _WelcomeView extends State<WelcomeView> with SingleTickerProviderStateMixin {
  final int delayedAmount = 500;
  double _scale;
  AnimationController _controller;
  @override
  void initState() {
    _controller = AnimationController(
      vsync: this,
      duration: Duration(
        milliseconds: 200,
      ),
      lowerBound: 0.0,
      upperBound: 0.1,
    )..addListener(() {
      setState(() {});
    });
    super.initState();
  }


  @override
  Widget build(BuildContext context) {
    _scale = 1 - _controller.value;
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarIconBrightness: Brightness.light,
      statusBarColor: Colors.transparent,
    ));
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          backgroundColor: Color(0xFF221f1c),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                SizedBox(height: 20),
                DelayedAnimation(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      AvatarGlow(
                          repeat: true,
                          endRadius: 100,
                          showTwoGlows: false,
                          glowColor: Color(0xFFb69862),
                          duration: const Duration(seconds: 4),
                          repeatPauseDuration: Duration(milliseconds: 500),
                          startDelay: Duration(seconds: 0),
                          child: Material(
                              elevation: 0.0,
                              shape: CircleBorder(),
                              child: CircleAvatar(
                                backgroundColor: Color(0xFF000000),
                                child: Image.asset('assets/images/logo.png', width: 70,),
                                radius: 60.0,
                              )
                          ),
                          animate: true,
                          curve: Curves.fastOutSlowIn
                      ),
                    ],
                  ),
                  delay: delayedAmount + 500, // Avatar
                ),
                SizedBox(height: 30.0),
                DelayedAnimation(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                    ],
                  ),
                  delay: delayedAmount + 750,
                ),
                DelayedAnimation(
                  child: Text(
                  ),
                  delay: delayedAmount + 1000,
                ),
                SizedBox(height: 130.0),
                DelayedAnimation(
                  child: GestureDetector(
                    onTap: () {},
                    child: Transform.scale(
                      scale: _scale,
                      child: _animatedButtonUI,
                    ),
                  ),
                  delay: delayedAmount + 1500,
                ),
                SizedBox(height: 50.0),
                DelayedAnimation(
                  child: GestureDetector(
                    onTap: () {},
                    child: Text(
                    ),
                  ),
                  delay: delayedAmount + 1500,
                ),
              ],
            ),
          )
      ),
    );
  }

  Widget get _animatedButtonUI => Column(
    children: <Widget>[
      Container(
        height: 60,
        width: 270,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(88.0),
          color: Color(0xFFb69862),
        ),
        child: Center(
          child: Text(
            'REGISTRIEREN',
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
              color: Color(0xFFFFFFFF),
            ),
          ),
        ),
      ),
    ],
  );
}

delayed_animation.dart

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

class DelayedAnimation extends StatefulWidget {
  final Widget child;
  final int delay;

  DelayedAnimation({@required this.child, this.delay});

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

class _DelayedAnimationState extends State<DelayedAnimation>
    with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _animOffset;

  @override
  void initState() {
    super.initState();

    _controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 10000));
    final curve =
    CurvedAnimation(curve: Curves.easeIn, parent: _controller);
    _animOffset =
        Tween<Offset>(begin: const Offset(0.0, 0.35), end: Offset.zero)
            .animate(curve);

    if (widget.delay == null) {
      _controller.forward();
    } else {
      Timer(Duration(milliseconds: widget.delay), () {
        _controller.forward();
      });
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      child: SlideTransition(
        position: _animOffset,
        child: widget.child,
      ),
      opacity: _controller,
    );
  }
}
android
flutter
dart
asked on Stack Overflow Mar 4, 2020 by Dominik

0 Answers

Nobody has answered this question yet.


User contributions licensed under CC BY-SA 3.0