transaction listtile draws category from category controller

trackeroo/lib/frontend/utils/transaction_listtile.dart

 import 'package:flutter/material.dart';
+import 'package:trackeroo/logic/models/category.dart';
 import 'package:trackeroo/logic/models/transaction.dart';
+import 'package:trackeroo/logic/services/categories_controller.dart';
+import 'package:trackeroo/logic/services/locator.dart';
 
-class TransactionListtile extends StatelessWidget {
+class TransactionListtile extends StatefulWidget {
   const TransactionListtile({super.key, required this.transaction});
 
   final Transaction transaction;
+
+  @override
+  State<TransactionListtile> createState() => _TransactionListtileState();
+}
+
+class _TransactionListtileState extends State<TransactionListtile> {
+  late Category category;
   final monthsGer = const ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
 
+  @override
+  void initState() {
+    category = locator.get<CategoriesController>().categories[widget.transaction.categoryId];
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
     return GestureDetector(
@@ -14,15 +30,15 @@ class TransactionListtile extends StatelessWidget {
         showDragHandle: true,
         context: context,
         builder: (BuildContext context) {
-          return buildModalContent(transaction);
+          return buildModalContent(widget.transaction);
         },
       ),
       child: Container(
-        padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0),
+        padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
         margin: const EdgeInsets.only(bottom: 5.0),
         decoration: BoxDecoration(
           color: Theme.of(context).colorScheme.secondaryContainer,
-          borderRadius: const BorderRadius.all(Radius.circular(8.0))
+          borderRadius: const BorderRadius.all(Radius.circular(12.0))
         ),
         child: Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -30,36 +46,36 @@ class TransactionListtile extends StatelessWidget {
             Row(
               children: [
                 Container(
-                  width: 30.0,
-                  height: 30.0,
-                  decoration: const BoxDecoration(
-                    borderRadius: BorderRadius.all(Radius.circular(15.0)),
-                    color: Colors.white
+                  width: 50.0,
+                  height: 50.0,
+                  decoration: BoxDecoration(
+                    borderRadius: const BorderRadius.all(Radius.circular(8.0)),
+                    color: Theme.of(context).colorScheme.surface
                   ),
-                  child: Icon(transaction.category.icon),
+                  child: Icon(category.icon),
                 ),
                 const SizedBox(width: 17.0),
                 Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
                     Text(
-                      transaction.title,
+                      widget.transaction.title,
                       style: const TextStyle(
                         fontSize: 18.0,
                         fontWeight: FontWeight.bold
                       ),
                     ),
                     Text(
-                      "${transaction.category.title} · ${transaction.createdAt.day}.${monthsGer[transaction.createdAt.month]} · ${transaction.createdAt.hour < 10 ? 0 : ''}${transaction.createdAt.hour}:${transaction.createdAt.minute < 10 ? 0 : ''}${transaction.createdAt.minute}"
+                      "${category.title} · ${widget.transaction.createdAt.day}.${monthsGer[widget.transaction.createdAt.month]} · ${widget.transaction.createdAt.hour < 10 ? 0 : ''}${widget.transaction.createdAt.hour}:${widget.transaction.createdAt.minute < 10 ? 0 : ''}${widget.transaction.createdAt.minute}"
                     )
                   ],
                 ),
               ],
             ),
             Text(
-              '${transaction.amount.toString()} €',
+              '${widget.transaction.amount.toString()} €',
               style: TextStyle(
-                color: transaction.amount.isNegative ? Colors.red[700] : Colors.green[700]
+                color: widget.transaction.amount.isNegative ? Colors.red[700] : Colors.green[700]
               ),
             ),
           ],
@@ -113,14 +129,14 @@ class TransactionListtile extends StatelessWidget {
               Container(
                 padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 12.0),
                 decoration: BoxDecoration(
-                  color: transaction.category.color,
+                  color: category.color,
                   borderRadius: const BorderRadius.all(Radius.circular(8.0))
                 ),
                 child: Row(
                   children: [
-                    Icon(transaction.category.icon),
+                    Icon(category.icon),
                     const SizedBox(width: 20.0),
-                    Text(transaction.category.title)
+                    Text(category.title)
                   ],
                 ),
               ),