Abschnitt 5

lib/widgets/chart/chart.dart

@@ -0,0 +1,96 @@
+
+import 'package:flutter/material.dart';
+
+import 'package:expense_tracker/widgets/chart/chart_bar.dart';
+import 'package:expense_tracker/models/expense.dart';
+
+class Chart extends StatelessWidget {
+  const Chart({super.key, required this.expenses});
+
+  final List<Expense> expenses;
+
+  List<ExpenseBucket> get buckets {
+    return [
+      ExpenseBucket.forCategory(expenses, Category.food),
+      ExpenseBucket.forCategory(expenses, Category.leisure),
+      ExpenseBucket.forCategory(expenses, Category.travel),
+      ExpenseBucket.forCategory(expenses, Category.work),
+    ];
+  }
+
+  double get maxTotalExpense {
+    double maxTotalExpense = 0;
+
+    for (final bucket in buckets) {
+      if (bucket.totalExpenses > maxTotalExpense) {
+        maxTotalExpense = bucket.totalExpenses;
+      }
+    }
+
+    return maxTotalExpense;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final isDarkMode =
+        MediaQuery.of(context).platformBrightness == Brightness.dark;
+    return Container(
+      margin: const EdgeInsets.all(16),
+      padding: const EdgeInsets.symmetric(
+        vertical: 16,
+        horizontal: 8,
+      ),
+      width: double.infinity,
+      height: 180,
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(8),
+        gradient: LinearGradient(
+          colors: [
+            Theme.of(context).colorScheme.primary.withOpacity(0.3),
+            Theme.of(context).colorScheme.primary.withOpacity(0.0)
+          ],
+          begin: Alignment.bottomCenter,
+          end: Alignment.topCenter,
+        ),
+      ),
+      child: Column(
+        children: [
+          Expanded(
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.end,
+              children: [
+                for (final bucket in buckets) // alternative to map()
+                  ChartBar(
+                    fill: bucket.totalExpenses == 0
+                        ? 0
+                        : bucket.totalExpenses / maxTotalExpense,
+                  )
+              ],
+            ),
+          ),
+          const SizedBox(height: 12),
+          Row(
+            children: buckets
+                .map(
+                  (bucket) => Expanded(
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 4),
+                  child: Icon(
+                    categoryIcons[bucket.category],
+                    color: isDarkMode
+                        ? Theme.of(context).colorScheme.secondary
+                        : Theme.of(context)
+                        .colorScheme
+                        .primary
+                        .withOpacity(0.7),
+                  ),
+                ),
+              ),
+            )
+                .toList(),
+          )
+        ],
+      ),
+    );
+  }
+}

lib/widgets/chart/chart_bar.dart

@@ -0,0 +1,35 @@
+
+import 'package:flutter/material.dart';
+
+class ChartBar extends StatelessWidget {
+  const ChartBar({
+    super.key,
+    required this.fill,
+  });
+
+  final double fill;
+
+  @override
+  Widget build(BuildContext context) {
+    final isDarkMode =
+        MediaQuery.of(context).platformBrightness == Brightness.dark;
+    return Expanded(
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 4),
+        child: FractionallySizedBox(
+          heightFactor: fill,
+          child: DecoratedBox(
+            decoration: BoxDecoration(
+              shape: BoxShape.rectangle,
+              borderRadius:
+              const BorderRadius.vertical(top: Radius.circular(8)),
+              color: isDarkMode
+                  ? Theme.of(context).colorScheme.secondary
+                  : Theme.of(context).colorScheme.primary.withOpacity(0.65),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}