Method setState() is not updating the UI (Flutter) - flutter

Question

My home screen is a Scaffold with a ListView at its body and a floating action button at the bottom. The action button takes the user to a second screen, where he can type a text into a text input and press save. The save button calls a method at the home screen that adds the text to the List variable over which ListView is based. The problem is: the List variable is being updated (I can see on the log), but the setState is not updating the ListView. What am I doing wrong?
Here's the code from the Home Screen:
import 'package:flutter/material.dart';
import 'addCounter.dart';
class Home extends StatefulWidget {
#override
HomeState createState() => HomeState();
}
class HomeState extends State<Home> {
List lista = <Widget>[];
void incrementLista(newItem) {
print('$lista');
setState(() {
lista.add(Box('newItem'));
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('List of Counters'),
backgroundColor: Colors.deepPurple[1000],
),
body: Builder(
builder: (context)=>
Center(
child: ListView(children: lista),
),),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.grey[1000],
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AddCounter(f: incrementLista)));
},
child: Icon(Icons.add, color: Colors.white)),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomNavigationBar(
unselectedItemColor: Colors.grey[700],
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.list),
title: Text('Lista'),
),
BottomNavigationBarItem(
icon: Icon(Icons.insert_chart),
title: Text('Gráfico'),
),
],
selectedItemColor: Colors.blue,
),
);
}
}
And here is the code from the addCounter.dart:
import 'package:flutter/material.dart';
class AddCounter extends StatefulWidget {
final Function f;
AddCounter({#required this.f});
#override
_AddCounterState createState() => _AddCounterState();
}
class _AddCounterState extends State<AddCounter> {
final myController = TextEditingController();
#override
void dispose() {
myController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Add a counter'),
backgroundColor: Colors.blue,
),
body: Column(children: [
Padding(
padding: EdgeInsets.all(15),
child: TextField(
controller: myController,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue, width: 2)),
hintText: 'Type a name for the counter'),
),
),
RaisedButton(
color: Colors.green,
onPressed: () {
widget.f(myController.text);
Navigator.pop(context);
},
child: Text(
'Save',
style: TextStyle(color: Colors.white),
),
)
]));
}
}
I don't think the code for the Box widget is relevant. It is basically a card with a title.

Answer 1

#pskink gave me an answer that worked perfectly. Here it is:
basically you should not use such a list of widgets, data and presentation layers should be separated, instead you should use a list of data only, see https://flutter.dev/docs/cookbook/gestures/dismissible for more info