setState() or markNeedsBuild() called during build when playing rive animation - flutter

Question

I got error setState() or markNeedsBuild() called during build while I try to invoke this function:
void togglePlay() {
if (_controller == null) {
return;
}
setState(() => _controller.isActive = !_controller.isActive);
}
Error doesn't not occur when I use it with button as a onTap function. But I need to invoke only with other functions.
Here is complete code:
void togglePlay() {
if (_controller == null) {
return;
}
setState(() => _controller.isActive = !_controller.isActive);
}
bool get isPlaying => _controller?.isActive ?? false;
Artboard _riveArtboard;
RiveAnimationController _controller;
// rive
#override
void initState() {
print('guess position');
// rive
try {
rootBundle.load('assets/match.riv').then(
(data) async {
final file = RiveFile.import(data);
final artboard = file.mainArtboard;
artboard.addController(_controller = SimpleAnimation('Animation 1'));
_controller.isActive = false;
setState(() => _riveArtboard = artboard);
},
);
} catch (e) {
print(e.toString());
}
// rive
super.initState();
}
List top = [];
List left = [];
List rotation = [];
next() {
List correctT = [];
List correct = [];
for (int n = 0; n < widget.rotation.length; n++) {
for (int m = 0; m < widget.rotation.length; m++) {
if (rotation[m] == widget.rotation[n] &&
top[m] < widget.top[n] + 45 &&
top[m] > widget.top[n] - 45 &&
left[m] < widget.left[n] + 45 &&
left[m] > widget.left[n] - 45) {
log('widget match $m qgueals match $n');
if (!correctT.contains(n) && !correct.contains(m)) {
correctT.add(n);
correct.add(m);
}
}
}
}
if (correctT.length == widget.rotation.length) {
log('nice');
togglePlay(); // FUNCTION CAUSING ERROR
}
}
nav() {
SchedulerBinding.instance.addPostFrameCallback((_) {
Navigator.push(
context, new MaterialPageRoute(builder: (context) => RandomPos(2)));
});
}
bool created = false;
createList() {
if (!created) {
for (int i = 0; i < widget.top.length; i++) {
top.add(h - 250);
left.add(50);
rotation.add(0);
}
setState(() {
created = true;
});
}
}
match(int i) {
return Positioned(
top: top[i].toDouble(),
left: left[i].toDouble(),
child: RotationTransition(
turns: new AlwaysStoppedAnimation(rotation[i] / 360),
child: GestureDetector(
onTap: () {
rotation[i] = rotation[i] + 45;
setState(() {});
next();
},
onDoubleTap: () {
rotation[i] = rotation[i] - 45;
setState(() {});
next();
},
child: Draggable(
data: 10,
onDragUpdate: (details) {
top[i] = top[i] + details.delta.dy;
left[i] = left[i] + details.delta.dx;
setState(() {});
},
onDragEnd: next(),
child: Container(
height: 250,
width: 250,
child: _riveArtboard == null
? const SizedBox()
: Rive(artboard: _riveArtboard),
),
feedback: Container()),
),
));
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: FutureBuilder(
future: createList(),
builder: (context, snapshot) {
return Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: AssetImage('wood${widget.wood}.jpg'))),
child: Stack(
children: [for (int i = 0; i < rotation.length; i++) match(i)],
),
);
}),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.white,
child: Text(
'next',
style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold),
),
onPressed: () => nav()),
);
}
}
Thank you if you could have a look and help me in solving
A few soluttion for typical "set state called during rebuild" didnt work or caused other errors

Answer 1

This error comes when we are calling setState during the build phase.
Use addPostFrameCallback which runs after build rendering is done
void togglePlay() {
WidgetsBinding.instance.addPostFrameCallback((_) {
if (_controller == null) {
return;
}
setState(() => _controller.isActive = !_controller.isActive);
});
}
OR
Timer.run(() {
if (_controller == null) {
return;
}
setState(() => _controller.isActive = !_controller.isActive);
});