flutter animated image is so laggy - flutter

Question

import 'dart:math';
import 'package:audioplayers/audio_cache.dart';
import 'package:audioplayers/audioplayers.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:image_sequence_animator/image_sequence_animator.dart';
import 'package:kane/model/KaneType.dart';
class Kane extends StatefulWidget {
Kane({Key key}) : super(key: key);
#override
KaneState createState() => KaneState();
}
class KaneState extends State<Kane> {
int _noseCount = 0;
bool _isHover = false;
bool _isPlaying = false;
KaneType _kaneType = KaneType.Kane;
List<GlobalKey<ImageSequenceAnimatorState>> animatorKeyList = [
GlobalKey(),
GlobalKey(),
GlobalKey(),
GlobalKey(),
GlobalKey()
];
AudioCache _cache = AudioCache();
AudioPlayer _player;
#override
Widget build(BuildContext context) {
ScreenUtil.init(context);
Widget kane;
switch (_kaneType) {
case KaneType.Kane:
kane = _kaneAnimation("kane", 8, 15, animatorKeyList[0], true);
break;
case KaneType.Ricardo:
kane = _kaneAnimation("ricardo", 212, 15, animatorKeyList[1], false);
break;
case KaneType.SexyKane:
kane = _kaneAnimation("sexyKane", 9, 15, animatorKeyList[2], true);
break;
case KaneType.MoemoeKane:
kane = _kaneAnimation("moemoe", 137, 24, animatorKeyList[3], false);
break;
default:
kane = _kaneAnimation("hanwha", 203, 24, animatorKeyList[4], false);
}
return Stack(
children: <Widget>[
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: ScreenUtil().setHeight(800),
child: kane,
),
),
_kaneType == KaneType.Kane && !_isPlaying
? Positioned(
top: ScreenUtil().setHeight(918),
left: ScreenUtil().setWidth(506),
right: ScreenUtil().setWidth(506),
child: InkWell(
child: _isHover
? ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.grey[400], BlendMode.modulate),
child: Image.asset(
"assets/kane/kane/nose.webp",
width: ScreenUtil().setHeight(40),
height: ScreenUtil().setHeight(40),
fit: BoxFit.contain,
))
: Image.asset(
"assets/kane/kane/nose.webp",
width: ScreenUtil().setHeight(40),
height: ScreenUtil().setHeight(40),
fit: BoxFit.contain,
),
onTap: () {
setState(() => _isHover = false);
if (++_noseCount >= Random().nextInt(5) + 3) {
_noseCount = 0;
_cache.play('music/igonan.m4a');
} else {
_cache.play('music/bbolong.mp3');
}
},
onTapDown: (_) => setState(() => _isHover = true),
onTapCancel: () => setState(() => _isHover = false),
),
)
: Container()
],
);
}
Widget _kaneAnimation(String name, double frameCount, double fps,
GlobalKey<ImageSequenceAnimatorState> key, bool rewind) {
bool first = true;
return InkWell(
child: ImageSequenceAnimator(
"assets/kane/$name",
"$name",
0,
frameCount.toString().length - 2,
"webp",
frameCount,
key: key,
fps: fps,
isAutoPlay: false,
color: null,
onFinishPlaying: (animator) {
if (rewind && first) {
key.currentState.rewind();
first = false;
} else {
setState(() {
_isPlaying = false;
first = true;
});
key.currentState.reset();
}
},
),
onTap: () async {
if (!_isPlaying) {
setState(() {
_isPlaying = true;
});
_player = await _cache.play('music/$name.mp3');
key.currentState.play();
} else {
setState(() {
_isPlaying = false;
first = true;
});
_player.stop();
key.currentState.reset();
}
},
);
}
changeKane(KaneType kaneType) {
setState(() => _kaneType = kaneType);
}
}
I made an animation, but some devices are lagging.
https://www.youtube.com/watch?v=oScBgRUp1B8&feature=youtu.be
The animation is lagging too much.
InkWell(
child: Image.asset(
"assets/kane/moemoe/moemoe$_imageCount.webp",
),
onTap: () async {
for (int j = 1; j <= 136; j++) {
await Future.delayed(const Duration(milliseconds: 42), () {
setState(() => _imageCount++);
});
}
},
)
It's lagging even in this way. Also lag seems to only appear on some smartphones such as Galaxy a30, s7, and s9. p.s I am not good at English.
enter image description here The total size of the image is 3mb.

Answer 1

You are calling setState(() => _imageCount++); inside a for loop. Be careful when using this method! Calling setState, according to the documentation:
Calling setState notifies the framework that the internal state of this object has changed in a way that might impact the user interface in this subtree, which causes the framework to schedule a build for this State object.
The means, this for loop:
for (int j = 1; j <= 136; j++) {
await Future.delayed(const Duration(milliseconds: 42), () {
setState(() => _imageCount++);
});
}
Might be the cause of the lag. Every loop, you are telling your application that something has changed, and it needs to rebuild all the elements inside the build() function. And that might not be the only cause of lag, as I see you use setState((){}) a lot.