Merge pull request #102 from GBergatto/main

Improved collapsible header on Transactions page
RIP-Comm · May 21, 2023 · ba4e177 · ba4e177
2 parents 32b1f09 + 7996f0b
commit ba4e177
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 51 deletions.
diff --git a/lib/pages/transactions_page/transactions_page.dart b/lib/pages/transactions_page/transactions_page.dart
@@ -26,6 +26,17 @@ class _TransactionsPageState extends State<TransactionsPage>
   final double headerMaxHeight = 140.0;
   final double headerMinHeight = 56.0;
 
+  final startDate = ValueNotifier<DateTime>(DateTime(
+    DateTime.now().year,
+    DateTime.now().month,
+    1,
+  )); // last day of the month
+  final endDate = ValueNotifier<DateTime>(DateTime(
+    DateTime.now().year,
+    DateTime.now().month + 1,
+    0,
+  ));
+
   @override
   void initState() {
     super.initState();
@@ -74,6 +85,9 @@ class _TransactionsPageState extends State<TransactionsPage>
                 tabController: _tabController,
                 expandedHeight: headerMaxHeight,
                 minHeight: headerMinHeight,
+                amount: 290.89, // TODO: compute for current date range
+                startDate: startDate,
+                endDate: endDate,
               ),
               pinned: true,
               floating: true,

diff --git a/lib/pages/transactions_page/widgets/custom_sliver_delegate.dart b/lib/pages/transactions_page/widgets/custom_sliver_delegate.dart
@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 
 import '../../../constants/style.dart';
+import '../../../utils/formatted_date_range.dart';
 import 'month_selector.dart';
 
 class CustomSliverDelegate extends SliverPersistentHeaderDelegate {
@@ -13,17 +14,22 @@ class CustomSliverDelegate extends SliverPersistentHeaderDelegate {
     required this.tabController,
     required this.expandedHeight,
     required this.minHeight,
+    required this.startDate,
+    required this.endDate,
+    required this.amount,
   });
 
   final TabController tabController;
   final List<Tab> myTabs;
   final TickerProvider ticker;
 
+  final ValueNotifier<DateTime> startDate;
+  final ValueNotifier<DateTime> endDate;
+
+  final double amount;
   final double minHeight;
   final double expandedHeight;
 
-  final amount = 258.45; // get from backend
-
   // TODO: expand on Tap
 
   @override
@@ -117,7 +123,11 @@ class CustomSliverDelegate extends SliverPersistentHeaderDelegate {
                       ?.copyWith(fontWeight: FontWeight.w400),
                 ),
                 const SizedBox(height: 8),
-                MonthSelector(amount: amount),
+                MonthSelector(
+                  amount: amount,
+                  startDate: startDate,
+                  endDate: endDate,
+                ),
               ],
             ),
           ),
@@ -149,7 +159,7 @@ class CustomSliverDelegate extends SliverPersistentHeaderDelegate {
           ),
         ),
         Text(
-          "Settembre 2022",
+          getFormattedDateRange(startDate.value, endDate.value),
           style: Theme.of(context).textTheme.bodyLarge,
         ),
         Text(

diff --git a/lib/pages/transactions_page/widgets/list_tab.dart b/lib/pages/transactions_page/widgets/list_tab.dart
@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
-import 'package:intl/intl.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+
 import '../../../constants/constants.dart';
 import '../../../constants/style.dart';
 import '../../../constants/functions.dart';
@@ -10,6 +10,7 @@ import '../../../pages/transactions_page/widgets/transaction_list_tile.dart';
 import '../../../providers/accounts_provider.dart';
 import '../../../providers/transactions_provider.dart';
 import '../../../providers/categories_provider.dart';
+import '../../../utils/date_helper.dart';
 
 class ListTab extends ConsumerStatefulWidget {
   const ListTab({
@@ -151,22 +152,3 @@ class DateSeparator extends StatelessWidget {
     );
   }
 }
-
-const String dateFormatter = 'MMMM d, EEEE';
-const String dateYMDFormatter = 'yyyyMMdd';
-
-extension DateHelper on DateTime {
-  String formatDate() {
-    final formatter = DateFormat(dateFormatter);
-    return formatter.format(this);
-  }
-
-  String toYMD() {
-    final formatter = DateFormat(dateYMDFormatter);
-    return formatter.format(this);
-  }
-
-  bool isSameDate(DateTime other) {
-    return year == other.year && month == other.month && day == other.day;
-  }
-}
diff --git a/lib/pages/transactions_page/widgets/month_selector.dart b/lib/pages/transactions_page/widgets/month_selector.dart
@@ -1,40 +1,22 @@
 import 'package:flutter/material.dart';
-import 'package:intl/intl.dart';
 
 import '../../../constants/style.dart';
+import '../../../utils/formatted_date_range.dart';
 
 class MonthSelector extends StatelessWidget {
-  MonthSelector({
+  const MonthSelector({
     required this.amount,
+    required this.startDate,
+    required this.endDate,
     Key? key,
   }) : super(key: key);
 
-  final double amount; // get from backend (Bloc) instead of from parent
+  final double amount;
+  final ValueNotifier<DateTime> startDate;
+  final ValueNotifier<DateTime> endDate;
   final double height = 60;
 
-  final startDate = ValueNotifier<DateTime>(DateTime(
-    DateTime.now().year,
-    DateTime.now().month,
-    1,
-  )); // last day of the month
-  final endDate = ValueNotifier<DateTime>(DateTime(
-    DateTime.now().year,
-    DateTime.now().month + 1,
-    0,
-  )); // last day of the month
-
-  String getFormattedDate() {
-    DateTime lastOfMonth =
-        DateTime(startDate.value.year, startDate.value.month + 1, 0);
-
-    if (startDate.value.day == 1 && endDate.value == lastOfMonth) {
-      return DateFormat('MMMM yyyy').format(startDate.value);
-    } else {
-      final s = DateFormat('dd/MM/yy').format(startDate.value);
-      final e = DateFormat('dd/MM/yy').format(endDate.value);
-      return "$s - $e";
-    }
-  }
+  // last day of the month
 
   @override
   Widget build(BuildContext context) {
@@ -50,6 +32,14 @@ class MonthSelector extends StatelessWidget {
             start: startDate.value,
             end: endDate.value,
           ),
+          builder: (context, child) => Theme(
+            data: Theme.of(context).copyWith(
+              appBarTheme: Theme.of(context)
+                  .appBarTheme
+                  .copyWith(backgroundColor: blue1),
+            ),
+            child: child!,
+          ),
         );
         if (range != null) {
           startDate.value = range.start;
@@ -91,7 +81,7 @@ class MonthSelector extends StatelessWidget {
                   mainAxisAlignment: MainAxisAlignment.spaceAround,
                   children: [
                     Text(
-                      getFormattedDate(),
+                      getFormattedDateRange(startDate.value, endDate.value),
                       style: Theme.of(context).textTheme.titleLarge,
                     ),
                     Text(

diff --git a/lib/utils/date_helper.dart b/lib/utils/date_helper.dart
@@ -0,0 +1,20 @@
+import 'package:intl/intl.dart';
+
+const String dateFormatter = 'MMMM d, EEEE';
+const String dateYMDFormatter = 'yyyyMMdd';
+
+extension DateHelper on DateTime {
+  String formatDate() {
+    final formatter = DateFormat(dateFormatter);
+    return formatter.format(this);
+  }
+
+  String toYMD() {
+    final formatter = DateFormat(dateYMDFormatter);
+    return formatter.format(this);
+  }
+
+  bool isSameDate(DateTime other) {
+    return year == other.year && month == other.month && day == other.day;
+  }
+}
diff --git a/lib/utils/formatted_date_range.dart b/lib/utils/formatted_date_range.dart
@@ -0,0 +1,13 @@
+import 'package:intl/intl.dart';
+
+String getFormattedDateRange(DateTime a, DateTime b) {
+  DateTime lastOfMonth = DateTime(a.year, a.month + 1, 0);
+
+  if (a.day == 1 && b == lastOfMonth) {
+    return DateFormat('MMMM yyyy').format(a);
+  } else {
+    final s = DateFormat('dd/MM/yy').format(a);
+    final e = DateFormat('dd/MM/yy').format(b);
+    return "$s - $e";
+  }
+}