@marcos_feitoza/personal-finance-frontend-core-ui 1.0.0

package/lib/widgets/app_widgets.dart

@@ -0,0 +1,405 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+// import 'package:flutter_multi_formatter/flutter_multi_formatter.dart'; // Removed to resolve name conflict.
+import 'package:personal_finance_frontend_core_ui/utils/currency_input_formatter.dart';
+
+///* Modern Theme Constants *///
+const double _borderRadius = 16.0;
+const double _fontSize = 16.0;
+final Color _filterBackgroundColor = Colors.transparent;
+final Color _buttonBackgroundColor = Colors.blueGrey;
+final Color _textFieldBackground = Colors.transparent;
+const double _formCardPadding = 20.0;
+const double _formTitleBottomSpacing = 20.0;
+const double _formCardElevation = 3.0;
+const double _formCardBorderWidth = 1.0;
+const double _formCardShadowOpacity = 0.2; // Alpha 51
+const double _formCardBorderOpacity = 0.3; // Alpha 77
+
+//* Filter Buttons (Move Money Report) *//
+class FilterButton extends StatelessWidget {
+  final String label;
+  final String value;
+  final VoidCallback onPressed;
+
+  const FilterButton({
+    super.key,
+    required this.label,
+    required this.value,
+    required this.onPressed,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return OutlinedButton(
+      style: OutlinedButton.styleFrom(
+        side: BorderSide(color: theme.colorScheme.outline, width: 1.5),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(_borderRadius),
+        ),
+        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+        foregroundColor: theme.colorScheme.onSurface,
+        backgroundColor: _filterBackgroundColor,
+        textStyle: const TextStyle(fontWeight: FontWeight.bold),
+      ),
+      onPressed: onPressed,
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Flexible(
+            flex: 1,
+            child: Text(
+              label,
+              textAlign: TextAlign.center,
+              style: TextStyle(
+                color: theme.colorScheme.onSurface,
+                fontWeight: FontWeight.bold,
+                fontSize: _fontSize,
+              ),
+            ),
+          ),
+          const SizedBox(width: 8),
+          Flexible(
+            flex: 1,
+            child: Text(
+              value,
+              overflow: TextOverflow.ellipsis,
+              textAlign: TextAlign.center,
+              style: TextStyle(color: theme.colorScheme.onSurface),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class PrimaryButton extends StatelessWidget {
+  final String text;
+  final VoidCallback onPressed;
+
+  const PrimaryButton({super.key, required this.text, required this.onPressed});
+
+  @override
+  Widget build(BuildContext context) {
+    return ElevatedButton(
+      onPressed: onPressed,
+      child: Text(text),
+    );
+  }
+}
+
+class SecondaryButton extends StatelessWidget {
+  final String text;
+  final VoidCallback onPressed;
+
+  const SecondaryButton(
+      {super.key, required this.text, required this.onPressed});
+
+  @override
+  Widget build(BuildContext context) {
+    return TextButton(
+      onPressed: onPressed,
+      child: Text(text),
+    );
+  }
+}
+
+///* Dropdowns Gerencia uma lista de itens (PaymentMethod)*///
+class AppDropdown<T> extends StatelessWidget {
+  final T? value;
+  final List<DropdownMenuItem<T>> items;
+  final ValueChanged<T?> onChanged;
+  final String hint;
+  final String? Function(T?)? validator;
+
+  const AppDropdown({
+    super.key,
+    this.value,
+    required this.items,
+    required this.onChanged,
+    this.hint = '',
+    this.validator,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return FormField<T>(
+      initialValue: value,
+      validator: validator,
+      builder: (FormFieldState<T> field) {
+        return Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Container(
+              decoration: BoxDecoration(
+                color: field.value != null
+                    ? theme.highlightColor
+                    : Colors.transparent,
+                border:
+                    Border.all(color: theme.colorScheme.outline, width: 1.5),
+                borderRadius: BorderRadius.circular(_borderRadius),
+              ),
+              padding: const EdgeInsets.symmetric(horizontal: 12),
+              child: DropdownButtonHideUnderline(
+                child: DropdownButton<T>(
+                  value: field.value,
+                  isExpanded: true,
+                  dropdownColor: theme.cardColor,
+                  iconEnabledColor: theme.colorScheme.onSurface,
+                  style: TextStyle(
+                    color: theme.colorScheme.onSurface,
+                    fontSize: _fontSize,
+                  ),
+                  selectedItemBuilder: (context) {
+                    return items.map((item) {
+                      return Align(
+                        alignment: Alignment.centerLeft,
+                        child: item.child,
+                      );
+                    }).toList();
+                  },
+                  items: items,
+                  onChanged: (T? newValue) {
+                    field.didChange(newValue);
+                    onChanged(newValue);
+                  },
+                  hint: Text(
+                    hint,
+                    style: TextStyle(
+                        color: theme.colorScheme.onSurface,
+                        fontSize: _fontSize),
+                  ),
+                ),
+              ),
+            ),
+            if (field.hasError)
+              Padding(
+                padding: const EdgeInsets.only(left: 12.0, top: 4.0),
+                child: Text(
+                  field.errorText!,
+                  style: const TextStyle(color: Colors.redAccent, fontSize: 12),
+                ),
+              ),
+          ],
+        );
+      },
+    );
+  }
+}
+
+//* Custom Text Field *//
+class AppTextField extends StatelessWidget {
+  final TextEditingController controller;
+  final String labelText;
+  final bool obscureText;
+  final IconData? icon;
+  final TextInputType? keyboardType;
+  final bool readOnly;
+  final VoidCallback? onTap;
+  final Widget? suffixIcon;
+  final List<TextInputFormatter>? inputFormatters;
+  final bool isCurrency;
+  final String? Function(String?)? validator;
+  final String? initialValue;
+  final FocusNode? focusNode;
+  final bool useDefaultCurrencyFormatter;
+  final ValueChanged<String>? onChanged;
+
+  AppTextField({
+    super.key,
+    required this.controller,
+    required this.labelText,
+    this.obscureText = false,
+    this.icon,
+    this.keyboardType,
+    this.readOnly = false,
+    this.onTap,
+    this.suffixIcon,
+    this.inputFormatters,
+    this.validator,
+    this.isCurrency = false,
+    this.initialValue,
+    this.focusNode,
+    this.useDefaultCurrencyFormatter = true,
+    this.onChanged,
+  }) {
+    // ✅ Valor inicial automático para campo de moeda
+    if (isCurrency && (initialValue == null || initialValue!.isEmpty)) {
+      controller.text = '0.00';
+    } else if (initialValue != null) {
+      controller.text = initialValue!;
+    }
+  }
+
+  // ✅ Função para converter string formatada em número
+  double _unformatCurrency(String value) {
+    return CurrencyInputFormatter.unformat(value);
+  }
+
+  // ✅ Validação de campos de moeda
+  String? _currencyValidator(String? value) {
+    if (value == null || value.isEmpty) return 'Please enter an amount';
+    if (_unformatCurrency(value) == 0) return 'Please enter an amount';
+    return null;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final formatters = <TextInputFormatter>[
+      if (isCurrency && useDefaultCurrencyFormatter) CurrencyInputFormatter(),
+      if (inputFormatters != null) ...inputFormatters!,
+    ];
+
+    return TextFormField(
+      controller: controller,
+      obscureText: obscureText,
+      keyboardType: keyboardType ??
+          (isCurrency ? TextInputType.number : TextInputType.text),
+      readOnly: readOnly,
+      onTap: onTap,
+      inputFormatters: formatters,
+      validator: validator ?? (isCurrency ? _currencyValidator : null),
+      focusNode: focusNode,
+      onChanged: onChanged,
+      style: TextStyle(color: theme.colorScheme.onSurface, fontSize: _fontSize),
+      decoration: InputDecoration(
+        labelText: labelText,
+        labelStyle: TextStyle(color: theme.colorScheme.onSurface),
+        filled: true,
+        fillColor: _textFieldBackground,
+        prefixText: isCurrency ? '\$' : null,
+        prefixStyle: isCurrency
+            ? TextStyle(color: theme.colorScheme.onSurface, fontSize: _fontSize)
+            : null,
+        prefixIcon: icon != null
+            ? Icon(icon, color: theme.colorScheme.onSurface)
+            : null,
+        suffixIcon: suffixIcon,
+        enabledBorder: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(_borderRadius),
+          borderSide: BorderSide(color: theme.colorScheme.outline, width: 1.2),
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(_borderRadius),
+          borderSide: BorderSide(color: theme.colorScheme.primary, width: 1.6),
+        ),
+        errorBorder: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(_borderRadius),
+          borderSide: const BorderSide(color: Colors.redAccent, width: 1.2),
+        ),
+        focusedErrorBorder: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(_borderRadius),
+          borderSide: const BorderSide(color: Colors.redAccent, width: 1.4),
+        ),
+      ),
+    );
+  }
+}
+
+///* App Button *///
+class AppButton extends StatelessWidget {
+  final String label;
+  final Future<void> Function()? onPressed;
+  final bool isLoading;
+
+  const AppButton({
+    super.key,
+    required this.label,
+    required this.onPressed,
+    this.isLoading = false,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return SizedBox(
+      width: double.infinity,
+      child: ElevatedButton(
+        style: ElevatedButton.styleFrom(
+          foregroundColor: theme.colorScheme.onPrimary,
+          backgroundColor: theme.colorScheme.primary,
+          disabledBackgroundColor: theme.colorScheme.primary.withAlpha(153),
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(_borderRadius),
+          ),
+          padding: const EdgeInsets.symmetric(vertical: 14),
+          textStyle: const TextStyle(
+            fontSize: _fontSize,
+            fontWeight: FontWeight.bold,
+          ),
+          elevation: 4,
+          shadowColor: theme.colorScheme.primary.withAlpha(102),
+        ),
+        onPressed: (isLoading || onPressed == null)
+            ? null
+            : () async {
+                FocusScope.of(context).unfocus(); // Fecha o teclado
+                await onPressed!();
+              },
+        child: isLoading
+            ? const SizedBox(
+                height: 22,
+                width: 22,
+                child: CircularProgressIndicator(
+                  color: Colors.white,
+                  strokeWidth: 2,
+                ),
+              )
+            : Text(
+                label,
+                style: TextStyle(color: theme.colorScheme.onPrimary),
+              ),
+      ),
+    );
+  }
+}
+
+///* Reusable Form Card *///
+class AppFormCard extends StatelessWidget {
+  final String title;
+  final Widget child;
+
+  const AppFormCard({super.key, required this.title, required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return Card(
+      color: theme.cardColor,
+      elevation: _formCardElevation,
+      shadowColor: theme.colorScheme.outline
+          .withAlpha((_formCardShadowOpacity * 255).round()),
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(_borderRadius),
+        side: BorderSide(
+          color: theme.colorScheme.outline
+              .withAlpha((_formCardBorderOpacity * 255).round()),
+          width: _formCardBorderWidth,
+        ),
+      ),
+      child: Padding(
+        padding: const EdgeInsets.all(_formCardPadding),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Text(
+              title,
+              style: theme.textTheme.titleLarge?.copyWith(
+                color: theme.colorScheme.primary,
+                fontWeight: FontWeight.bold,
+              ),
+              textAlign: TextAlign.center,
+            ),
+            const SizedBox(height: _formTitleBottomSpacing),
+            child,
+          ],
+        ),
+      ),
+    );
+  }
+}