Details page Line Chart

trackeroo/lib/frontend/views/details_view.dart

 import 'package:flutter/material.dart';
+import 'package:fl_chart/fl_chart.dart';
+import 'package:trackeroo/frontend/utils/transaction_listtile.dart';
+import 'package:trackeroo/frontend/views/onboarding_view.dart';
+import 'package:trackeroo/logic/models/transaction.dart';
+
 
 class DetailsView extends StatefulWidget {
   const DetailsView({super.key});
@@ -8,17 +13,112 @@ class DetailsView extends StatefulWidget {
 }
 
 class _DetailsViewState extends State<DetailsView> {
+  List<Color> gradientColors = [
+   const Color(0xff23b6e6),
+   const Color(0xff02d39a),
+  ];
+  Transaction trn = Transaction(title: "Bus Ticket VVS", amount: -5.32, categoryId: 'food_and_groceries', dueDate: DateTime.now());
+  Transaction trp = Transaction(title: "Gehalt", amount: 1300, categoryId: 'leisure_and_entertainment', dueDate: DateTime.now());
+  
+
   @override
   Widget build(BuildContext context) {
-    return Center(
+    return SingleChildScrollView(
+     /* backgroundColor: Colors.blueGrey[900],*/
+      padding: EdgeInsets.all(16.0),
       child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: <Widget>[
-          Text(
-            'Details Page',
-            style: Theme.of(context).textTheme.headlineMedium,
-          ),
-        ],
+          mainAxisAlignment: MainAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.start,
+            children: <Widget>[
+              Text(
+              'Datails chart',
+              style: TextStyle(
+                fontSize: 14.0,
+                fontWeight: FontWeight.bold
+              ),
+            ),
+          Center(
+            child : SizedBox(
+              width: 400,
+              height: 400,
+              child: LineChart(
+                LineChartData(
+                  borderData: FlBorderData(
+                    show: true,
+                    border: Border.all(width: 0.50, color: const Color(0xff37434d))
+                    
+                  ),
+                  gridData: FlGridData(
+                    show: true,
+                    getDrawingHorizontalLine: (value) {
+                      return FlLine(
+                        color: const Color.fromARGB(255, 163, 177, 189),
+                        strokeWidth: 1
+                      );
+                    },
+                    drawVerticalLine: true,
+                    getDrawingVerticalLine: (value){
+                      return FlLine(
+                        color: const Color.fromARGB(255, 163, 177, 189),
+                        strokeWidth: 1
+                      );
+                    },
+                  ),
+                    titlesData: FlTitlesData(
+                      show: true,
+                      rightTitles: AxisTitles(
+                        sideTitles: SideTitles(showTitles: false),
+                      ),
+                      topTitles: AxisTitles(
+                        sideTitles: SideTitles(showTitles: false)
+                      ),
+                      bottomTitles: AxisTitles(
+                        sideTitles: SideTitles(
+                          showTitles: true,
+                          reservedSize: 30,
+                          interval: 1,
+                        ),
+                      ),
+                      leftTitles: AxisTitles(
+                        sideTitles: SideTitles(
+                          showTitles: true,
+                          interval: 1,
+                          reservedSize: 42,
+                        ),
+                     ),
+                  ),
+                  maxX: 8,
+                  maxY: 8,
+                  minY: 0,
+                  minX: 0,
+                  lineBarsData: [
+                    LineChartBarData(
+                      spots: [
+                        const FlSpot(0, 0),
+                        const FlSpot(5, 5),
+                        const FlSpot(7, 6),
+                        const FlSpot(8, 4),
+                      ],
+                      isCurved: true,
+                      gradient: LinearGradient(
+                        colors: gradientColors
+                      ),
+                      barWidth: 5,
+                      belowBarData: BarAreaData(
+                        show : true,
+                        gradient: LinearGradient(
+                           colors: gradientColors.map((e) => e.withOpacity(0.3)).toList()
+                        ),
+                       
+                      )
+                    )
+                  ]
+                )
+              ),
+            )
+          )
+
+          ],
       ),
     );
   }