TF-2101 Add text input field widget without suggestion
(cherry picked from commit 1e171250a8b6c33aac705d71da207822cb1e17bc)
This commit is contained in:
+50
@@ -0,0 +1,50 @@
|
|||||||
|
import 'package:core/presentation/extensions/color_extension.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
class TextInputFieldWidgetStyles {
|
||||||
|
static const double titleWidth = 112.0;
|
||||||
|
static const double borderWidth = 1.0;
|
||||||
|
static const double suffixIconSize = 8.0;
|
||||||
|
static const double space = 12.0;
|
||||||
|
static const double spaceMobile = 8.0;
|
||||||
|
|
||||||
|
static const EdgeInsetsGeometry padding = EdgeInsets.symmetric(
|
||||||
|
vertical: 8.0
|
||||||
|
);
|
||||||
|
static const EdgeInsetsGeometry suffixIconPadding = EdgeInsets.only(
|
||||||
|
right: 12.0
|
||||||
|
);
|
||||||
|
static const EdgeInsetsGeometry contentPadding = EdgeInsetsDirectional.symmetric(
|
||||||
|
horizontal: 12.0
|
||||||
|
);
|
||||||
|
|
||||||
|
static const BorderRadius borderRadius = BorderRadius.all(Radius.circular(10));
|
||||||
|
|
||||||
|
static const InputBorder border = OutlineInputBorder(
|
||||||
|
borderRadius: borderRadius,
|
||||||
|
borderSide: BorderSide(
|
||||||
|
width: borderWidth,
|
||||||
|
color: AppColor.colorInputBorderCreateMailbox,
|
||||||
|
)
|
||||||
|
);
|
||||||
|
static const InputBorder enableBorder = OutlineInputBorder(
|
||||||
|
borderRadius: borderRadius,
|
||||||
|
borderSide: BorderSide(
|
||||||
|
width: borderWidth,
|
||||||
|
color: AppColor.colorInputBorderCreateMailbox,
|
||||||
|
)
|
||||||
|
);
|
||||||
|
static const InputBorder focusedBorder = OutlineInputBorder(
|
||||||
|
borderRadius: borderRadius,
|
||||||
|
borderSide: BorderSide(
|
||||||
|
width: borderWidth,
|
||||||
|
color: AppColor.primaryColor,
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
static const TextStyle inputtedTextStyle = TextStyle(
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: FontWeight.w400,
|
||||||
|
color: Colors.black,
|
||||||
|
);
|
||||||
|
}
|
||||||
+102
@@ -0,0 +1,102 @@
|
|||||||
|
import 'package:core/presentation/resources/image_paths.dart';
|
||||||
|
import 'package:core/presentation/utils/responsive_utils.dart';
|
||||||
|
import 'package:core/presentation/views/text/text_field_builder.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:tmail_ui_user/features/base/isolate/background_isolate_binary_messenger/background_isolate_binary_messenger_mobile.dart';
|
||||||
|
import 'package:tmail_ui_user/features/email_recovery/presentation/model/email_recovery_field.dart';
|
||||||
|
import 'package:tmail_ui_user/features/email_recovery/presentation/styles/text_input_field/text_input_field_widget_styles.dart';
|
||||||
|
|
||||||
|
typedef OnTextSubmitted = void Function(String text)?;
|
||||||
|
|
||||||
|
class TextInputFieldWidget extends StatelessWidget {
|
||||||
|
final EmailRecoveryField field;
|
||||||
|
final ResponsiveUtils responsiveUtils;
|
||||||
|
final ImagePaths imagePaths;
|
||||||
|
final TextEditingController textEditingController;
|
||||||
|
final VoidCallback? onTap;
|
||||||
|
final MouseCursor? mouseCursor;
|
||||||
|
final FocusNode? currentFocusNode;
|
||||||
|
final FocusNode? nextFocusNode;
|
||||||
|
final OnTextSubmitted? onTextSubmitted;
|
||||||
|
|
||||||
|
const TextInputFieldWidget({
|
||||||
|
super.key,
|
||||||
|
required this.field,
|
||||||
|
required this.responsiveUtils,
|
||||||
|
required this.imagePaths,
|
||||||
|
required this.textEditingController,
|
||||||
|
this.onTap,
|
||||||
|
this.mouseCursor,
|
||||||
|
this.currentFocusNode,
|
||||||
|
this.nextFocusNode,
|
||||||
|
this.onTextSubmitted,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final title = SizedBox(
|
||||||
|
width: responsiveUtils.isMobile(context)
|
||||||
|
? null
|
||||||
|
: TextInputFieldWidgetStyles.titleWidth,
|
||||||
|
child: Text(
|
||||||
|
field.getTitle(context),
|
||||||
|
style: field.getTitleTextStyle(),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
final inputField = TextFieldBuilder(
|
||||||
|
controller: textEditingController,
|
||||||
|
readOnly: false,
|
||||||
|
mouseCursor: mouseCursor,
|
||||||
|
maxLines: 1,
|
||||||
|
textInputAction: TextInputAction.next,
|
||||||
|
textStyle: TextInputFieldWidgetStyles.inputtedTextStyle,
|
||||||
|
onTap: onTap,
|
||||||
|
onTextSubmitted: onTextSubmitted,
|
||||||
|
decoration: InputDecoration(
|
||||||
|
filled: true,
|
||||||
|
fillColor: Colors.white,
|
||||||
|
contentPadding: TextInputFieldWidgetStyles.contentPadding,
|
||||||
|
enabledBorder: TextInputFieldWidgetStyles.enableBorder,
|
||||||
|
border: TextInputFieldWidgetStyles.border,
|
||||||
|
focusedBorder: TextInputFieldWidgetStyles.focusedBorder,
|
||||||
|
hintText: field.getHintText(context),
|
||||||
|
hintStyle: field.getHintTextStyle(),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
return RawKeyboardListener(
|
||||||
|
focusNode: currentFocusNode ?? FocusNode(),
|
||||||
|
onKey: (event) {
|
||||||
|
if (event is RawKeyDownEvent && event.logicalKey == LogicalKeyboardKey.tab) {
|
||||||
|
nextFocusNode?.requestFocus();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
child: Padding(
|
||||||
|
padding: TextInputFieldWidgetStyles.padding,
|
||||||
|
child: responsiveUtils.isMobile(context)
|
||||||
|
? Column(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.start,
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: [
|
||||||
|
title,
|
||||||
|
const SizedBox(height: TextInputFieldWidgetStyles.spaceMobile),
|
||||||
|
inputField,
|
||||||
|
]
|
||||||
|
)
|
||||||
|
: SizedBox(
|
||||||
|
height: 44,
|
||||||
|
child: Row(
|
||||||
|
children: [
|
||||||
|
title,
|
||||||
|
const SizedBox(width: TextInputFieldWidgetStyles.space),
|
||||||
|
Expanded(
|
||||||
|
child: inputField,
|
||||||
|
)
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user