Files
social-app/apps/lib/shared/widgets/app_sheet_input_field.dart
T

107 lines
2.8 KiB
Dart
Raw Normal View History

import 'package:flutter/material.dart';
import '../../core/theme/design_tokens.dart';
class AppSheetInputField extends StatefulWidget {
const AppSheetInputField({
super.key,
required this.controller,
required this.label,
required this.hint,
this.maxLines = 1,
this.autofocus = false,
});
final TextEditingController controller;
final String label;
final String hint;
final int maxLines;
final bool autofocus;
@override
State<AppSheetInputField> createState() => _AppSheetInputFieldState();
}
class _AppSheetInputFieldState extends State<AppSheetInputField> {
final FocusNode _focusNode = FocusNode();
bool _isFocused = false;
@override
void initState() {
super.initState();
_focusNode.addListener(_onFocusChange);
}
@override
void dispose() {
_focusNode.removeListener(_onFocusChange);
_focusNode.dispose();
super.dispose();
}
void _onFocusChange() {
if (_isFocused == _focusNode.hasFocus) {
return;
}
setState(() {
_isFocused = _focusNode.hasFocus;
});
}
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.label,
style: const TextStyle(
fontFamily: 'Inter',
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppColors.slate700,
),
),
const SizedBox(height: AppSpacing.sm),
AnimatedContainer(
duration: const Duration(milliseconds: 140),
curve: Curves.easeOut,
decoration: BoxDecoration(
color: AppColors.slate50,
borderRadius: BorderRadius.circular(AppRadius.md),
border: Border.all(
color: _isFocused
? AppColors.borderQuaternary
: AppColors.borderSecondary,
),
boxShadow: _isFocused
? [
BoxShadow(
color: AppColors.blue200.withValues(alpha: 0.35),
blurRadius: AppRadius.sm,
offset: const Offset(0, AppSpacing.xs / 2),
),
]
: const [],
),
child: TextField(
controller: widget.controller,
focusNode: _focusNode,
autofocus: widget.autofocus,
maxLines: widget.maxLines,
decoration: InputDecoration(
hintText: widget.hint,
hintStyle: const TextStyle(color: AppColors.slate400),
border: InputBorder.none,
contentPadding: const EdgeInsets.symmetric(
horizontal: AppSpacing.md,
vertical: AppSpacing.md,
),
),
),
),
],
);
}
}