Update transaction_listtile.dart

added modal bottom sheet on tap with details of the transaction

trackeroo/lib/frontend/utils/transaction_listtile.dart

@@ -9,11 +9,19 @@ class TransactionListtile extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return GestureDetector(
+      onTap: () => showModalBottomSheet<void>(
+        showDragHandle: true,
+        context: context,
+        builder: (BuildContext context) {
+          return buildModalContent(transaction);
+        },
+      ),
+      child: Container(
         padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0),
         margin: const EdgeInsets.only(bottom: 5.0),
         decoration: BoxDecoration(
-        color: Theme.of(context).colorScheme.secondaryContainer.withOpacity(0.3),
+          color: Theme.of(context).colorScheme.secondaryContainer,
           borderRadius: const BorderRadius.all(Radius.circular(8.0))
         ),
         child: Row(
@@ -56,6 +64,109 @@ class TransactionListtile extends StatelessWidget {
             ),
           ],
         ),
+      ),
+    );
+  }
+
+  Widget buildModalContent(Transaction transaction) {
+    return SizedBox(
+      width: double.infinity,
+      child: SafeArea(
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 20.0),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                transaction.title,
+                style: const TextStyle(
+                  fontSize: 18.0,
+                  fontWeight: FontWeight.bold
+                ),
+              ),
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Text(
+                    '${transaction.createdAt.day}.${transaction.createdAt.month}.${transaction.createdAt.year} ',
+                    style: const TextStyle(
+                      fontSize: 15.0
+                    ),
+                  ),
+                  Text(
+                    '${transaction.createdAt.hour}:${transaction.createdAt.minute}',
+                    style: const TextStyle(
+                      fontSize: 15.0
+                    ),
+                  )
+                ],
+              ),
+              const SizedBox(height: 20.0),
+              Text(
+                '${transaction.amount.toString()} €',
+                style: const TextStyle(
+                  fontSize: 40.0,
+                  fontWeight: FontWeight.w300
+                ),
+              ),
+              const SizedBox(height: 20.0),
+              Container(
+                padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 12.0),
+                decoration: BoxDecoration(
+                  color: transaction.category.color,
+                  borderRadius: const BorderRadius.all(Radius.circular(8.0))
+                ),
+                child: Row(
+                  children: [
+                    Icon(transaction.category.icon),
+                    const SizedBox(width: 20.0),
+                    Text(transaction.category.title)
+                  ],
+                ),
+              ),
+              const SizedBox(height: 20.0),
+              const Expanded(child: SizedBox()), // to be removed when more content is added
+              Row(
+                children: [
+                  Expanded(
+                    child: FilledButton.tonal(
+                      onPressed: () => {},
+                      child: const Row(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        children: [
+                          Icon(
+                            Icons.delete_rounded,
+                            size: 16.0,
+                          ),
+                          SizedBox(width: 10.0),
+                          Text('Delete'),
+                        ],
+                      )
+                    ),
+                  ),
+                  const SizedBox(width: 10.0),
+                  Expanded(
+                    child: FilledButton.tonal(
+                      onPressed: () => {},
+                      child: const Row(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        children: [
+                          Icon(
+                            Icons.edit,
+                            size: 16.0,
+                          ),
+                          SizedBox(width: 10.0),
+                          Text('Edit'),
+                        ],
+                      )
+                    ),
+                  )
+                ],
+              )
+            ],
+          ),
+        ),
+      ),
     );
   }
 }