Merge pull request #155 from enrique-lozano/fix/mouse-cursor

Set mouse to click mode when required

lib/app/accounts/account_form.dart

@@ -17,8 +17,9 @@ import 'package:monekin/core/models/supported-icon/icon_displayer.dart';
 import 'package:monekin/core/models/supported-icon/supported_icon.dart';
 import 'package:monekin/core/presentation/widgets/color_picker/color_picker.dart';
 import 'package:monekin/core/presentation/widgets/currency_selector_modal.dart';
-import 'package:monekin/core/presentation/widgets/date_form_field/date_form_field.dart';
 import 'package:monekin/core/presentation/widgets/expansion_panel/single_expansion_panel.dart';
+import 'package:monekin/core/presentation/widgets/form_fields/date_form_field.dart';
+import 'package:monekin/core/presentation/widgets/form_fields/read_only_form_field.dart';
 import 'package:monekin/core/presentation/widgets/inline_info_card.dart';
 import 'package:monekin/core/presentation/widgets/persistent_footer_button.dart';
 import 'package:monekin/core/presentation/widgets/transaction_filter/transaction_filters.dart';
@@ -289,12 +290,10 @@ class _AccountFormPageState extends State<AccountFormPage> {
                   textInputAction: TextInputAction.next,
                 ),
                 const SizedBox(height: 16),
-                TextField(
-                    controller: TextEditingController(
-                        text: _currency != null
-                            ? _currency?.name
-                            : t.general.unspecified),
-                    readOnly: true,
+                ReadOnlyTextFormField(
+                    displayValue: _currency != null
+                        ? _currency!.name
+                        : t.general.unspecified,
                     onTap: () {
                       if (_currency == null) return;
 

lib/app/accounts/details/account_details.dart

@@ -13,7 +13,7 @@ import 'package:monekin/core/models/transaction/transaction_status.enum.dart';
 import 'package:monekin/core/presentation/app_colors.dart';
 import 'package:monekin/core/presentation/widgets/bottomSheetFooter.dart';
 import 'package:monekin/core/presentation/widgets/card_with_header.dart';
-import 'package:monekin/core/presentation/widgets/date_form_field/date_form_field.dart';
+import 'package:monekin/core/presentation/widgets/form_fields/date_form_field.dart';
 import 'package:monekin/core/presentation/widgets/inline_info_card.dart';
 import 'package:monekin/core/presentation/widgets/modal_container.dart';
 import 'package:monekin/core/presentation/widgets/monekin_quick_actions_buttons.dart';

lib/app/budgets/budget_form_page.dart

@@ -9,8 +9,8 @@ import 'package:monekin/core/database/services/currency/currency_service.dart';
 import 'package:monekin/core/models/budget/budget.dart';
 import 'package:monekin/core/models/category/category.dart';
 import 'package:monekin/core/models/date-utils/periodicity.dart';
-import 'package:monekin/core/presentation/widgets/date_form_field/date_field.dart';
-import 'package:monekin/core/presentation/widgets/date_form_field/date_form_field.dart';
+import 'package:monekin/core/presentation/widgets/form_fields/date_field.dart';
+import 'package:monekin/core/presentation/widgets/form_fields/date_form_field.dart';
 import 'package:monekin/core/presentation/widgets/icon_displayer_widgets.dart';
 import 'package:monekin/core/utils/text_field_utils.dart';
 import 'package:monekin/core/utils/uuid.dart';
@@ -48,28 +48,6 @@ class _BudgetFormPageState extends State<BudgetFormPage> {
   DateTime startDate = DateTime.now();
   DateTime? endDate;
 
-  Widget selector({
-    required String title,
-    required String? inputValue,
-    required Function onClick,
-  }) {
-    return TextFormField(
-        controller: TextEditingController(text: inputValue ?? ''),
-        readOnly: true,
-        onTap: () => onClick(),
-        validator: (value) {
-          if (inputValue == null) {
-            return 'Please, specify at least one item here';
-          }
-
-          return null;
-        },
-        decoration: InputDecoration(
-          labelText: title,
-          suffixIcon: const Icon(Icons.arrow_drop_down),
-        ));
-  }
-
   submitForm() {
     final t = Translations.of(context);
 

lib/app/categories/form/icon_and_color_selector.dart

@@ -58,6 +58,7 @@ class IconAndColorSelector extends StatelessWidget {
                   },
                   bgColor: AppColors.of(context).inputFill,
                   child: ListTile(
+                    mouseCursor: SystemMouseCursors.click,
                     title: Text(t.icon_selector.icon),
                     trailing:
                         const Icon(Icons.arrow_forward_ios_rounded, size: 12),
@@ -78,6 +79,7 @@ class IconAndColorSelector extends StatelessWidget {
                   }),
                   bgColor: AppColors.of(context).inputFill,
                   child: ListTile(
+                    mouseCursor: SystemMouseCursors.click,
                     title: Text(t.icon_selector.color),
                     trailing: Icon(
                       Icons.circle,

lib/app/currencies/exchange_rate_form.dart

@@ -3,14 +3,16 @@ import 'package:flutter_svg/flutter_svg.dart';
 import 'package:intl/intl.dart';
 import 'package:monekin/core/database/services/currency/currency_service.dart';
 import 'package:monekin/core/database/services/exchange-rate/exchange_rate_service.dart';
+import 'package:monekin/core/extensions/color.extensions.dart';
 import 'package:monekin/core/models/currency/currency.dart';
 import 'package:monekin/core/models/exchange-rate/exchange_rate.dart';
+import 'package:monekin/core/presentation/app_colors.dart';
 import 'package:monekin/core/presentation/widgets/bottomSheetFooter.dart';
 import 'package:monekin/core/presentation/widgets/currency_selector_modal.dart';
-import 'package:monekin/core/presentation/widgets/date_form_field/date_field.dart';
-import 'package:monekin/core/presentation/widgets/date_form_field/date_form_field.dart';
+import 'package:monekin/core/presentation/widgets/form_fields/date_field.dart';
+import 'package:monekin/core/presentation/widgets/form_fields/date_form_field.dart';
 import 'package:monekin/core/presentation/widgets/modal_container.dart';
-import 'package:monekin/core/presentation/widgets/skeleton.dart';
+import 'package:monekin/core/utils/constants.dart';
 import 'package:monekin/core/utils/text_field_utils.dart';
 import 'package:monekin/core/utils/uuid.dart';
 import 'package:monekin/i18n/translations.g.dart';
@@ -116,48 +118,58 @@ class _ExchangeRateFormDialogState extends State<ExchangeRateFormDialog> {
             mainAxisSize: MainAxisSize.min,
             children: [
               TextFormField(
-                  controller: TextEditingController(
-                      text: _currency != null
-                          ? _currency?.name
-                          : t.general.unspecified),
-                  readOnly: true,
-                  validator: (value) {
-                    if (_currency == null) {
-                      return t.currencies.form.specify_a_currency;
-                    } else if (_currency!.code == userPreferredCurrency?.code) {
-                      return t.currencies.form.equal_to_preferred_warn;
-                    }
-
-                    return null;
-                  },
-                  onTap: () {
-                    showCurrencySelectorModal(
-                        context,
-                        CurrencySelectorModal(
-                            preselectedCurrency: _currency,
-                            onCurrencySelected: (newCurrency) => {
-                                  setState(() {
-                                    _currency = newCurrency;
-                                  })
-                                }));
-                  },
-                  decoration: InputDecoration(
-                      labelText: t.currencies.currency,
-                      suffixIcon: const Icon(Icons.arrow_drop_down),
-                      prefixIcon: Container(
-                        margin: const EdgeInsets.all(10),
-                        clipBehavior: Clip.hardEdge,
-                        decoration: BoxDecoration(
-                          borderRadius: BorderRadius.circular(100),
+                controller: TextEditingController(
+                    text: _currency != null
+                        ? _currency?.name
+                        : t.general.unspecified),
+                readOnly: true,
+                mouseCursor: SystemMouseCursors.click,
+                validator: (value) {
+                  if (_currency == null) {
+                    return t.currencies.form.specify_a_currency;
+                  } else if (_currency!.code == userPreferredCurrency?.code) {
+                    return t.currencies.form.equal_to_preferred_warn;
+                  }
+
+                  return null;
+                },
+                onTap: () {
+                  showCurrencySelectorModal(
+                      context,
+                      CurrencySelectorModal(
+                          preselectedCurrency: _currency,
+                          onCurrencySelected: (newCurrency) => {
+                                setState(() {
+                                  _currency = newCurrency;
+                                })
+                              }));
+                },
+                decoration: InputDecoration(
+                  labelText: t.currencies.currency,
+                  suffixIcon: const Icon(Icons.arrow_drop_down),
+                  prefixIcon: _currency != null
+                      ? Container(
+                          margin: const EdgeInsets.all(10),
+                          clipBehavior: Clip.hardEdge,
+                          decoration: BoxDecoration(
+                            borderRadius: BorderRadius.circular(999),
+                          ),
+                          child: SvgPicture.asset(
+                            'assets/icons/currency_flags/${_currency!.code.toLowerCase()}.svg',
+                            height: 25,
+                            width: 25,
+                          ),
+                        )
+                      : Container(
+                          margin: const EdgeInsets.all(10),
+                          child: Icon(
+                            Icons.circle,
+                            size: 25,
+                            color: AppColors.of(context).inputFill.darken(0.2),
+                          ),
                         ),
-                        child: _currency != null
-                            ? SvgPicture.asset(
-                                'assets/icons/currency_flags/${_currency!.code.toLowerCase()}.svg',
-                                height: 25,
-                                width: 25,
-                              )
-                            : const Skeleton(width: 28, height: 28),
-                      ))),
+                ),
+              ),
               const SizedBox(height: 22),
               Row(
                 crossAxisAlignment: CrossAxisAlignment.start,
@@ -169,7 +181,9 @@ class _ExchangeRateFormDialogState extends State<ExchangeRateFormDialog> {
                       ),
                       mode: DateTimeFieldPickerMode.date,
                       initialDate: date,
-                      dateFormat: DateFormat.yMMMd(),
+                      dateFormat: date.year == currentYear
+                          ? DateFormat.MMMMd()
+                          : DateFormat.yMMMd(),
                       validator: (e) =>
                           e == null ? t.general.validations.required : null,
                       onDateSelected: (DateTime value) {
@@ -179,7 +193,7 @@ class _ExchangeRateFormDialogState extends State<ExchangeRateFormDialog> {
                       },
                     ),
                   ),
-                  const SizedBox(width: 16),
+                  const SizedBox(width: 8),
                   Expanded(
                       child: TextFormField(
                     controller: rateController,

lib/app/tags/tag_form_page.dart

@@ -8,6 +8,7 @@ import 'package:monekin/core/models/tags/tag.dart';
 import 'package:monekin/core/presentation/widgets/color_picker/color_picker.dart';
 import 'package:monekin/core/presentation/widgets/color_picker/color_picker_modal.dart';
 import 'package:monekin/core/presentation/widgets/confirm_dialog.dart';
+import 'package:monekin/core/presentation/widgets/form_fields/read_only_form_field.dart';
 import 'package:monekin/core/presentation/widgets/persistent_footer_button.dart';
 import 'package:monekin/core/utils/constants.dart';
 import 'package:monekin/core/utils/text_field_utils.dart';
@@ -170,14 +171,13 @@ class _TagFormPageState extends State<TagFormPage> {
                     ],
                   ),
                   const SizedBox(height: 16),
-                  TextFormField(
-                    readOnly: true,
+                  ReadOnlyTextFormField(
+                    displayValue: null,
                     decoration: InputDecoration(
                       hintText: t.icon_selector.color,
-                      suffixIcon: Icon(Icons.circle),
+                      suffixIcon: const Icon(Icons.circle),
                       suffixIconColor: ColorHex.get(_color),
                     ),
-                    textInputAction: TextInputAction.next,
                     onTap: () => showColorPickerModal(
                       context,
                       ColorPickerModal(

lib/app/transactions/form/transaction_form.page.dart

@@ -18,8 +18,9 @@ import 'package:monekin/core/models/transaction/transaction.dart';
 import 'package:monekin/core/models/transaction/transaction_status.enum.dart';
 import 'package:monekin/core/presentation/animations/shake/shake_widget.dart';
 import 'package:monekin/core/presentation/responsive/breakpoint_container.dart';
-import 'package:monekin/core/presentation/widgets/date_form_field/date_form_field.dart';
 import 'package:monekin/core/presentation/widgets/expansion_panel/single_expansion_panel.dart';
+import 'package:monekin/core/presentation/widgets/form_fields/date_form_field.dart';
+import 'package:monekin/core/presentation/widgets/form_fields/read_only_form_field.dart';
 import 'package:monekin/core/presentation/widgets/inline_info_card.dart';
 import 'package:monekin/core/presentation/widgets/number_ui_formatters/currency_displayer.dart';
 import 'package:monekin/core/presentation/widgets/persistent_footer_button.dart';
@@ -338,10 +339,8 @@ class _TransactionFormPageState extends State<TransactionFormPage> {
     return [
       Padding(
         padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 16),
-        child: TextField(
-          controller:
-              TextEditingController(text: recurrentRule.formText(context)),
-          readOnly: true,
+        child: ReadOnlyTextFormField(
+          displayValue: recurrentRule.formText(context),
           onTap: () {
             showIntervalSelectoHelpDialog(context,
                 selectedRecurrentRule: recurrentRule,

lib/app/transactions/form/widgets/interval_selector.dart

@@ -4,8 +4,8 @@ import 'package:intl/intl.dart';
 import 'package:monekin/core/models/date-utils/periodicity.dart';
 import 'package:monekin/core/models/transaction/recurrency_data.dart';
 import 'package:monekin/core/models/transaction/rule_recurrent_limit.dart';
-import 'package:monekin/core/presentation/widgets/date_form_field/date_field.dart';
-import 'package:monekin/core/presentation/widgets/date_form_field/date_form_field.dart';
+import 'package:monekin/core/presentation/widgets/form_fields/date_field.dart';
+import 'package:monekin/core/presentation/widgets/form_fields/date_form_field.dart';
 import 'package:monekin/core/presentation/widgets/persistent_footer_button.dart';
 import 'package:monekin/core/utils/text_field_utils.dart';
 import 'package:monekin/i18n/translations.g.dart';

lib/core/presentation/widgets/dates/date_period_modal.dart

@@ -6,6 +6,7 @@ import 'package:monekin/core/models/date-utils/period_type.dart';
 import 'package:monekin/core/models/date-utils/periodicity.dart';
 import 'package:monekin/core/presentation/widgets/bottomSheetFooter.dart';
 import 'package:monekin/core/presentation/widgets/dates/outlinedButtonStacked.dart';
+import 'package:monekin/core/presentation/widgets/form_fields/read_only_form_field.dart';
 import 'package:monekin/core/presentation/widgets/modal_container.dart';
 import 'package:monekin/core/utils/date_time_picker.dart';
 import 'package:monekin/core/utils/text_field_utils.dart';
@@ -210,12 +211,10 @@ class _DatePeriodModalState extends State<DatePeriodModal> {
         Expanded(
           child: Padding(
             padding: const EdgeInsets.symmetric(horizontal: 16),
-            child: TextFormField(
-              controller: TextEditingController(
-                  text: dateToSelect != null
-                      ? DateFormat.yMMMMd().format(dateToSelect)
-                      : ''),
-              readOnly: true,
+            child: ReadOnlyTextFormField(
+              displayValue: dateToSelect != null
+                  ? DateFormat.yMMMMd().format(dateToSelect)
+                  : '',
               textAlign: TextAlign.center,
               decoration: InputDecoration(
                 border: const UnderlineInputBorder(),

lib/core/presentation/widgets/date_form_field/date_field.dart → lib/core/presentation/widgets/form_fields/date_field.dart

@@ -35,7 +35,7 @@ typedef DateTimeFieldCreator = DateTimeField Function({
 class DateTimeField extends StatelessWidget {
   // Note: This should match the definition of the [DateTimeFieldCreator]
   DateTimeField({
-    Key? key,
+    super.key,
     required this.onDateSelected,
     required this.selectedDate,
     this.initialDatePickerMode = DatePickerMode.day,
@@ -52,11 +52,10 @@ class DateTimeField extends StatelessWidget {
     this.initialTimePickerEntryMode = TimePickerEntryMode.dial,
   })  : dateFormat = dateFormat ?? getDateFormatFromDateFieldPickerMode(mode),
         firstDate = firstDate ?? kDefaultFirstSelectableDate,
-        lastDate = lastDate ?? kDefaultLastSelectableDate,
-        super(key: key);
+        lastDate = lastDate ?? kDefaultLastSelectableDate;
 
   DateTimeField.time({
-    Key? key,
+    super.key,
     this.onDateSelected,
     this.selectedDate,
     this.decoration,
@@ -72,8 +71,7 @@ class DateTimeField extends StatelessWidget {
         mode = DateTimeFieldPickerMode.time,
         dateFormat = DateFormat.jm(),
         firstDate = firstDate ?? DateTime(2000),
-        lastDate = lastDate ?? DateTime(2001),
-        super(key: key);
+        lastDate = lastDate ?? DateTime(2001);
 
   /// Callback for whenever the user selects a [DateTime]
   final ValueChanged<DateTime>? onDateSelected;
@@ -192,6 +190,7 @@ class DateTimeField extends StatelessWidget {
           hintText: '-- ${t.general.unspecified.toLowerCase()} --'),
       style: dateTextStyle,
       readOnly: true,
+      mouseCursor: SystemMouseCursors.click,
       enabled: enabled,
       onTap: enabled! ? () => _selectDate(context) : null,
     );

lib/core/presentation/widgets/date_form_field/date_form_field.dart → lib/core/presentation/widgets/form_fields/date_form_field.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
-import 'package:monekin/core/presentation/widgets/date_form_field/date_field.dart';
+import 'package:monekin/core/presentation/widgets/form_fields/date_field.dart';
 
 /// A [FormField] that contains a [DateTimeField].
 ///
@@ -13,12 +13,12 @@ import 'package:monekin/core/presentation/widgets/date_form_field/date_field.dar
 /// save or reset the form field.
 class DateTimeFormField extends FormField<DateTime> {
   DateTimeFormField({
-    Key? key,
-    FormFieldSetter<DateTime>? onSaved,
-    FormFieldValidator<DateTime>? validator,
+    super.key,
+    super.onSaved,
+    super.validator,
     DateTime? initialValue,
-    AutovalidateMode? autovalidateMode,
-    bool enabled = true,
+    super.autovalidateMode,
+    super.enabled,
     bool use24hFormat = false,
     TextStyle? dateTextStyle,
     DateFormat? dateFormat,
@@ -33,12 +33,7 @@ class DateTimeFormField extends FormField<DateTime> {
     TimePickerEntryMode initialTimePickerEntryMode = TimePickerEntryMode.dial,
     DateTimeFieldCreator fieldCreator = DateTimeField.new,
   }) : super(
-          key: key,
           initialValue: initialValue ?? initialDate,
-          onSaved: onSaved,
-          validator: validator,
-          autovalidateMode: autovalidateMode,
-          enabled: enabled,
           builder: (FormFieldState<DateTime> field) {
             // Theme defaults are applied inside the _InputDropdown widget
             final InputDecoration _decorationWithThemeDefaults =