How to get device's maximum refresh rate in flutter? - flutter

Question

My widget uses TickerProviderStateMixn and AnimationController to animate CustomPaint. and whenever AnimationController updates CustomPaint, it also updates data handler class by calling update() method in this data handler.
This widget contains player thing, and whenever update() is called, I made player bar move specific amount of x position. Player also has to show time value, basically, player bar's position indicates how time passes. So time value is displayed along player bar's position. I thought flutter supports only 60 fps, meaning update() is called 60 times per second, I made player bar move X/60 whenever update() is called. X is just any value, if time becomes 1 second when player bar reaches position of 100, then X will be 100.
But recently, I changed my phone to new one, and this device can support 120fps, and it seems AnimationController tries to animate widget with this max capable refresh rate. So update() is now called 120 times per second, and everything is done twice faster. I want to make data handler able to get maximum refresh rate, so it can synchronize player bar moving with device's screen. If device's max refresh rate is 60fps, then handler will make bar move X/60 per call, and if device can support 120fps, then it will make bar move X/120 per call, and so on.
To achieve this, I need to pass device's display's max capable refresh rate to data handler. I tried to google it, but I couldn't find any helpful posts or codes which tells the way to get this info.
Is there any way to get maximum refresh rate in flutter?
Or are there any plugins which can provide such info?
Edit:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:test_app/util/core/TestPainter.dart';
import 'package:test_app/util/core/cubit/TestData.dart';
import 'package:test_app/widget/EditPanel.dart';
import 'package:test_app/widget/Editor.dart';
class EditorPage extends StatefulWidget {
EditorPage({required this.sh, required this.sw});
final double sh;
final double sw;
#override
EditorStatus createState() => EditorStatus();
}
class EditorStatus extends State<EditorPage> with TickerProviderStateMixin {
late AnimationController _controller;
late TestPainter painter;
late TestData data;
#override
void initState() {
_controller = AnimationController(vsync: this, duration: Duration(seconds: 1));
_controller.repeat();
data = TestData(widget.sh * 0.85, widget.sw, _controller);
painter = TestPainter(data: data, animated: _controller);
super.initState();
}
#override
Widget build(BuildContext context) {
return BlocProvider<TestData>.value(
value: data,
child: Scaffold(
body: FractionallySizedBox(
widthFactor: 1,
heightFactor: 1,
child: SafeArea(
child: Stack(
children: [
Positioned(
top: widget.sh * 0.15,
bottom: 0,
left: 0,
right: 0,
child: Editor(
sh: widget.sh,
sw: widget.sw,
painter: painter,
),
),
Positioned(
top: widget.sh * 0.15 / 3,
left: 0,
right: 0,
height: widget.sh * 0.1,
child: EditPanel(widget.sw, widget.sh * 0.1),
),
],
),
),
)),
);
}
}
So basically widget called Editor and EditPanel require data handler called TestData, and painter called TestPainter. TestData requires _controller to manipulate TestPainter's animating status by calling repeat() and stop(). By status of widget (whether user is touching/scaling/long touching/etc widget or not, or whether buttons in EditPanel is clicked or not), _controller animates widget or stops animating it. TestPainter requires TestData as variable (I know now TestPainter can access _controller, but as long as I make TestPainter not touch _controller, it should be fine?), and it updates data whenever paint method is called. Even though data updating code is called, data's result differs from widget's status
For example,
return IconButton(
splashRadius: sh * 0.75 / 3,
icon: Icon(Icons.play_arrow, color: ThemeManager.getRGBfromHex(0x77d478),),
onPressed: () {
if (!data.playing) {
data.setStatus(Status.playing);
}
},
);
In EditPanel, this play button calles data, which is TestData, and in TestData,
void setStatus(Status st) {
if(st == Status.idle) {
pause();
stopVelocity();
current = st;
if(!blockAnimating) {
controller.stop();
}
} else if(st == Status.playing) {
play();
controller.repeat();
current = st;
} else if(st == Status.sliding) {
current = st;
controller.repeat();
} else if(st == Status.reversing) {
reverse();
controller.repeat();
current = st;
} else if(st == Status.selecting) {
current = st;
controller.repeat();
}
if(blockAnimating) {
controller.repeat();
}
}
As you can see, if st is playing, it calls controller.repeat(), which is AnimationController stored in TestData.
So if player status is playing, _controller will repeat itself, resulting in calls of paint method in TestPainter. Then TestPainer calls _handlePlaying() by calling updateData(Size s) method in paint, so animation with data updating can be done with AnimationController. Whenever paint is called, data gets updated, so each paint will result in different appearance (or may be not depending on status of player. If player is on idle, then it will draw same. Actually, it won't draw at all because controller.stop() will be called).
void updateData(Size s) {
sh = s.height;
sw = s.width;
if(current == Status.playing) {
_handlePlaying();
} else if(current == Status.selecting) {
updateSelectMode();
} else if(current == Status.sliding) {
performVelocity();
} else if(current == Status.reversing) {
_handleReverse();
}
_handleBlockAnimation();
}
void _handlePlaying() {
if(playPos == ((_lastBlock?.row ?? 0) + 48) * blockSize) {
setStatus(Status.idle);
return;
}
double upf = tick * blockSize / frames; //Here
playPos += upf;
if(playPos - posX >= sw - sh * 0.075) {
posX += upf;
}
updatePlayer();
if(posX > endPosX) {
posX = endPosX;
}
if(playPos > (( _lastBlock?.row ?? 0) + 48) * blockSize) {
playPos = ((_lastBlock?.row ?? 0) + 48) * blockSize;
}
}
playPos is player bar's position, and upf (unit per frame) is amount of x-pos which bar has to move per frame. So in this code X will be tick * blockSize, and frames is 60 initially. By tweaking this frames variable, I can make players move slower or faster per frame. If I set frames to 120 on device whose display can support 120 fps, then player is synced with real-time, but on 60fps display, player gets twice slower. On opposite, if I set frames to 60, then player is synced with real-time, and on 120 fps device, player gets twice faster.
I know this synchronization will be broken if fps goes lower than 60. I'm aware of this. I checked that my widget can be run with 60 fps with debug mode with slow device, so it should run faster on release mode in future. Let's skip this.
#override
void paint(Canvas cv, Size s) {
//Somewhere of codes in TestPainter
data.updateData(s);
//Keep going
}