Flutter page comes too slow. when it contain long data-CodePudding

My first page contains an flat button. when I press on that button, navigate to another page(MyApp) too slow(It contains long data). How to resolve it.Here is my code.

class MyApp extends StatefulWidget {
  final List<String> items;
  const MyApp({ this.items});

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  final ScrollController scrollcontroller=ScrollController();
  var scaffoldkey=GlobalKey<ScaffoldState>();
  @override
  Widget build(BuildContext context) {
    const title = 'Long List';
    return Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body:Stack(children: [Column(children:[ListView(shrinkWrap:true,children:[    Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Center(
              child: Padding(
                padding: const EdgeInsets.symmetric(vertical:0.0),
                child: Container(
                  width: 300,
                  height: 70,
                  decoration: BoxDecoration(border:Border.all(color:Colors.brown[100],),color: Colors.orange[50], borderRadius:BorderRadius.all(Radius.circular(5.0))),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children:<Widget> [
                      Container(height: 35,
                        decoration: BoxDecoration(color: Colors.white,
                          border: Border.all(color: Colors.brown[300],width: 1),
                          borderRadius: BorderRadius.circular(5),),),],),),),),],)
        ]),Expanded(child:ListView(shrinkWrap:true,children:[ListView.builder(
      shrinkWrap: true, physics: ScrollPhysics(), scrollDirection: Axis.vertical, itemCount:widget.items.length,
          itemBuilder: (context, index) {
            return ListTile(title: Text(widget.items[index]),);},),]))])]) );}} ```

CodePudding user response：

The best way is probably to load parts of your data as the user scrolls.

final ScrollController scrollcontroller=ScrollController();

List<String> items;

int numberOfItemsLoadedPerScroll = 15;
List<String> loadedItems = items.sublist(0, 15);

scrollcontroller.addListener(() {
  setState(() {
    loadedItems = items.sublist(0, loadedItems.Legth numberOfItemsLoadedPerScroll);
  });
});

It would be better to use a Bloc system and update the Stream instead of calling setState. But I think something like this should work.

CodePudding user response：

The list view you are using is extremely inefficient and it takes some amount of time to build and render all the widgets inside it. I would suggest for you to use a list view builder instead as it would render your view way faster and it is the optimized way to have a list view in the first place. https://flutter.dev/docs/cookbook/lists/long-lists Here are the docs if you want to check them out and it goes without saying that it is a best practice to use a list view builder instead of a regular old list view! **Edit: for further explanation the list view builder renders items as you scroll down or up the list(15 items required to fill the screen for example) while the list view renders the entirety of the list all at once which may cause the app to be quiet slow and sometimes render it unresponsive by the managing OS (ios or android) if it takes too long.