From 7d663f3b9617d54723cecb1a5246d0843fb3f106 Mon Sep 17 00:00:00 2001 From: yaso Date: Thu, 5 Jun 2025 16:04:14 +0200 Subject: [PATCH] fix textfield width --- .../mih_text_form_field.dart | 339 +++++++++--------- 1 file changed, 172 insertions(+), 167 deletions(-) diff --git a/Frontend/lib/mih_components/mih_package_components/mih_text_form_field.dart b/Frontend/lib/mih_components/mih_package_components/mih_text_form_field.dart index 50c50d36..d10452ac 100644 --- a/Frontend/lib/mih_components/mih_package_components/mih_text_form_field.dart +++ b/Frontend/lib/mih_components/mih_package_components/mih_text_form_field.dart @@ -84,186 +84,191 @@ class _MihTextFormFieldState extends State { @override Widget build(BuildContext context) { - return Theme( - data: Theme.of(context).copyWith( - textSelectionTheme: TextSelectionThemeData( - selectionColor: widget.inputColor.withValues(alpha: 0.3), - selectionHandleColor: widget.inputColor, + return SizedBox( + width: widget.width, + height: widget.height, + child: Theme( + data: Theme.of(context).copyWith( + textSelectionTheme: TextSelectionThemeData( + selectionColor: widget.inputColor.withValues(alpha: 0.3), + selectionHandleColor: widget.inputColor, + ), ), - ), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text( - widget.hintText, - textAlign: TextAlign.left, - style: TextStyle( - color: widget.fillColor, - fontSize: 15, - fontWeight: FontWeight.bold, - ), - ), - Visibility( - visible: !widget.requiredText, - child: Text( - "(Optional)", - textAlign: TextAlign.right, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + widget.hintText, + textAlign: TextAlign.left, style: TextStyle( color: widget.fillColor, fontSize: 15, fontWeight: FontWeight.bold, ), ), - ), - ], - ), - const SizedBox(height: 4), - FormField( - initialValue: widget.controller.text, - validator: widget.validator, - autovalidateMode: AutovalidateMode.onUserInteraction, - builder: (field) { - _formFieldState = field; - return Column( - crossAxisAlignment: - CrossAxisAlignment.start, // <-- Add this line - children: [ - Material( - elevation: widget.elevation ?? 4.0, - borderRadius: - BorderRadius.circular(widget.borderRadius ?? 8.0), - child: SizedBox( - width: widget.width, - height: widget.height, - child: TextFormField( - controller: widget.controller, - cursorColor: widget.inputColor, - autofillHints: widget.autofillHints, - textAlign: TextAlign.start, - textAlignVertical: widget.multiLineInput == true - ? TextAlignVertical.top - : TextAlignVertical.center, - obscureText: - widget.passwordMode == true ? _obscureText : false, - expands: widget.passwordMode == true - ? false - : (widget.multiLineInput ?? false), - maxLines: widget.passwordMode == true ? 1 : null, - readOnly: widget.readOnly ?? false, - keyboardType: widget.numberMode == true - ? TextInputType.number - : null, - inputFormatters: widget.numberMode == true - ? [FilteringTextInputFormatter.digitsOnly] - : null, - style: TextStyle( - color: widget.inputColor, - fontWeight: FontWeight.w500, - ), - decoration: InputDecoration( - suffixIcon: widget.passwordMode == true - ? IconButton( - icon: Icon( - _obscureText - ? Icons.visibility_off - : Icons.visibility, - color: widget.inputColor, - ), - onPressed: () { - setState(() { - _obscureText = !_obscureText; - }); - }, - ) - : null, - errorStyle: const TextStyle( - height: 0, fontSize: 0), // <-- Add this line - contentPadding: const EdgeInsets.symmetric( - horizontal: 10.0, vertical: 8.0), - filled: true, - fillColor: widget.fillColor, - border: OutlineInputBorder( - borderRadius: BorderRadius.circular( - widget.borderRadius ?? 8.0), - borderSide: field.hasError - ? BorderSide( - color: MzanziInnovationHub.of(context)! - .theme - .errorColor(), - width: 2.0, - ) - : BorderSide.none, - ), - enabledBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular( - widget.borderRadius ?? 8.0), - borderSide: BorderSide.none, - ), - focusedBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular( - widget.borderRadius ?? 8.0), - borderSide: BorderSide( - color: field.hasError - ? MzanziInnovationHub.of(context)! - .theme - .errorColor() - : widget.inputColor, - width: 3.0, - ), - ), - errorBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular( - widget.borderRadius ?? 8.0), - borderSide: BorderSide( - color: MzanziInnovationHub.of(context)! - .theme - .errorColor(), - width: 3.0, - ), - ), - focusedErrorBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular( - widget.borderRadius ?? 8.0), - borderSide: BorderSide( - color: MzanziInnovationHub.of(context)! - .theme - .errorColor(), - width: 3.0, - ), - ), - ), - onChanged: (value) { - field.didChange(value); - }, - ), + Visibility( + visible: !widget.requiredText, + child: Text( + "(Optional)", + textAlign: TextAlign.right, + style: TextStyle( + color: widget.fillColor, + fontSize: 15, + fontWeight: FontWeight.bold, ), ), - if (field.hasError) - Row( - children: [ - Padding( - padding: const EdgeInsets.only(left: 8.0, top: 4.0), - child: Text( - field.errorText ?? '', - style: TextStyle( - fontSize: 12, - color: MzanziInnovationHub.of(context)! - .theme - .errorColor(), - fontWeight: FontWeight.bold, + ), + ], + ), + const SizedBox(height: 4), + FormField( + initialValue: widget.controller.text, + validator: widget.validator, + autovalidateMode: AutovalidateMode.onUserInteraction, + builder: (field) { + _formFieldState = field; + return Column( + crossAxisAlignment: + CrossAxisAlignment.start, // <-- Add this line + children: [ + Material( + elevation: widget.elevation ?? 4.0, + borderRadius: + BorderRadius.circular(widget.borderRadius ?? 8.0), + child: SizedBox( + height: + widget.height != null ? widget.height! - 25 : null, + child: TextFormField( + controller: widget.controller, + cursorColor: widget.inputColor, + autofillHints: widget.autofillHints, + textAlign: TextAlign.start, + textAlignVertical: widget.multiLineInput == true + ? TextAlignVertical.top + : TextAlignVertical.center, + obscureText: widget.passwordMode == true + ? _obscureText + : false, + expands: widget.passwordMode == true + ? false + : (widget.multiLineInput ?? false), + maxLines: widget.passwordMode == true ? 1 : null, + readOnly: widget.readOnly ?? false, + keyboardType: widget.numberMode == true + ? TextInputType.number + : null, + inputFormatters: widget.numberMode == true + ? [FilteringTextInputFormatter.digitsOnly] + : null, + style: TextStyle( + color: widget.inputColor, + fontWeight: FontWeight.w500, + ), + decoration: InputDecoration( + suffixIcon: widget.passwordMode == true + ? IconButton( + icon: Icon( + _obscureText + ? Icons.visibility_off + : Icons.visibility, + color: widget.inputColor, + ), + onPressed: () { + setState(() { + _obscureText = !_obscureText; + }); + }, + ) + : null, + errorStyle: const TextStyle( + height: 0, fontSize: 0), // <-- Add this line + contentPadding: const EdgeInsets.symmetric( + horizontal: 10.0, vertical: 8.0), + filled: true, + fillColor: widget.fillColor, + border: OutlineInputBorder( + borderRadius: BorderRadius.circular( + widget.borderRadius ?? 8.0), + borderSide: field.hasError + ? BorderSide( + color: MzanziInnovationHub.of(context)! + .theme + .errorColor(), + width: 2.0, + ) + : BorderSide.none, + ), + enabledBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular( + widget.borderRadius ?? 8.0), + borderSide: BorderSide.none, + ), + focusedBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular( + widget.borderRadius ?? 8.0), + borderSide: BorderSide( + color: field.hasError + ? MzanziInnovationHub.of(context)! + .theme + .errorColor() + : widget.inputColor, + width: 3.0, + ), + ), + errorBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular( + widget.borderRadius ?? 8.0), + borderSide: BorderSide( + color: MzanziInnovationHub.of(context)! + .theme + .errorColor(), + width: 3.0, + ), + ), + focusedErrorBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular( + widget.borderRadius ?? 8.0), + borderSide: BorderSide( + color: MzanziInnovationHub.of(context)! + .theme + .errorColor(), + width: 3.0, + ), ), ), + onChanged: (value) { + field.didChange(value); + }, ), - ], + ), ), - ], - ); - }, - ), - ], + if (field.hasError) + Row( + children: [ + Padding( + padding: const EdgeInsets.only(left: 8.0, top: 4.0), + child: Text( + field.errorText ?? '', + style: TextStyle( + fontSize: 12, + color: MzanziInnovationHub.of(context)! + .theme + .errorColor(), + fontWeight: FontWeight.bold, + ), + ), + ), + ], + ), + ], + ); + }, + ), + ], + ), ), ); }