implemented category and date picker

trackeroo/lib/frontend/views/details_view.dart

@@ -2,21 +2,14 @@ import 'package:flutter/material.dart';
 import 'package:fl_chart/fl_chart.dart';
 import 'package:hive_flutter/hive_flutter.dart';
 import 'package:trackeroo/frontend/utils/transaction_listtile.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';
 import 'package:trackeroo/logic/services/transactions_controller.dart';
 
-
 enum Timespan { daily, weekly, monthly, yearly, all }
 
-List<String> items = [
-  'C1',
-  'C2',
-  'C3',
-  'C4'
-];
-String? selectedValue;
-
 class DetailsView extends StatefulWidget {
   const DetailsView({super.key});
 
@@ -25,15 +18,11 @@ 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());
 
   Timespan timespanView = Timespan.monthly;
+  TransactionsController transactionsController = locator.get<TransactionsController>();
 
+  List<String> selectedCategories = [];
 
   @override
   Widget build(BuildContext context) {
@@ -129,14 +118,63 @@ class _DetailsViewState extends State<DetailsView> {
           ),
           const SizedBox(height: 5.0),
           Row(
+            mainAxisAlignment: MainAxisAlignment.end,
             children: [
               IconButton.filledTonal(
                 visualDensity: VisualDensity.compact,
                 onPressed: () => showModalBottomSheet(
                   useSafeArea: true,
                   showDragHandle: true,
+                  isScrollControlled: true,
                   context: context,
-                  builder: (context) => buildCategoriesModal(),
+                  builder: (context) => StatefulBuilder(
+                    builder: (BuildContext context, StateSetter setState) => Container(
+                      height: 650.0,
+                      width: double.infinity,
+                      padding: const EdgeInsets.symmetric(horizontal: 20.0),
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          const Text(
+                            'Choose categories',
+                            style: TextStyle(
+                              fontSize: 16.0,
+                              fontWeight: FontWeight.bold
+                            ),
+                          ),
+                          for(Category category in locator.get<CategoriesController>().categories.values) CheckboxListTile(
+                            title: Row(
+                              mainAxisAlignment: MainAxisAlignment.start,
+                              children: [
+                                Icon(
+                                  IconData(category.iconCodePoint, fontFamily: category.iconFontFamily),
+                                  color: Color(category.colorValue),
+                                  size: 18.0,
+                                ),
+                                const SizedBox(width: 10.0),
+                                Text(
+                                  category.title,
+                                  style: const TextStyle(
+                                    fontSize: 15.0
+                                  ),
+                                ),
+                              ],
+                            ),
+                            value: selectedCategories.contains(category.id),
+                            contentPadding: const EdgeInsets.all(0.0),
+                            dense: true,
+                            onChanged: (value) => setState(() {
+                              if(selectedCategories.contains(category.id)) {
+                                selectedCategories.remove(category.id);
+                              } else {
+                                selectedCategories.add(category.id);
+                              }
+                            })
+                          ),
+                        ]
+                      ),
+                    ),
+                  )
                 ),
                 icon: const Row(
                   children: [
@@ -152,10 +190,36 @@ class _DetailsViewState extends State<DetailsView> {
               const SizedBox(width: 10.0),
               IconButton.filledTonal(
                 visualDensity: VisualDensity.compact,
-                onPressed: () => showModalBottomSheet(
-                  context: context,
-                  builder: (context) => buildTimespanModal(),
-                ),
+                onPressed: () => {
+                  showDateRangePicker(
+                    context: context,
+                    firstDate: transactionsController.transactionsList.isNotEmpty ? transactionsController.transactionsList.first.createdAt : DateTime.now(),
+                    lastDate: transactionsController.transactionsList.isNotEmpty ? transactionsController.transactionsList.last.createdAt : DateTime.now(),
+                    helpText: 'Choose timespan',
+                    saveText: 'Done'
+                  ),
+                },
+                // onPressed: () => showModalBottomSheet(
+                //   useSafeArea: true,
+                //   showDragHandle: true,
+                //   context: context,
+                //   builder: (context) => Container(
+                //     width: double.infinity,
+                //     padding: const EdgeInsets.symmetric(horizontal: 20.0),
+                //     child: const Column(
+                //       crossAxisAlignment: CrossAxisAlignment.start,
+                //       children: [
+                //         Text(
+                //           'Choose categories',
+                //           style: TextStyle(
+                //             fontSize: 16.0,
+                //             fontWeight: FontWeight.bold
+                //           ),
+                //         )
+                //       ],
+                //     ),
+                //   ),
+                // ),
                 icon: const Row(
                   children: [
                     Icon(
@@ -195,34 +259,4 @@ class _DetailsViewState extends State<DetailsView> {
       ),
     );
   }
-
-  Widget buildCategoriesModal() {
-    return buildModalScaffold(
-      [
-        const Text(
-          'Choose categories',
-          style: TextStyle(
-            fontSize: 16.0
-          ),
-        )
-      ]
-    );
-  }
-
-  Widget buildTimespanModal() {
-    return const SizedBox();
-  }
-
-  Widget buildModalScaffold(List<Widget> children) {
-    return SizedBox(
-      width: double.infinity,
-      child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 20.0),
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: children
-        )
-      ),
-    );
-  }
 }