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,
);
}
}
User contributions licensed under CC BY-SA 3.0