Why the app is not rebuilding when I call setState? - flutter

Question

I am developing an app with Flutter and I struggle with a problem: when I call the setState() method, the list I want to update does not update at all. I mean, it does not redrawing the widgets.
First of all, I have my list of custom widget, which is initialized with one element:
List<AdvFctPompa> _advFctPompaList = [AdvFctPompa(name: 'Bloc initial', temp: '4748425', imgPath: img2)];
My custom widget looks like this:
import 'package:flutter/material.dart';
class AdvFctPompa extends StatefulWidget {
final String imgPath;
final String name;
final String temp;
BoxConstraints constraint;
AdvFctPompa({
Key key,
this.imgPath,
#required this.name,
#required this.temp,
this.constraint,
}) : super(key: key);
#override
_AdvFctPompaState createState() => _AdvFctPompaState();
}
class _AdvFctPompaState extends State<AdvFctPompa> {
#override
Widget build(BuildContext context) {
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: Column(
children: <Widget>[
Container(
height: widget.constraint.maxHeight * .6,
width: widget.constraint.maxWidth * .7,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
),
image: DecorationImage(
image: NetworkImage(widget.imgPath),
fit: BoxFit.cover,
),
),
),
SizedBox(height: 5),
Expanded(
child: Container(
height: widget.constraint.maxHeight,
width: widget.constraint.maxWidth * .7,
padding: const EdgeInsets.only(left: 5, right: 5),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
widget.name,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w500,
),
),
Text(
widget.temp + "ºC",
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 15,
color: Colors.grey,
),
),
],
),
),
SizedBox(height: 5),
Container(
height: 30,
width: 100,
decoration: BoxDecoration(
image: DecorationImage(
image: ExactAssetImage('assets/images/img6.png'),
fit: BoxFit.cover,
),
),
)
],
),
),
)
],
),
);
}
}
Second, I have a button for adding a new element in list:
GestureDetector(
child: Visibility(
visible: _heightAnimation.value > 90,
child: Icon(
Icons.add_to_queue,
color: Colors.white,
size: _iconSizeAnimation.value,
),
),
onTap: _addAdvFct,
)
And here is my method:
void _addAdvFct() {
print(_advFctPompaList.length);
_advFctPompaList.add(
AdvFctPompa(
name: 'Bloc initial',
temp: '4748425',
imgPath: img2,
constraint: constraints,
),
);
setState(() {});
}
I also tried:
void _addAdvFct() {
print(_advFctPompaList.length);
setState(() {
_advFctPompaList.add(
AdvFctPompa(
name: 'Bloc initial',
temp: '4748425',
imgPath: img2,
constraint: constraints,
),
);
});
}
And the way I want to draw my list is through a LayoutBuider:
Expanded(
child: LayoutBuilder(builder: (_, constraint) {
_initConstrains(constraint);
return ListView(
padding: const EdgeInsets.only(right: 20),
scrollDirection: Axis.horizontal,
children: _advFctPompaList,
);
}),
),
The thing is that when I press the button it show me in console that the number of list elements is increasing, but nothing is changing on the screen.
Am I missing something?

Answer 1

Try
void _addAdvFct() {
print(_advFctPompaList.length);
_advFctPompaList.add(
AdvFctPompa(
name: 'Bloc initial',
temp: '4748425',
imgPath: img2,
constraint: constraints,
),
);
setState(() {
_advFctPompaList;
});
}