Flutter ListView keeps executing future function

Question

My ListView is laggy only when I scroll up. My list view is a children of a FurureBuilder. I tried addAutomaticKeepAlives: true because my data is static, but it seems to make no changes.

Please help me When I scroll up the scoll jumps suddenly up. A video showing it: https://streamable.com/1cjg3

class NavigatePageState extends State<NavigatePage> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Center(
        child: FutureBuilder(
          future: getPrincipalList(),
          builder: (context, snapshot) {
            if (snapshot.data == null) {
              return Column(
                children: <Widget>[
                  Center(
                    child: Text('Loading...') ,
                  )
                  ,
                  Container(
                    margin: EdgeInsets.only(top:100),
                    child: PlatformCircularProgressIndicator(
                      android: (_) => MaterialProgressIndicatorData(),
                      ios: (_) => CupertinoProgressIndicatorData(),
                    ),
                  )
                ],
              );
            } else {
              return ListView.builder(
                addAutomaticKeepAlives: true,
                addRepaintBoundaries: false,
                shrinkWrap: true,
                physics: BouncingScrollPhysics(),
                itemCount: snapshot.data.result.length,

                itemBuilder: (context, rowInt) {
                  return Column(
                    children: <Widget>[
                      Container(
                          child: sliderOfSongs(
                        topName: snapshot.data.result[rowInt].infoDetail.name,
                        topDescription:
                            snapshot.data.result[rowInt].infoDetail.description,
                        collectionName: snapshot
                            .data.result[rowInt].infoDetail.collectionName,
                        topIndex: rowInt,
                      )),
                      Divider(
                        color: Colors.blueGrey,
                        indent: 120,
                        endIndent: 120,
                      )
                    ],
                  );
                },
              );
            }
          },
        ),
      ),
      navigationBar: CupertinoNavigationBar(
        middle: Text('Navigate'),
      ),
    );
  }
  @override
  bool get wantKeepAlive => true;
}

Where is your data coming from? Can you log the build method of the future builder and see, if it gets invoked during your scroll ? — Daniel Eberl, Aug 23 '19 at 17:34
@DanielSzy my data is comming from an API and the future funcion ```getPrincipalList()``` (API’s one) executes when I scroll. I don’t know why — nullx, Aug 23 '19 at 17:41
So the problem seems to be not that your list view jumps but actually gets rebuild entirely. Your UI code seems alright to me. — Daniel Eberl, Aug 23 '19 at 17:54
@DanielSzy can It be this? https://stackoverflow.com/a/51225879/10226903 — nullx, Aug 23 '19 at 18:26
Can be, but it's hard to tell without seeing the whole impementation — Daniel Eberl, Aug 23 '19 at 18:56

score 0 · Answer 1 · answered Jun 29 '23 at 06:26

You can do a thing make a class variable, assume getData with type which returned from your function getPrincipalList with nullable, in the init assign this variable with your function call without await.

Future<List<String>>? getData;

@override
void initState() {
   super.initState();
   getData = getPrincipalList();
}

and in your function code make this variable as null. And pass this variable in the FutureBuilder future property, as if you passed the null to future of FutureBuilder it would rebuild itself.

Future<List<String>> getPrincipalList(){
  ....
  getData = null;
  return [];
}

Flutter ListView keeps executing future function

1 Answers1