Flutter custom widget in ListView causing lag
0
main.dart class
@override
Widget build(BuildContext context) {
return ListView.builder(
itemBuilder: (context, index) {
return MyCustomStatefulWidget(
"Text = $index",
);
},
);
}
Things work fine, but if I have say 1000 items in my list, then I can see the stuttering animations when ListView scrolls, and MyCustomStatefulWidget's dispose() method gets called for 990 items (which were not there on the screen). How to do this in a better way?
In other words, I can ask Is there any way to reuse/recycle my previous Widget so that it doesn't get build up for 1000 items.
Here is the code for my StatefulWidget class, however for simplicity, I am using plain Text here. But in real world, I doing other stuff which needs it to be StatefulWidget
MyCustomStatefulWidget class
class MyCustomStatefulWidget extends StatefulWidget {
final String title;
MyCustomStatefulWidget(this.title);
@override
_MyCustomStatefulWidgetState createState() => _MyCustomStatefulWidgetState();
}
class _MyCustomStatefulWidgetState extends State<MyCustomStatefulWidget> {
@override
Widget build(BuildContext context) => Text(widget.title);
@override
void dispose() {
print("dispose");
super.dispose();
}
}
dart
flutter asked Jan 19 at 11:36
VolleyballVolleyball
736217
|
show 3 more comments
0
main.dart class
@override
Widget build(BuildContext context) {
return ListView.builder(
itemBuilder: (context, index) {
return MyCustomStatefulWidget(
"Text = $index",
);
},
);
}
Things work fine, but if I have say 1000 items in my list, then I can see the stuttering animations when ListView scrolls, and MyCustomStatefulWidget's dispose() method gets called for 990 items (which were not there on the screen). How to do this in a better way?
In other words, I can ask Is there any way to reuse/recycle my previous Widget so that it doesn't get build up for 1000 items.
Here is the code for my StatefulWidget class, however for simplicity, I am using plain Text here. But in real world, I doing other stuff which needs it to be StatefulWidget
MyCustomStatefulWidget class
class MyCustomStatefulWidget extends StatefulWidget {
final String title;
MyCustomStatefulWidget(this.title);
@override
_MyCustomStatefulWidgetState createState() => _MyCustomStatefulWidgetState();
}
class _MyCustomStatefulWidgetState extends State<MyCustomStatefulWidget> {
@override
Widget build(BuildContext context) => Text(widget.title);
@override
void dispose() {
print("dispose");
super.dispose();
}
}
dart
flutter asked Jan 19 at 11:36
VolleyballVolleyball
736217
no, there is no such way - but creatingWidgets in dart is cheap so....
– pskink
Jan 19 at 11:46
btw i run your code (withoutprint("dispose");of course) and i dont see any difference in the performance between returningMyCustomStatefulWidgetorTextfrom the builder
– pskink
Jan 19 at 22:50
@pskink including/excludingdispose()won't have any effect. Like in Android development, whether you override activity lifecycle methods likeonStart(),onPause(),onDestroy()won't make any difference. Their work is just to notify you the change took place, do you wanna do some sort of work there. So, by puttingdispose()there, you are getting to know if this method actually got called, and the reason. I can explain that in much more detail if you wanna put this conversation in a chat. I really appreciate your help though. You've answered my previous questions too. I do remember.
– Volleyball
Jan 20 at 9:48
i meanprint("dispose");slows down the overral performance - thats why i said i run your code with overridendisposemethod but withoutprintfunction
– pskink
Jan 20 at 9:50
and the fact you are usingStatfulWidget(instead ofStatelessWidgetlikeText) does not make any significant impact on performance: for exampleExpansionTileisStatfulWidgettoo and you could try it in yourListView.builderto see if it slow or not
– pskink
Jan 20 at 9:59
|
show 3 more comments
0
0
0
main.dart class
@override
Widget build(BuildContext context) {
return ListView.builder(
itemBuilder: (context, index) {
return MyCustomStatefulWidget(
"Text = $index",
);
},
);
}
Things work fine, but if I have say 1000 items in my list, then I can see the stuttering animations when ListView scrolls, and MyCustomStatefulWidget's dispose() method gets called for 990 items (which were not there on the screen). How to do this in a better way?
In other words, I can ask Is there any way to reuse/recycle my previous Widget so that it doesn't get build up for 1000 items.
Here is the code for my StatefulWidget class, however for simplicity, I am using plain Text here. But in real world, I doing other stuff which needs it to be StatefulWidget
MyCustomStatefulWidget class
class MyCustomStatefulWidget extends StatefulWidget {
final String title;
MyCustomStatefulWidget(this.title);
@override
_MyCustomStatefulWidgetState createState() => _MyCustomStatefulWidgetState();
}
class _MyCustomStatefulWidgetState extends State<MyCustomStatefulWidget> {
@override
Widget build(BuildContext context) => Text(widget.title);
@override
void dispose() {
print("dispose");
super.dispose();
}
}
dart
flutter asked Jan 19 at 11:36
VolleyballVolleyball
736217
main.dart class
@override
Widget build(BuildContext context) {
return ListView.builder(
itemBuilder: (context, index) {
return MyCustomStatefulWidget(
"Text = $index",
);
},
);
}
Things work fine, but if I have say 1000 items in my list, then I can see the stuttering animations when ListView scrolls, and MyCustomStatefulWidget's dispose() method gets called for 990 items (which were not there on the screen). How to do this in a better way?
In other words, I can ask Is there any way to reuse/recycle my previous Widget so that it doesn't get build up for 1000 items.
Here is the code for my StatefulWidget class, however for simplicity, I am using plain Text here. But in real world, I doing other stuff which needs it to be StatefulWidget
MyCustomStatefulWidget class
class MyCustomStatefulWidget extends StatefulWidget {
final String title;
MyCustomStatefulWidget(this.title);
@override
_MyCustomStatefulWidgetState createState() => _MyCustomStatefulWidgetState();
}
class _MyCustomStatefulWidgetState extends State<MyCustomStatefulWidget> {
@override
Widget build(BuildContext context) => Text(widget.title);
@override
void dispose() {
print("dispose");
super.dispose();
}
}
dart
flutter dart
flutter asked Jan 19 at 11:36
VolleyballVolleyball
736217
asked Jan 19 at 11:36
VolleyballVolleyball
736217
edited Jan 19 at 12:05
Volleyball
asked Jan 19 at 11:36
VolleyballVolleyball
736217
asked Jan 19 at 11:36
VolleyballVolleyball
736217
asked Jan 19 at 11:36
VolleyballVolleyball
736217
736217
no, there is no such way - but creatingWidgets in dart is cheap so....
– pskink
Jan 19 at 11:46
btw i run your code (withoutprint("dispose");of course) and i dont see any difference in the performance between returningMyCustomStatefulWidgetorTextfrom the builder
– pskink
Jan 19 at 22:50
@pskink including/excludingdispose()won't have any effect. Like in Android development, whether you override activity lifecycle methods likeonStart(),onPause(),onDestroy()won't make any difference. Their work is just to notify you the change took place, do you wanna do some sort of work there. So, by puttingdispose()there, you are getting to know if this method actually got called, and the reason. I can explain that in much more detail if you wanna put this conversation in a chat. I really appreciate your help though. You've answered my previous questions too. I do remember.
– Volleyball
Jan 20 at 9:48
i meanprint("dispose");slows down the overral performance - thats why i said i run your code with overridendisposemethod but withoutprintfunction
– pskink
Jan 20 at 9:50
and the fact you are usingStatfulWidget(instead ofStatelessWidgetlikeText) does not make any significant impact on performance: for exampleExpansionTileisStatfulWidgettoo and you could try it in yourListView.builderto see if it slow or not
– pskink
Jan 20 at 9:59
|
show 3 more comments
no, there is no such way - but creatingWidgets in dart is cheap so....
– pskink
Jan 19 at 11:46
btw i run your code (withoutprint("dispose");of course) and i dont see any difference in the performance between returningMyCustomStatefulWidgetorTextfrom the builder
– pskink
Jan 19 at 22:50
@pskink including/excludingdispose()won't have any effect. Like in Android development, whether you override activity lifecycle methods likeonStart(),onPause(),onDestroy()won't make any difference. Their work is just to notify you the change took place, do you wanna do some sort of work there. So, by puttingdispose()there, you are getting to know if this method actually got called, and the reason. I can explain that in much more detail if you wanna put this conversation in a chat. I really appreciate your help though. You've answered my previous questions too. I do remember.
– Volleyball
Jan 20 at 9:48
i meanprint("dispose");slows down the overral performance - thats why i said i run your code with overridendisposemethod but withoutprintfunction
– pskink
Jan 20 at 9:50
and the fact you are usingStatfulWidget(instead ofStatelessWidgetlikeText) does not make any significant impact on performance: for exampleExpansionTileisStatfulWidgettoo and you could try it in yourListView.builderto see if it slow or not
– pskink
Jan 20 at 9:59
no, there is no such way - but creating
Widgets in dart is cheap so....– pskink
Jan 19 at 11:46
no, there is no such way - but creating
Widgets in dart is cheap so....– pskink
Jan 19 at 11:46
btw i run your code (without
print("dispose"); of course) and i dont see any difference in the performance between returning MyCustomStatefulWidget or Text from the builder– pskink
Jan 19 at 22:50
btw i run your code (without
print("dispose"); of course) and i dont see any difference in the performance between returning MyCustomStatefulWidget or Text from the builder– pskink
Jan 19 at 22:50
@pskink including/excluding
dispose() won't have any effect. Like in Android development, whether you override activity lifecycle methods like onStart(), onPause(), onDestroy() won't make any difference. Their work is just to notify you the change took place, do you wanna do some sort of work there. So, by putting dispose() there, you are getting to know if this method actually got called, and the reason. I can explain that in much more detail if you wanna put this conversation in a chat. I really appreciate your help though. You've answered my previous questions too. I do remember.– Volleyball
Jan 20 at 9:48
@pskink including/excluding
dispose() won't have any effect. Like in Android development, whether you override activity lifecycle methods like onStart(), onPause(), onDestroy() won't make any difference. Their work is just to notify you the change took place, do you wanna do some sort of work there. So, by putting dispose() there, you are getting to know if this method actually got called, and the reason. I can explain that in much more detail if you wanna put this conversation in a chat. I really appreciate your help though. You've answered my previous questions too. I do remember.– Volleyball
Jan 20 at 9:48
i mean
print("dispose"); slows down the overral performance - thats why i said i run your code with overriden dispose method but without print function– pskink
Jan 20 at 9:50
i mean
print("dispose"); slows down the overral performance - thats why i said i run your code with overriden dispose method but without print function– pskink
Jan 20 at 9:50
and the fact you are using
StatfulWidget (instead of StatelessWidget like Text) does not make any significant impact on performance: for example ExpansionTile is StatfulWidget too and you could try it in your ListView.builder to see if it slow or not– pskink
Jan 20 at 9:59
and the fact you are using
StatfulWidget (instead of StatelessWidget like Text) does not make any significant impact on performance: for example ExpansionTile is StatfulWidget too and you could try it in your ListView.builder to see if it slow or not– pskink
Jan 20 at 9:59
|
show 3 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54266668%2fflutter-custom-widget-in-listview-causing-lag%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54266668%2fflutter-custom-widget-in-listview-causing-lag%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
no, there is no such way - but creating
Widgets in dart is cheap so....– pskink
Jan 19 at 11:46
btw i run your code (without
print("dispose");of course) and i dont see any difference in the performance between returningMyCustomStatefulWidgetorTextfrom the builder– pskink
Jan 19 at 22:50
@pskink including/excluding
dispose()won't have any effect. Like in Android development, whether you override activity lifecycle methods likeonStart(),onPause(),onDestroy()won't make any difference. Their work is just to notify you the change took place, do you wanna do some sort of work there. So, by puttingdispose()there, you are getting to know if this method actually got called, and the reason. I can explain that in much more detail if you wanna put this conversation in a chat. I really appreciate your help though. You've answered my previous questions too. I do remember.– Volleyball
Jan 20 at 9:48
i mean
print("dispose");slows down the overral performance - thats why i said i run your code with overridendisposemethod but withoutprintfunction– pskink
Jan 20 at 9:50
and the fact you are using
StatfulWidget(instead ofStatelessWidgetlikeText) does not make any significant impact on performance: for exampleExpansionTileisStatfulWidgettoo and you could try it in yourListView.builderto see if it slow or not– pskink
Jan 20 at 9:59