fix settings
This commit is contained in:
308
lib/features/auth/presentation/widgets/auth_button.dart
Normal file
308
lib/features/auth/presentation/widgets/auth_button.dart
Normal file
@@ -0,0 +1,308 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../../../core/theme/app_spacing.dart';
|
||||
|
||||
/// Reusable primary button specifically designed for authentication actions
|
||||
/// Provides consistent styling, loading states, and accessibility features
|
||||
class AuthButton extends StatelessWidget {
|
||||
const AuthButton({
|
||||
super.key,
|
||||
required this.onPressed,
|
||||
required this.text,
|
||||
this.isLoading = false,
|
||||
this.isEnabled = true,
|
||||
this.type = AuthButtonType.filled,
|
||||
this.icon,
|
||||
this.width = double.infinity,
|
||||
this.height = AppSpacing.buttonHeightLarge,
|
||||
});
|
||||
|
||||
final VoidCallback? onPressed;
|
||||
final String text;
|
||||
final bool isLoading;
|
||||
final bool isEnabled;
|
||||
final AuthButtonType type;
|
||||
final Widget? icon;
|
||||
final double width;
|
||||
final double height;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
|
||||
final isButtonEnabled = isEnabled && !isLoading && onPressed != null;
|
||||
|
||||
Widget child = _buildButtonChild(theme, colorScheme);
|
||||
|
||||
return SizedBox(
|
||||
width: width,
|
||||
height: height,
|
||||
child: AnimatedContainer(
|
||||
duration: AppSpacing.animationNormal,
|
||||
curve: Curves.easeInOut,
|
||||
child: _buildButtonByType(context, child, isButtonEnabled),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildButtonChild(ThemeData theme, ColorScheme colorScheme) {
|
||||
if (isLoading) {
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
SizedBox(
|
||||
width: AppSpacing.iconSM,
|
||||
height: AppSpacing.iconSM,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2,
|
||||
color: _getLoadingIndicatorColor(colorScheme),
|
||||
),
|
||||
),
|
||||
AppSpacing.horizontalSpaceSM,
|
||||
Text(
|
||||
'Please wait...',
|
||||
style: _getTextStyle(theme, colorScheme),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
if (icon != null) {
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
IconTheme(
|
||||
data: IconThemeData(
|
||||
color: _getIconColor(colorScheme),
|
||||
size: AppSpacing.iconSM,
|
||||
),
|
||||
child: icon!,
|
||||
),
|
||||
AppSpacing.horizontalSpaceSM,
|
||||
Flexible(
|
||||
child: Text(
|
||||
text,
|
||||
style: _getTextStyle(theme, colorScheme),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
return Text(
|
||||
text,
|
||||
style: _getTextStyle(theme, colorScheme),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildButtonByType(BuildContext context, Widget child, bool enabled) {
|
||||
switch (type) {
|
||||
case AuthButtonType.filled:
|
||||
return FilledButton(
|
||||
onPressed: enabled ? onPressed : null,
|
||||
style: _getFilledButtonStyle(context),
|
||||
child: child,
|
||||
);
|
||||
case AuthButtonType.outlined:
|
||||
return OutlinedButton(
|
||||
onPressed: enabled ? onPressed : null,
|
||||
style: _getOutlinedButtonStyle(context),
|
||||
child: child,
|
||||
);
|
||||
case AuthButtonType.text:
|
||||
return TextButton(
|
||||
onPressed: enabled ? onPressed : null,
|
||||
style: _getTextButtonStyle(context),
|
||||
child: child,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ButtonStyle _getFilledButtonStyle(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return FilledButton.styleFrom(
|
||||
backgroundColor: colorScheme.primary,
|
||||
foregroundColor: colorScheme.onPrimary,
|
||||
disabledBackgroundColor: colorScheme.onSurface.withValues(alpha: 0.12),
|
||||
disabledForegroundColor: colorScheme.onSurface.withValues(alpha: 0.38),
|
||||
elevation: AppSpacing.elevationNone,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: AppSpacing.buttonRadius,
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppSpacing.buttonPaddingHorizontal,
|
||||
vertical: AppSpacing.buttonPaddingVertical,
|
||||
),
|
||||
tapTargetSize: MaterialTapTargetSize.padded,
|
||||
).copyWith(
|
||||
overlayColor: WidgetStateProperty.resolveWith<Color?>(
|
||||
(Set<WidgetState> states) {
|
||||
if (states.contains(WidgetState.pressed)) {
|
||||
return colorScheme.onPrimary.withValues(alpha: 0.1);
|
||||
}
|
||||
if (states.contains(WidgetState.hovered)) {
|
||||
return colorScheme.onPrimary.withValues(alpha: 0.08);
|
||||
}
|
||||
if (states.contains(WidgetState.focused)) {
|
||||
return colorScheme.onPrimary.withValues(alpha: 0.1);
|
||||
}
|
||||
return null;
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
ButtonStyle _getOutlinedButtonStyle(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return OutlinedButton.styleFrom(
|
||||
foregroundColor: colorScheme.primary,
|
||||
disabledForegroundColor: colorScheme.onSurface.withValues(alpha: 0.38),
|
||||
side: BorderSide(
|
||||
color: colorScheme.outline,
|
||||
width: AppSpacing.borderWidth,
|
||||
),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: AppSpacing.buttonRadius,
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppSpacing.buttonPaddingHorizontal,
|
||||
vertical: AppSpacing.buttonPaddingVertical,
|
||||
),
|
||||
tapTargetSize: MaterialTapTargetSize.padded,
|
||||
).copyWith(
|
||||
side: WidgetStateProperty.resolveWith<BorderSide?>(
|
||||
(Set<WidgetState> states) {
|
||||
if (states.contains(WidgetState.disabled)) {
|
||||
return BorderSide(
|
||||
color: colorScheme.onSurface.withValues(alpha: 0.12),
|
||||
width: AppSpacing.borderWidth,
|
||||
);
|
||||
}
|
||||
if (states.contains(WidgetState.focused)) {
|
||||
return BorderSide(
|
||||
color: colorScheme.primary,
|
||||
width: AppSpacing.borderWidthThick,
|
||||
);
|
||||
}
|
||||
return BorderSide(
|
||||
color: colorScheme.outline,
|
||||
width: AppSpacing.borderWidth,
|
||||
);
|
||||
},
|
||||
),
|
||||
overlayColor: WidgetStateProperty.resolveWith<Color?>(
|
||||
(Set<WidgetState> states) {
|
||||
if (states.contains(WidgetState.pressed)) {
|
||||
return colorScheme.primary.withValues(alpha: 0.1);
|
||||
}
|
||||
if (states.contains(WidgetState.hovered)) {
|
||||
return colorScheme.primary.withValues(alpha: 0.08);
|
||||
}
|
||||
if (states.contains(WidgetState.focused)) {
|
||||
return colorScheme.primary.withValues(alpha: 0.1);
|
||||
}
|
||||
return null;
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
ButtonStyle _getTextButtonStyle(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return TextButton.styleFrom(
|
||||
foregroundColor: colorScheme.primary,
|
||||
disabledForegroundColor: colorScheme.onSurface.withValues(alpha: 0.38),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: AppSpacing.buttonRadius,
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppSpacing.buttonPaddingHorizontal,
|
||||
vertical: AppSpacing.buttonPaddingVertical,
|
||||
),
|
||||
tapTargetSize: MaterialTapTargetSize.padded,
|
||||
).copyWith(
|
||||
overlayColor: WidgetStateProperty.resolveWith<Color?>(
|
||||
(Set<WidgetState> states) {
|
||||
if (states.contains(WidgetState.pressed)) {
|
||||
return colorScheme.primary.withValues(alpha: 0.1);
|
||||
}
|
||||
if (states.contains(WidgetState.hovered)) {
|
||||
return colorScheme.primary.withValues(alpha: 0.08);
|
||||
}
|
||||
if (states.contains(WidgetState.focused)) {
|
||||
return colorScheme.primary.withValues(alpha: 0.1);
|
||||
}
|
||||
return null;
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
TextStyle _getTextStyle(ThemeData theme, ColorScheme colorScheme) {
|
||||
final baseStyle = theme.textTheme.labelLarge?.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: 0.1,
|
||||
) ??
|
||||
const TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: 0.1,
|
||||
);
|
||||
|
||||
if (!isEnabled || isLoading) {
|
||||
return baseStyle.copyWith(
|
||||
color: colorScheme.onSurface.withValues(alpha: 0.38),
|
||||
);
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
case AuthButtonType.filled:
|
||||
return baseStyle.copyWith(color: colorScheme.onPrimary);
|
||||
case AuthButtonType.outlined:
|
||||
case AuthButtonType.text:
|
||||
return baseStyle.copyWith(color: colorScheme.primary);
|
||||
}
|
||||
}
|
||||
|
||||
Color _getLoadingIndicatorColor(ColorScheme colorScheme) {
|
||||
switch (type) {
|
||||
case AuthButtonType.filled:
|
||||
return colorScheme.onPrimary;
|
||||
case AuthButtonType.outlined:
|
||||
case AuthButtonType.text:
|
||||
return colorScheme.primary;
|
||||
}
|
||||
}
|
||||
|
||||
Color _getIconColor(ColorScheme colorScheme) {
|
||||
if (!isEnabled) {
|
||||
return colorScheme.onSurface.withValues(alpha: 0.38);
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
case AuthButtonType.filled:
|
||||
return colorScheme.onPrimary;
|
||||
case AuthButtonType.outlined:
|
||||
case AuthButtonType.text:
|
||||
return colorScheme.primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Types of auth buttons available
|
||||
enum AuthButtonType {
|
||||
/// Filled button with primary color background
|
||||
filled,
|
||||
|
||||
/// Outlined button with transparent background and border
|
||||
outlined,
|
||||
|
||||
/// Text button with no background or border
|
||||
text,
|
||||
}
|
||||
209
lib/features/auth/presentation/widgets/auth_text_field.dart
Normal file
209
lib/features/auth/presentation/widgets/auth_text_field.dart
Normal file
@@ -0,0 +1,209 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import '../../../../core/theme/app_spacing.dart';
|
||||
|
||||
/// Reusable styled text field specifically designed for authentication forms
|
||||
/// Follows Material 3 design guidelines with consistent theming
|
||||
class AuthTextField extends StatefulWidget {
|
||||
const AuthTextField({
|
||||
super.key,
|
||||
required this.controller,
|
||||
required this.labelText,
|
||||
this.hintText,
|
||||
this.prefixIcon,
|
||||
this.suffixIcon,
|
||||
this.validator,
|
||||
this.keyboardType,
|
||||
this.textInputAction,
|
||||
this.onFieldSubmitted,
|
||||
this.onChanged,
|
||||
this.obscureText = false,
|
||||
this.enabled = true,
|
||||
this.autofillHints,
|
||||
this.inputFormatters,
|
||||
this.maxLength,
|
||||
this.focusNode,
|
||||
this.autofocus = false,
|
||||
});
|
||||
|
||||
final TextEditingController controller;
|
||||
final String labelText;
|
||||
final String? hintText;
|
||||
final Widget? prefixIcon;
|
||||
final Widget? suffixIcon;
|
||||
final String? Function(String?)? validator;
|
||||
final TextInputType? keyboardType;
|
||||
final TextInputAction? textInputAction;
|
||||
final void Function(String)? onFieldSubmitted;
|
||||
final void Function(String)? onChanged;
|
||||
final bool obscureText;
|
||||
final bool enabled;
|
||||
final List<String>? autofillHints;
|
||||
final List<TextInputFormatter>? inputFormatters;
|
||||
final int? maxLength;
|
||||
final FocusNode? focusNode;
|
||||
final bool autofocus;
|
||||
|
||||
@override
|
||||
State<AuthTextField> createState() => _AuthTextFieldState();
|
||||
}
|
||||
|
||||
class _AuthTextFieldState extends State<AuthTextField> {
|
||||
bool _isFocused = false;
|
||||
late FocusNode _focusNode;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_focusNode = widget.focusNode ?? FocusNode();
|
||||
_focusNode.addListener(_onFocusChanged);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
if (widget.focusNode == null) {
|
||||
_focusNode.dispose();
|
||||
} else {
|
||||
_focusNode.removeListener(_onFocusChanged);
|
||||
}
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _onFocusChanged() {
|
||||
setState(() {
|
||||
_isFocused = _focusNode.hasFocus;
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
TextFormField(
|
||||
controller: widget.controller,
|
||||
focusNode: _focusNode,
|
||||
validator: widget.validator,
|
||||
keyboardType: widget.keyboardType,
|
||||
textInputAction: widget.textInputAction,
|
||||
onFieldSubmitted: widget.onFieldSubmitted,
|
||||
onChanged: widget.onChanged,
|
||||
obscureText: widget.obscureText,
|
||||
enabled: widget.enabled,
|
||||
autofillHints: widget.autofillHints,
|
||||
inputFormatters: widget.inputFormatters,
|
||||
maxLength: widget.maxLength,
|
||||
autofocus: widget.autofocus,
|
||||
style: theme.textTheme.bodyLarge?.copyWith(
|
||||
color: widget.enabled ? colorScheme.onSurface : colorScheme.onSurface.withValues(alpha: 0.38),
|
||||
),
|
||||
decoration: InputDecoration(
|
||||
labelText: widget.labelText,
|
||||
hintText: widget.hintText,
|
||||
prefixIcon: widget.prefixIcon != null
|
||||
? Padding(
|
||||
padding: const EdgeInsets.only(left: AppSpacing.md, right: AppSpacing.sm),
|
||||
child: IconTheme.merge(
|
||||
data: IconThemeData(
|
||||
color: _isFocused
|
||||
? colorScheme.primary
|
||||
: colorScheme.onSurfaceVariant.withValues(alpha: 0.7),
|
||||
size: AppSpacing.iconMD,
|
||||
),
|
||||
child: widget.prefixIcon!,
|
||||
),
|
||||
)
|
||||
: null,
|
||||
suffixIcon: widget.suffixIcon != null
|
||||
? Padding(
|
||||
padding: const EdgeInsets.only(right: AppSpacing.md),
|
||||
child: IconTheme.merge(
|
||||
data: IconThemeData(
|
||||
color: _isFocused
|
||||
? colorScheme.primary
|
||||
: colorScheme.onSurfaceVariant.withValues(alpha: 0.7),
|
||||
size: AppSpacing.iconMD,
|
||||
),
|
||||
child: widget.suffixIcon!,
|
||||
),
|
||||
)
|
||||
: null,
|
||||
filled: true,
|
||||
fillColor: widget.enabled
|
||||
? (_isFocused
|
||||
? colorScheme.primaryContainer.withValues(alpha: 0.08)
|
||||
: colorScheme.surfaceContainerHighest.withValues(alpha: 0.5))
|
||||
: colorScheme.surfaceContainerHighest.withValues(alpha: 0.3),
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
horizontal: AppSpacing.lg,
|
||||
vertical: AppSpacing.lg,
|
||||
),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: AppSpacing.fieldRadius,
|
||||
borderSide: BorderSide(
|
||||
color: colorScheme.outline,
|
||||
width: AppSpacing.borderWidth,
|
||||
),
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: AppSpacing.fieldRadius,
|
||||
borderSide: BorderSide(
|
||||
color: colorScheme.outline.withValues(alpha: 0.6),
|
||||
width: AppSpacing.borderWidth,
|
||||
),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: AppSpacing.fieldRadius,
|
||||
borderSide: BorderSide(
|
||||
color: colorScheme.primary,
|
||||
width: AppSpacing.borderWidthThick,
|
||||
),
|
||||
),
|
||||
errorBorder: OutlineInputBorder(
|
||||
borderRadius: AppSpacing.fieldRadius,
|
||||
borderSide: BorderSide(
|
||||
color: colorScheme.error,
|
||||
width: AppSpacing.borderWidth,
|
||||
),
|
||||
),
|
||||
focusedErrorBorder: OutlineInputBorder(
|
||||
borderRadius: AppSpacing.fieldRadius,
|
||||
borderSide: BorderSide(
|
||||
color: colorScheme.error,
|
||||
width: AppSpacing.borderWidthThick,
|
||||
),
|
||||
),
|
||||
disabledBorder: OutlineInputBorder(
|
||||
borderRadius: AppSpacing.fieldRadius,
|
||||
borderSide: BorderSide(
|
||||
color: colorScheme.onSurface.withValues(alpha: 0.12),
|
||||
width: AppSpacing.borderWidth,
|
||||
),
|
||||
),
|
||||
labelStyle: theme.textTheme.bodyMedium?.copyWith(
|
||||
color: _isFocused
|
||||
? colorScheme.primary
|
||||
: colorScheme.onSurfaceVariant.withValues(alpha: 0.7),
|
||||
),
|
||||
hintStyle: theme.textTheme.bodyLarge?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant.withValues(alpha: 0.6),
|
||||
),
|
||||
errorStyle: theme.textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.error,
|
||||
),
|
||||
counterStyle: theme.textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
// Enhanced visual feedback with subtle animations
|
||||
cursorColor: colorScheme.primary,
|
||||
cursorHeight: 24,
|
||||
cursorWidth: 2,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
7
lib/features/auth/presentation/widgets/widgets.dart
Normal file
7
lib/features/auth/presentation/widgets/widgets.dart
Normal file
@@ -0,0 +1,7 @@
|
||||
// Auth widgets exports
|
||||
//
|
||||
// This file exports all auth-related widgets for easy importing
|
||||
// throughout the auth feature module.
|
||||
|
||||
export 'auth_button.dart';
|
||||
export 'auth_text_field.dart';
|
||||
Reference in New Issue
Block a user