'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.
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 |
|---|
