Flutter: states not updated if child widget is list item - list

Question

I have a List of Widgets as children of a Stuck.
When I call the setState the list widgets not update the value.
If I add the same widget in the Stack children as class (not as list item) the state is working.
On the following code there are two widgets in the Stack.
The second widget is a list item. This widgets not updates its value.
Why?
I want to have a Widget list on the Stuck and change the state of its children.
On my app I want to manage the widgets from the list. I don't want to add the widgets on the "children" code of the stuck because the widgets will be added dynamically.
`
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
double _counter = 0;
List<Widget> list = [];
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
if (list.length==0)
list.add( Positioned( // this widget is added as list item
left: 100,
top: 100,
child: Text(
'$_counter', // this not changed after calling setState
style: Theme.of(context).textTheme.headline4,
),
),);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Stack(
children:
[Positioned( // this widget added as not a list item
left: 100,
top: 0,
child: Text(
'$_counter', // this state is changed every time the button is clicked. It is working
style: Theme.of(context).textTheme.headline4,
),
),
list[0]], // this is the same with above widget as list item. The state is not changed
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
`
The output of the code. The second widget can't be updated

Answer 1

if (list.length==0)
this line means don't add new item if list not empty
so the inside text will never change

Answer 2

This is Happening because you have added if (list.length==0) after the _counter is updated the second time the list.length is not zero. Either remove it or use some other method

Answer 3

The exact error here is that in line
List<Widget> list = [];
here you declare the variable which never redeclares on-call or setState
when the build method runs for the first time the list is empty i.e. it's length == 0
this adds a positioned widget item in the list the value until here for _counter variable is 0 hence the list contains the widget _counter value set to 0 and the list length is 1 now.
Now when setState is called what happens is that the build method runs and it does this check
if (list.length==0){
list.add(
Positioned(
left: 100,
top: 100,
child: Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
)
);
}
//which apparently fails as the list length is 1 due to the addition of positioned widget on the first call of build method.
thought you have updated the _counter variable this doesn't affect the 0th index element in the list as there is no such statement to update the list item.
if you really want to update the 0th list element in the list then add just this line at the top of your build method
//should look like this
Widget build(BuildContext context) {
list = [];
if (list.length==0)
list.add( Positioned( // this widget is added as list item
left: 100,
top: 100,
child: Text(
'$_counter', // this not changed after calling setState
style: Theme.of(context).textTheme.headline4,
),
),);
return Scaffold(....
doing so will get you both the outputs in the image added to be the same are with the latest _counter value