How to keep precedent widgets after setState

Question

I want to create a dynamic listview of cards I create with a title and a content. I'm decoding what I receive from the two textfields of the adding page but then when a card is created, it doesn't work well. For the first card, it works perfectly, but when a second one is created, the two cards are the same. I don't really know how to keep my precedent cards while adding new one. If you have any ideas or tips please tell me. Thank you in advance! Here's my code :

class MyPage extends StatefulWidget {
@override
_MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
static List dreams = [];
static List contentCard = [];
String text;
String title;
@override
Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: kEdgeColor,
  appBar: AppBar(
    backgroundColor: kEdgeColor,
    elevation: 0,
    title: Text('My dreams'),
  ),
  body: Container(
    decoration: BoxDecoration(
        color: Colors.black),
    child: ListView.builder(
        itemCount: dreams.length ,
        itemBuilder: (BuildContext ctxt, int index) {
          return new DreamCard(
            Content: text,
            title: title,
          );
        }
    )
  ),

  bottomNavigationBar: BottomAppBar(
    color: kEdgeColor,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [

        FlatButton(
          onPressed: (){
            Navigator.popAndPushNamed(context, '/public');
          },
          child: Icon(Icons.public),
          color: Colors.black,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
        ),

        FlatButton(
          onPressed: (){
            Navigator.popAndPushNamed(context, '/');
          },
          child: Icon(Icons.bedtime),
          color: Colors.black,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
        ),
      ],
    ),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  floatingActionButton: FloatingActionButton(
    onPressed: () async {
      final result = await Navigator.of(context).push(MaterialPageRoute(builder:      (context){return WritingPage();}));
      if (null != result) {
        dreams.add(result);
        Map<String, dynamic> resultat = jsonDecode(result);

        setState(() {text = resultat['text'];
        title = resultat['title'];});
      }
    },
    child: Icon(Icons.add, size: 30,color: Colors.black,),
    backgroundColor: Colors.white,


  ),
  );
  }
  }

Answer 1

cause you're only update the title and text when press, and your DreamCard has the same title and text, since you'r not reference items in dreams list by index. so your DreamCard in list always look the same.

if (null != result) {
    Map<String, dynamic> resultat = jsonDecode(result);

    // use setState to update your dreams list to trigger UI change
    setState(() {
        dreams.add(resultat);
    });
}

ListView.builder(
    itemCount: dreams.length ,
    itemBuilder: (BuildContext ctxt, int index) {
        // access item from dreams list by index
        return new DreamCard(
            Content: dreams[index]['text'],
            title: dreams[index]['title],
        );
    }
)