Unable to use setState

Question

in my project im using a ButtomNavigationBar to switch between two pages. The code of the switch is a standard one, using the index and setState to switch around both pages, and using an array of Widget to acces each page.

(Taken from the Scaffold)

final List<Widget> body = [ firstPage(), secondPage(), ];

body: body[_currentIndex],

and in my secondPage() i want to make a ListView.Builder with FAB that adds a tile with each tap. To my understing i need to use setState to update the ItemCounter but this is not the right inhertince what did i do wrong and how do i correct it?

Widget secondPage(){
  int _itemCount = 5;
  return Scaffold(
    body: ListView.builder(
      itemCount: _itemCount,
      itemBuilder: (context, int index){
        return Padding(
          padding: EdgeInsets.all(3.0),
          child: Card(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(index.toString(), style: TextStyle(fontSize: 30.0),
              textAlign: TextAlign.center,),
            ),
          ) ,
        );
      },
    ),
    floatingActionButton: FloatingActionButton(
      onPressed:(){}, //**setState need to be here**
    child: Icon(Icons.add),),
  );
}

enter image description here

Answer 1

make the _itemCount variable to global variable and then use setState to increment the _itemCount value

int _itemCount = 5;
Widget build(BuildContext context) {
return Scaffold(
  body: ListView.builder(
    .....
  ),
  floatingActionButton: FloatingActionButton(
    onPressed:(){
      setState(() {
        _itemCount++;
      });
    },
    child: Icon(Icons.add),),
);;

}

Answer 2

You are using a stateless Widget. Your secondpage() should be a stateful Widget. The easiest way to solve this is to use a class instead of a function:

class SecondPage extends StatefulWidget {
  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
 int _itemCount = 5;
  return Scaffold(
    body: ListView.builder(
      itemCount: _itemCount,
      itemBuilder: (context, int index){
        return Padding(
          padding: EdgeInsets.all(3.0),
          child: Card(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(index.toString(), style: TextStyle(fontSize: 30.0),
              textAlign: TextAlign.center,),
            ),
          ) ,
        );
      },
    ),
    floatingActionButton: FloatingActionButton(
      onPressed:(){
        setState((){
            _itemCount++;
        });
      },
    child: Icon(Icons.add),
    ),
  );
}

and in the List:

final List<Widget> body = [ new firstPage(), new secondPage(), ];

Answer 3

Solved it. just needed to replace the Widget function with a StafulWidget.