title: How to show an Array Element for Widget on Flutter
body: <p>I have an array that looks like this</p>
  <pre><code>final thisCategory = [
      {
        'category': 'Social Life',
        'data': [
          {'amount': 2000, 'content': 'thanks', 'date': DateTime.now()}
        ]
      },
      {
        'category': 'Food',
        'data': [
          {'amount': 2000, 'content': 'thanks','date': DateTime.now()},
          {'amount': 2000, 'content': 'thanks','date': DateTime.now()}
        ]
      }
    ];
  </code></pre>
  <p>and this is how my app looks</p>
  <p><a href="https://i.stack.imgur.com/c4BUg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c4BUg.png" alt="enter image description here" /></a></p>
  <p>my widget look like this</p>
  <pre><code>Expanded(
                  child: Container(
                    child: ListView.builder(
                      itemBuilder: (context, index) =&gt; TransactitonTile(
                        category: thisCategory[index]['category'],
                        amount: amountCategory[index]['amount'].toString(),
                        onTap: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) =&gt; Scaffold(
                                body: SafeArea(
                                  child: Column(
                                    children: [
                                      Text(thisCategory[index]['category']),
                                      Expanded(
                                        child: Container(
                                          child: ListView.builder(
                                            itemBuilder: (context, index) =&gt;
                                                ListTile(
                                              leading: //this is where i want to show 'date' element,
                                              trailing: //this is where i want to show 'amount' element,
                                              title: //this is where i want to show 'content' element,
                                            ),
                                          ),
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              ),
                            ),
                          );
                        },
                      ),
                      itemCount: thisCategory.length,
                    ),
                  ),
                )
  </code></pre>
  <p>so when the user presses on one of the 'category' like I showed above, then the user will go to the next page which will display what 'content' is in that 'category'. I've tried to display the 'content', but all the 'content' from all the 'category' also appear in the next page. how to fix this?</p>