When I try to setState on a fast Timer.periodic, the raster performance is decreased and increased suddenly:
The code is a simple setState inside a Timer.periodic:
class _MyHomePageState extends State<MyHomePage> {
Timer? timer;
#override
void initState() {
super.initState();
timer = Timer.periodic(
const Duration(milliseconds: 1000 ~/ 60),
(timer) {
setState(() {});
},
);
}
#override
void dispose() {
timer?.cancel();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Center(child: Container(width: 100, height: 100, color: Colors.red));
}
}
This happens to me in Windows.
This is what the performance graph of a "normal" timed frame looks like:
This and a frame that takes a lot of time:
Why does this happen? How can i prevent it?
Related
Let's say I am constantly changing the value of a Slider and make some call to a server in the onChanged callback function. Is it possible to change the minimum time period between the callbacks efficiently?
Slider showSoundBar(){
return Slider(
value: this.volume,
activeColor: Colors.blue,
onChanged: (vol){
// Don't send too often
send('volume', vol);
},
);
}
You could do something like this using a Timer from dart:async..
class MyWidget extends StatefulWidget {
#override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
Timer timer;
int timePassedInMilliseconds = 1500;
#override
void initState(){
super.initState();
timer = Timer.periodic(Duration(milliseconds: 100), (_){
timePassedInMilliseconds = timePassedInMilliseconds + 100;
});
}
#override
Widget build(BuildContext context) {
return Slider(
value: 10,
activeColor: Colors.blue,
onChanged: (vol){
// Don't send too often
if(timePassedInMilliseconds > 1500){
send('volume', vol);
timePassedInMilliseconds = 0;
}
},
);
}
void send(String sendWhat, double value){
}
#override
void dispose(){
timer.cancel();
super.dispose();
}
}
I'd like to create a beginning icon as Icon.add and end icon which is Icon.close in the AnimatedIcon widget. For e.g. their is a prebuilt animation of add_event that corresponds to begin animation = add and end animation = event. I'd like to change the end animation to be Icon.close. It's unclear how to do this as there's no documentation readily available for creating custom animations. The most relevant code I could find is: https://github.com/flutter/flutter/blob/e10df3c1a65f9d7db3fc5340cffef966f7bd40a6/packages/flutter/lib/src/material/animated_icons/data/add_event.g.dart. I believe I should use vitool. How can I go about creating new animations?
Yes, friend, you need to create your own animation
I have written code for the situation that you talked about
I used to Transform widget , and AnimationController
import 'dart:math';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
AnimationController animatedController;
double _angle = 0;
#override
void initState() {
animatedController =
AnimationController(vsync: this, duration: Duration(milliseconds: 300));
animatedController.addListener(() {
setState(() {
_angle = animatedController.value * 45 / 360 * pi * 2;
});
});
super.initState();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: InkResponse(
onTap: () {
if (animatedController.status == AnimationStatus.completed)
animatedController.reverse();
else if (animatedController.status == AnimationStatus.dismissed)
animatedController.forward();
},
child: Transform.rotate(
angle: _angle,
child: Icon(
Icons.add,
size: 50,
),
),
),
)));
}
}
If you need to customize more than this, Take a look at the AnimatedContainer
So I had some free time and this is something many people might want to use at some point as we do not have much options for AnimatedIcons that are already given to us.
So I went ahead and built this small package and uploaded it on pub dart that solves what you are looking for.
With this package you can animate any two icons.
Check on pub dart animate_icons
Simply add the package into pubspec.yaml like this:
animate_icons:
Then use this Widget like this:
AnimateIcons(
startIcon: Icons.add,
endIcon: Icons.close,
size: 60.0,
onStartIconPress: () {
print("Clicked on Add Icon");
},
onEndIconPress: () {
print("Clicked on Close Icon");
},
duration: Duration(milliseconds: 500),
color: Theme.of(context).primaryColor,
clockwise: false,
),
if the simple transition between the two icons is enough, then simple_animated_icon package might be useful.
class AnimatedIconButton extends StatefulWidget {
#override
_AnimatedIconButtonState createState() => _AnimatedIconButtonState();
}
class _AnimatedIconButtonState extends State<AnimatedIconButton>
with SingleTickerProviderStateMixin {
bool _isOpened = false;
AnimationController _animationController;
Animation<double> _progress;
#override
void initState() {
super.initState();
_animationController =
AnimationController(vsync: this, duration: Duration(milliseconds: 300))
..addListener(() {
setState(() {});
});
_progress =
Tween<double>(begin: 0.0, end: 1.0).animate(_animationController);
}
#override
void dispose() {
_animationController.dispose();
super.dispose();
}
void animate() {
if (_isOpened) {
_animationController.reverse();
} else {
_animationController.forward();
}
setState(() {
_isOpened = !_isOpened;
});
}
#override
Widget build(BuildContext context) {
return IconButton(
onPressed: animate,
icon: SimpleAnimatedIcon(
startIcon: Icons.add,
endIcon: Icons.close,
progress: _progress,
));
}
}
I've created a screen in Flutter that displays a countdown timer. I'm able to play, pause and restart the timer, but I am trying to figure out how to perform an action when the timer reaches 0 (for example, restart itself).
As the dart file is fairly lengthy, I'm just copying below what I believe to be the relevant portions here. But I can add more if needed.
First I create a widget/class for the countdown timer:
class Countdown extends AnimatedWidget {
Countdown({ Key key, this.animation }) : super(key: key, listenable: animation);
Animation<int> animation;
#override
build(BuildContext context){
return Text(
animation.value.toString(),
style: TextStyle(
fontSize: 120,
color: Colors.deepOrange
),
);
}
}
I then have a stateful widget which creates the controller and also imports some data (gameData.countdownClock is the countdown timer's start time, it comes from user input at an earlier screen):
class _GameScreenState extends State<GameScreen> with TickerProviderStateMixin {
AnimationController _controller;
_GameScreenState(this.gameData);
GameData gameData;
#override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: gameData.countdownClock),
);
}
And then the container that displays the clock:
Container(
child: Countdown(
animation: StepTween(
begin: gameData.countdownClock,
end: 0,
).animate(_controller),
),
),
Do I have to add a listener in that last container? Or somewhere else? (Or something else entirely!)
Any help is appreciated. Thank you
I found the answer on this page:
After complete the widget animation run a function in Flutter
I needed to add .addStatusListener to the animation controller in the initState().
So the new initState() code looks like this:
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: gameData.countdownClock),
);
_controller.addStatusListener((status){
if(status == AnimationStatus.completed){
_controller.reset();
}
}
);
}
Possible value of Animation controller is between 0 to 1.
So I think you have to add listener on gamedata.countDownClock
Please check the below code you might get some idea from it.
import 'dart:async';
import 'package:flutter/material.dart';
class GameScreen extends StatefulWidget {
#override
_GameScreenState createState() => _GameScreenState();
}
class _GameScreenState extends State<GameScreen> with SingleTickerProviderStateMixin {
int countdownClock = 10;
#override
void initState() {
super.initState();
// Your Game Data Counter Change every one Second
const oneSec = const Duration(seconds:1);
new Timer.periodic(oneSec, (Timer t) {
// Restart The Counter Logic
if (countdownClock == 0)
countdownClock = 11;
setState(() { countdownClock = countdownClock - 1; });
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("")),
body: Center(
child: Text('$countdownClock')
),
);
}
}
I have a container widget that I try to animate from Colors.blue to Colors.blueGrey and back periodically every 2 seconds.
How can I most easily tackle this in Flutter?
You can use an infinite while loop, don't think this is the best way of doing this, but it gets the job done.
I have a Color Changing class
class ColorChanger extends StatefulWidget {
#override
_ColorChangerState createState() => _ColorChangerState();
}
class _ColorChangerState extends State<ColorChanger>
with SingleTickerProviderStateMixin {
AnimationController _animationController;
Animation _colorTween;
#override
void initState() {
_animationController = AnimationController(
vsync: this, duration: Duration(milliseconds: 1999));
_colorTween = ColorTween(begin: Colors.blue, end: Colors.blueGrey)
.animate(_animationController);
changeColors();
super.initState();
}
Future changeColors() async {
while (true) {
await new Future.delayed(const Duration(seconds: 2), () {
if (_animationController.status == AnimationStatus.completed) {
_animationController.reverse();
} else {
_animationController.forward();
}
});
}
}
#override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _colorTween,
builder: (context, child) => Container(
color: _colorTween.value,
),
);
}
}
This is a rough example, but should lead you in the right direction.
Please see ColorTween Class
I would suggest using the AnimatedContainer. This widget allows you to build it with a particular atribute like color and when you rebuild it with a different value it performs linear interpolation between those values.
#override
Widget build(BuildContext context) {
return AnimatedContainer(
width: 100,
height: 100,
duration: _animationDuration,
color: _color,
);
}
Then you just have to rebuild the widget with a different color:
void _changeColor() {
final newColor = _color == Colors.blue ? Colors.blueGrey : Colors.blue;
setState(() {
_color = newColor;
});
}
The make it periodically I would use a timer class:
_timer = Timer.periodic(_animationDuration, (timer) => _changeColor());
The whole code:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class AnimationTest extends StatefulWidget {
#override
_AnimationTestState createState() => _AnimationTestState();
}
class _AnimationTestState extends State<AnimationTest> {
final _animationDuration = Duration(seconds: 2);
Timer _timer;
Color _color;
#override
void initState() {
super.initState();
_timer = Timer.periodic(_animationDuration, (timer) => _changeColor());
_color = Colors.blue;
}
void _changeColor() {
final newColor = _color == Colors.blue ? Colors.blueGrey : Colors.blue;
setState(() {
_color = newColor;
});
}
#override
Widget build(BuildContext context) {
return AnimatedContainer(
width: 100,
height: 100,
duration: _animationDuration,
color: _color,
);
}
#override
void dispose() {
super.dispose();
_timer.cancel();
}
}
I have a custom widget that has normal / animated state. Sometimes I want to be it animated, and sometimes static.
I have made a simple test project to demonstrate my problem: test page contains my custom widget (ScoreBoard) and 2 buttons to start / stop animating scoreboard. My problem, that ScoreBoard is not animated, even if I start animation.
Here is my code:
TestPage:
class TestPage extends StatefulWidget {
#override
_TestPageState createState() => _TestPageState();
}
class _TestPageState extends State<TestPage> {
bool _animate;
#override
void initState() {
_animate = false;
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
ScoreBoard(
text: "Hello, world!",
animate: _animate,
),
FlatButton(
child: Text("START animation"),
onPressed: () {
setState(() {
_animate = true;
});
},
),
FlatButton(
child: Text("STOP animation"),
onPressed: () {
setState(() {
_animate = false;
});
},
),
],
),
);
}
}
ScoreBoard widget:
class ScoreBoard extends StatefulWidget {
final String text;
final bool animate;
const ScoreBoard({Key key, this.text, this.animate}) : super(key: key);
#override
_ScoreBoardState createState() => _ScoreBoardState();
}
class _ScoreBoardState extends State<ScoreBoard>
with SingleTickerProviderStateMixin {
AnimationController _controller;
#override
void initState() {
super.initState();
_controller = new AnimationController(
duration: const Duration(seconds: 1),
vsync: this,
)..forward();
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return widget.animate
? ScaleTransition(
child:
Text(widget.text, style: Theme.of(context).textTheme.display1),
scale: new CurvedAnimation(
parent: _controller,
curve: Curves.easeIn,
),
)
: Container(
child:
Text(widget.text, style: Theme.of(context).textTheme.display1),
);
}
}
Would you be so kind to help me? Thanks in advance!
Answer
If you initialize an AnimationController widget and do not specify arguments for lowerBound and upperBound (which is the case here), your animation is going to start by default with lowerBound 0.0.
AnimationController({double value, Duration duration, String debugLabel, double lowerBound: 0.0, double upperBound: 1.0, AnimationBehavior animationBehavior: AnimationBehavior.normal, #required TickerProvider vsync })
Creates an animation controller. [...]
https://docs.flutter.io/flutter/animation/AnimationController-class.html
If you initialize the state of your widget ScoreBoard, the method forward gets called only once during the whole lifetime of your app. The method forward makes that your animation increases from the lowerBound (0.0) to the upperBound (1.0) within 1 second.
Starts running this animation forwards (towards the end).
https://docs.flutter.io/flutter/animation/AnimationController/forward.html
In our case, there is no way back once the method forward got called. We are only able to stop the animation.
Press Ctrl + F5 for a full restart of the app to see the animation.
To make it even clearer, change the duration of your animation to 10 seconds.
Btw. since Dart 2 you do not need to use the new keyword.
#override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 10),
vsync: this,
)..forward();
}
Example
To see what happens you could add this to your build method:
#override
Widget build(BuildContext context) {
// Execute 'reverse' if the animation is completed
if (_controller.isCompleted)
_controller.reverse();
else if (_controller.isDismissed)
_controller.forward();
// ...
... and do not call the method forward in the initState method:
#override
void initState() {
super.initState();
_controller = new AnimationController(
duration: const Duration(seconds: 10),
vsync: this,
);
}