Ask for any additional Information ( im new to this, so I might not understand some things)
I am doing a query to extract products from database. I return products with ListView.builder. But I added the posibility to press on them so i can display more information about products in Bottom Container.
Situation: I Scroll in my List but when I need additional Info about a Product, I press on it and product info is displayed in bottom Container, but whenether I press, the Widget with Query is Reloading causing to wait before I see the list again.
I use setState that cause me the reload, but I dont know how to fix this.
I need to Reload only information in Yellow (amber) Container!!!!
CODE:
Expanded(
child: FutureBuilder<List?>(
future: read(
"SELECT ProductAdress, ProductName, NeedCount, ScanCount FROM ScanRest WHERE ProductStation = '${widget.nrStatie}' AND BoxID = '${cutieScan}' ORDER BY ProductName ASC;"),
builder: (context, snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return const Text('Loading....');
default:
if (snapshot.hasError) {
print("call error");
return Text('Error: ${snapshot.error}');
} else {
print("call success = ${snapshot.data}");
List data = snapshot.data ?? [];
return ListView.builder(
itemCount: data.length,
itemBuilder: (context, index) {
return Card(
elevation: 2,
child: GestureDetector(
onTap: () {
// --------------------problem------------------------
setState(() {
test = (data[index] as Map)['ProductName']
.toString();
denumProdus = (data[index]
as Map)['ProductSeriesDescr']
.toString();
});
},
child: Row(children: [
Expanded(
flex: 2,
child: Text(
(data[index] as Map)['ProductAdress']
.toString()),
),
Expanded(
flex: 5,
child: Text(
(data[index] as Map)['ProductName']
.toString()),
),
Expanded(
flex: 2,
child: Center(
child: Text(
(data[index] as Map)['NeedCount']
.toString()),
),
),
Expanded(
flex: 2,
child: Center(
child: Text(
(data[index] as Map)['ScanCount']
.toString()),
),
),
]),
),
);
});
}
}
}),
),
Visibility(
visible: !vizibil,
child: Container(
color: Colors.amber,
width: double.infinity,
height: 100,
child: Center(
child: Column(
children: [Text('${test}'), Text('${denumProdus}')],
),
),
),
),CodePudding user response：
Calling SetState() causes the whole page to reload, so what you are experiencing is the expected behaviour.
To achieve your goal, you need to look into State Management.
It's a big an complex topic, and requires some time to correctly be understood, but you can't go without it, expecially as your application grows.
CodePudding user response：
That's because calling 'setState' rebuilds the entire 'Build' method. And you have put every thing together.
What you could do is, either
load the data into a list with in,
@override void initState() { super.initState(); // call a method to get data list in here }
and populate ListBuilder using that data.
or, use Provider pattern and put the bottom container within Consumer<>