I have a form in my application where the user can fill in their data. The problem is that the text for this page is coming in as Right to Left. This is an issue with only this page in a series of 10-12 pages.
I had already tried wrapping the widget in Directionality class, and it didn’t work as expected. I had also added specific LTR and RTL in the custom text field file, but I had the same result. I am also adding the custom text field class below if it is of any use.
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';
import 'package:image/image.dart' as img;
import 'package:el_tooltip/el_tooltip.dart';
import 'package:provider/provider.dart';
import '../class/custom_elevated_button.dart';
import '../class/common_text_field_style.dart';
import '../class/text_styles.dart';
import 'package:flutter/services.dart';
import 'activity_form_provider.dart';
class Page8a extends StatefulWidget {
final Function(Map<String, dynamic>) onPageDataChanged;
Page8a({required this.onPageDataChanged});
@override
_Page8aState createState() => _Page8aState();
}
class _Page8aState extends State<Page8a> {
late ActivityFormProvider formProvider;
final ImagePicker _picker = ImagePicker();
final FocusNode _gstNumberFocusNode = FocusNode();
@override
void initState() {
super.initState();
formProvider = Provider.of<ActivityFormProvider>(context, listen: false);
formProvider.addListener(_updateFormData);
}
@override
void dispose() {
formProvider.removeListener(_updateFormData);
_gstNumberFocusNode.dispose();
super.dispose();
}
void _updateFormData() {
widget.onPageDataChanged(formProvider.toMap());
}
@override
Widget build(BuildContext context) {
formProvider =
Provider.of<ActivityFormProvider>(context); // Access the provider
return SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Card(
color: Color(0xffffc107).withOpacity(0.5),
child: Container(
width: double.infinity,
padding: EdgeInsets.all(15),
color: Colors.transparent,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Section 8a',
style: TextStyles.headingBlack,
),
SizedBox(height: 15),
Text(
'Bank Details',
style: TextStyles.titleBlack,
),
Text(
'Provide your bank details for payment processing.',
style: TextStyles.smallBodyBlack,
overflow: TextOverflow.ellipsis,
maxLines: 2,
),
],
),
),
),
SizedBox(height: 15),
Card(
child: Container(
padding: EdgeInsets.all(15),
color: Colors.transparent,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(
child: Text('8a.1 | Legal Entity / Proprietorship Name',
style: TextStyles.buttonBlack),
),
SizedBox(width: 15),
ElTooltip(
color: Colors.white,
radius: Radius.circular(10),
showArrow: true,
content: Text(
'Provide the legal name of your entity or proprietorship.'),
showModal: true,
timeout: Duration(seconds: 5),
child: Icon(
Icons.info_outline,
color: Colors.grey,
size: 20,
),
),
],
),
SizedBox(height: 15.0),
CommonTextField(
hintText: 'Ex. COGs Lab LLP',
textStyle: TextStyles.bodyBlack,
autofocus: false,
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
textCapitalization: TextCapitalization.words,
controller: TextEditingController(
text: formProvider.activityLegalName,
),
onChanged: (value) =>
formProvider.updateActivityLegalName(value),
fillColor: Colors.white,
filled: true,
),
SizedBox(height: 15),
],
),
),
),
SizedBox(height: 15),
// More similar cards...
],
),
);
}
}
Common Text Field Class:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'text_styles.dart';
class CommonTextField extends StatefulWidget {
//---------------------------------------------------
// Text and Style Properties
//---------------------------------------------------
final String? labelText; // Made optional
final TextStyle? labelStyle;
final String? hintText;
final TextStyle? hintStyle;
final TextEditingController controller;
final TextInputType keyboardType;
final bool obscureText;
final TextStyle? textStyle;
//---------------------------------------------------
// Cursor Properties
//---------------------------------------------------
final Color? cursorColor;
final double? cursorWidth;
final Radius? cursorRadius;
final double? cursorHeight;
//---------------------------------------------------
// Interaction Properties
//---------------------------------------------------
final bool autofocus;
final bool? enabled;
final FocusNode? focusNode;
//---------------------------------------------------
// Border Properties
//---------------------------------------------------
final InputBorder? border;
final InputBorder? enabledBorder;
final InputBorder? focusedBorder;
final InputBorder? errorBorder;
final InputBorder? focusedErrorBorder;
//---------------------------------------------------
// Filling and Padding Properties
//---------------------------------------------------
final Color? fillColor;
final bool filled;
final EdgeInsetsGeometry? contentPadding;
final EdgeInsetsGeometry? padding;
final EdgeInsetsGeometry? margin;
//---------------------------------------------------
// Sizing Properties
//---------------------------------------------------
final double? height;
final int? maxLines;
final int? minLines;
//---------------------------------------------------
// Validation Properties
//---------------------------------------------------
final String? errorText;
final int? maxLength;
//---------------------------------------------------
// Additional Properties
//---------------------------------------------------
final TextAlign textAlign;
final Widget? prefixIcon;
final Widget? suffixIcon;
final String? prefixText;
final TextCapitalization textCapitalization;
final FormFieldValidator<String>? validator;
final ValueSetter<String>? onSubmitted;
final ValueChanged<String>? onChanged;
final TextInputAction? textInputAction;
final List<TextInputFormatter>? inputFormatters;
const CommonTextField({
Key? key,
this.labelText, // Made optional
this.labelStyle,
this.hintText,
this.hintStyle,
required this.controller,
this.keyboardType = TextInputType.text,
this.obscureText = false,
this.textStyle,
this.cursorColor,
this.cursorWidth,
this.cursorRadius,
this.cursorHeight,
this.autofocus = false,
this.focusNode,
this.border,
this.enabledBorder,
this.focusedBorder,
this.errorBorder,
this.focusedErrorBorder,
this.fillColor,
this.filled = false,
this.contentPadding,
this.padding,
this.margin,
this.height = 50.0,
this.maxLines = 1,
this.minLines,
this.enabled = true,
this.errorText,
this.textAlign = TextAlign.start,
this.prefixIcon,
this.suffixIcon,
this.prefixText,
this.maxLength,
this.textCapitalization = TextCapitalization.none,
this.validator,
this.onSubmitted,
this.onChanged,
this.textInputAction,
this.inputFormatters,
}) : super(key: key);
@override
_CommonTextFieldState createState() => _CommonTextFieldState();
}
class _CommonTextFieldState extends State<CommonTextField> {
bool _obscureText = true;
String? displayErrorText;
@override
void initState() {
super.initState();
_obscureText = widget.obscureText;
displayErrorText = widget.errorText;
widget.controller.addListener(_clearErrorOnChange);
}
@override
void dispose() {
widget.controller.removeListener(_clearErrorOnChange);
super.dispose();
}
void _clearErrorOnChange() {
if (displayErrorText != null && displayErrorText!.isNotEmpty) {
setState(() {
displayErrorText = null;
});
}
}
@override
void didUpdateWidget(CommonTextField oldWidget) {
super.didUpdateWidget(oldWidget);
if (widget.errorText != oldWidget.errorText) {
setState(() {
displayErrorText = widget.errorText;
});
}
}
@override
Widget build(BuildContext context) {
List<TextInputFormatter> inputFormatters = widget.inputFormatters ?? [];
if (widget.maxLength != null) {
inputFormatters.add(LengthLimitingTextInputFormatter(widget.maxLength));
}
return Padding(
padding: widget.margin ?? EdgeInsets.zero,
child: Container(
padding: widget.padding,
child: Center(
child: TextFormField(
controller: widget.controller,
keyboardType: widget.keyboardType,
obscureText: _obscureText,
style: widget.textStyle ?? TextStyles.bodyBlack,
cursorColor: widget.cursorColor ?? Colors.black,
cursorWidth: widget.cursorWidth ?? 2.0,
cursorRadius: widget.cursorRadius,
cursorHeight: widget.cursorHeight,
autofocus: widget.autofocus,
focusNode: widget.focusNode,
maxLines: widget.maxLines ?? 1,
minLines: widget.minLines,
enabled: widget.enabled,
textAlign: widget.textAlign,
inputFormatters: inputFormatters,
textCapitalization: widget.textCapitalization,
textInputAction: widget.textInputAction,
onChanged: (text) {
if (displayErrorText != null && displayErrorText!.isNotEmpty) {
setState(() {
displayErrorText = null;
});
}
if (widget.onChanged != null) {
widget.onChanged!(text);
}
},
onFieldSubmitted: widget.onSubmitted != null
? (value) {
if (widget.onSubmitted != null) {
widget.onSubmitted!(value);
}
}
: null,
decoration: InputDecoration(
labelText: widget.labelText,
labelStyle: widget.labelStyle ?? TextStyles.bodyBlack,
hintText: widget.hintText,
hintStyle: widget.hintStyle ?? TextStyles.bodyGrey,
errorText: displayErrorText,
errorStyle: TextStyles.smallBodyRed,
border: widget.border ??
OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide(color: Colors.black)),
enabledBorder: widget.enabledBorder ??
OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide(color: Colors.black)),
focusedBorder: widget.focusedBorder ??
OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide:
BorderSide(color: Color(0xFFFFC107), width: 2)),
errorBorder: widget.errorBorder ??
OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide(color: Color(0xFFF44336))),
focusedErrorBorder: widget.focusedErrorBorder ??
OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide:
BorderSide(color: Color(0xFFF44336), width: 2)),
fillColor: widget.fillColor ?? Colors.transparent,
filled: widget.filled,
contentPadding: widget.contentPadding ?? EdgeInsets.all(15),
prefixIcon: widget.prefixIcon,
suffixIcon: widget.obscureText
? IconButton(
icon: Icon(
_obscureText ? Icons.visibility : Icons.visibility_off,
color: Colors.black,
size: 20,
),
onPressed: () {
setState(() {
_obscureText = !_obscureText;
});
},
)
: widget.suffixIcon,
prefixText: widget.prefixText,
prefixStyle: TextStyle(
fontWeight: FontWeights.regular,
fontSize: 14.0,
color: Colors.black,
),
),
validator: widget.validator,
),
),
),
);
}
}