'ListView.builder in flutter calling itemBuilder unnecessarily

I have a doubt about ListView.builder(). I am developing an application, and there are some lists with sublists, but I couldn't understand a behavior in these cases. I thought this behavior just happened in my app, but I tried simulating it in a new app and it happened too. In this case, I have the first ListView and when I scroll him, it always calls the item builder. Okay, I got it, and it happened because the ListView.builder() works on demand (lazily mode), but if I open another ListView.builder() in another Scaffold() and I close the keyboard opened by TextFieldForm, the itemBuilder of the first ListView is called... I didn't understand this behavior and I want to know if this behavior is correct.

https://user-images.githubusercontent.com/40151305/167963586-3aac6624-3c9e-4f21-88f4-5c586206c49e.mp4

Guys, it is a video example app, but in my oficial app, it is called the backend endpoints, the ListView needs to load some widgets but it's hidden, I don't see that need. I have tried use the cacheExtent property, and other properties in the documentation, but it happens too.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

List<String> valuesListViewOne = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17'];
List<String> valuesListViewTwo = ['1', '2', '3', '4'];

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const MainWidget(),
      routes: {
        'callListViewOne': (_) => const ListViewOne(),
        'callListViewTwo': (_) => const ListViewTwo(),
      },
    );
  }
}

class MainWidget extends StatelessWidget {
  const MainWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Main view'),
      ),
      body: Center(
        child: IconButton(
          iconSize: 35,
          color: Colors.black,
          icon: const Icon(Icons.add),
          onPressed: () => Navigator.of(context).pushNamed('callListViewOne'),
        ),
      ),
    );
  }
}

class ListViewOne extends StatelessWidget {
  const ListViewOne({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('List View One'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            TextFormField(),
            const Divider(),
            Expanded(
              child: ListView.builder(
                itemCount: valuesListViewOne.length,
                itemBuilder: (ctx, idx) {
                  return Container(
                    decoration: const BoxDecoration(
                      color: Colors.yellow,
                    ),
                    width: double.infinity,
                    height: 150,
                    child: Center(
                      child: Text(
                        valuesListViewOne[idx],
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: Container(
        height: 60,
        width: 60,
        decoration: const BoxDecoration(
          color: Colors.blue,
          shape: BoxShape.circle,
        ),
        child: IconButton(
          iconSize: 35,
          color: Colors.black,
          icon: const Icon(Icons.add),
          onPressed: () => Navigator.of(context).pushNamed('callListViewTwo'),
        ),
      ),
    );
  }
}

class ListViewTwo extends StatelessWidget {
  const ListViewTwo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('List View Two'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            TextFormField(),
            const Divider(),
            Expanded(
              child: ListView.builder(
                itemCount: valuesListViewTwo.length,
                itemBuilder: (ctx, idx) {
                  return Container(
                    decoration: const BoxDecoration(
                      color: Colors.yellow,
                    ),
                    width: double.infinity,
                    height: 150,
                    child: Center(
                      child: Text(
                        valuesListViewTwo[idx],
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source