TF-1884 Support RTL mode for TypeAheadFormField

(cherry picked from commit e375d87d5d485ecb717b1a8afee2b7bf741fbeac)
This commit is contained in:
dab246
2023-06-14 13:05:03 +07:00
committed by Dat H. Pham
parent 9064d95483
commit 5c3833b72f
6 changed files with 166 additions and 50 deletions
@@ -0,0 +1,110 @@
import 'package:core/utils/direction_utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart';
class TypeAheadFormFieldBuilder<T> extends StatefulWidget {
final TextDirection textDirection;
final Duration debounceDuration;
final SuggestionsCallback<T> suggestionsCallback;
final ItemBuilder<T> itemBuilder;
final SuggestionSelectionCallback<T> onSuggestionSelected;
final SuggestionsBoxDecoration suggestionsBoxDecoration;
final WidgetBuilder? noItemsFoundBuilder;
final bool hideOnEmpty;
final bool hideOnError;
final bool hideOnLoading;
final TextEditingController? controller;
final FocusNode? focusNode;
final ValueChanged<String>? onTextChange;
final ValueChanged<String>? onTextSubmitted;
final TextInputAction? textInputAction;
final bool autocorrect;
final List<String>? autofillHints;
final TextInputType keyboardType;
final InputDecoration decoration;
const TypeAheadFormFieldBuilder({
super.key,
required this.suggestionsCallback,
required this.itemBuilder,
required this.onSuggestionSelected,
this.suggestionsBoxDecoration = const SuggestionsBoxDecoration(),
this.textDirection = TextDirection.ltr,
this.debounceDuration = const Duration(milliseconds: 300),
this.decoration = const InputDecoration(),
this.noItemsFoundBuilder,
this.hideOnEmpty = false,
this.hideOnError = false,
this.hideOnLoading = false,
this.autocorrect = false,
this.keyboardType = TextInputType.text,
this.controller,
this.focusNode,
this.autofillHints,
this.textInputAction,
this.onTextChange,
this.onTextSubmitted,
});
@override
State<TypeAheadFormFieldBuilder<T>> createState() => _TypeAheadFormFieldBuilderState<T>();
}
class _TypeAheadFormFieldBuilderState<T> extends State<TypeAheadFormFieldBuilder<T>> {
late TextEditingController _controller;
late TextDirection _textDirection;
@override
void initState() {
_textDirection = widget.textDirection;
_controller = widget.controller ?? TextEditingController();
super.initState();
}
@override
Widget build(BuildContext context) {
return TypeAheadFormField<T>(
key: widget.key,
textFieldConfiguration: TextFieldConfiguration(
controller: widget.controller,
textInputAction: widget.textInputAction,
autocorrect: widget.autocorrect,
autofillHints: widget.autofillHints,
keyboardType: widget.keyboardType,
decoration: widget.decoration,
textDirection: _textDirection,
onChanged: (value) {
widget.onTextChange?.call(value);
if (value.isNotEmpty) {
final directionByText = DirectionUtils.getDirectionByEndsText(value);
if (directionByText != _textDirection) {
setState(() {
_textDirection = directionByText;
});
}
}
},
onSubmitted: widget.onTextSubmitted
),
debounceDuration: widget.debounceDuration,
suggestionsCallback: widget.suggestionsCallback,
itemBuilder: widget.itemBuilder,
onSuggestionSelected: widget.onSuggestionSelected,
suggestionsBoxDecoration: widget.suggestionsBoxDecoration,
noItemsFoundBuilder: widget.noItemsFoundBuilder,
hideOnEmpty: widget.hideOnEmpty,
hideOnError: widget.hideOnError,
hideOnLoading: widget.hideOnLoading,
);
}
@override
void dispose() {
if (widget.controller == null) {
_controller.dispose();
}
super.dispose();
}
}
+10 -2
View File
@@ -194,10 +194,10 @@ packages:
dependency: "direct main"
description:
name: flutter_keyboard_visibility
sha256: "86b71bbaffa38e885f5c21b1182408b9be6951fd125432cf6652c636254cef2d"
sha256: "4983655c26ab5b959252ee204c2fffa4afeb4413cd030455194ec0caa3b8e7cb"
url: "https://pub.dev"
source: hosted
version: "5.4.0"
version: "5.4.1"
flutter_keyboard_visibility_linux:
dependency: transitive
description:
@@ -259,6 +259,14 @@ packages:
description: flutter
source: sdk
version: "0.0.0"
flutter_typeahead:
dependency: "direct main"
description:
name: flutter_typeahead
sha256: f31211a8536f87908c3dcbdb88666e2f4d77f5f06c2b3a48eaad5599969ff32d
url: "https://pub.dev"
source: hosted
version: "4.6.0"
flutter_web_plugins:
dependency: transitive
description: flutter
+6
View File
@@ -73,6 +73,8 @@ dependencies:
# flutter_localizations depends on intl 0.17.0
intl: 0.17.0
flutter_typeahead: 4.6.0
dev_dependencies:
flutter_test:
sdk: flutter
@@ -83,6 +85,10 @@ dev_dependencies:
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
dependency_overrides:
flutter_keyboard_visibility: 5.4.1
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
@@ -1,5 +1,7 @@
import 'package:core/core.dart';
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/views/text/type_ahead_form_field_builder.dart';
import 'package:core/utils/platform_info.dart';
import 'package:flutter/material.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart';
import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
@@ -40,18 +42,16 @@ class IdentityInputWithDropListFieldBuilder extends StatelessWidget {
fontWeight: FontWeight.normal,
color: AppColor.colorContentEmail)),
const SizedBox(height: 8),
TypeAheadFormField<EmailAddress>(
textFieldConfiguration: TextFieldConfiguration(
focusNode: focusNode,
controller: editingController,
textInputAction: TextInputAction.done,
decoration: (IdentityInputDecorationBuilder()
..setContentPadding(const EdgeInsets.symmetric(
vertical: BuildUtils.isWeb ? 16 : 12,
horizontal: 12))
..setErrorText(_error))
.build()
),
TypeAheadFormFieldBuilder<EmailAddress>(
focusNode: focusNode,
controller: editingController,
textInputAction: TextInputAction.done,
decoration: (IdentityInputDecorationBuilder()
..setContentPadding(const EdgeInsets.symmetric(
vertical: PlatformInfo.isWeb ? 16 : 12,
horizontal: 12))
..setErrorText(_error))
.build(),
debounceDuration: const Duration(milliseconds: 500),
suggestionsCallback: (pattern) async {
if (onChangeInputSuggestionAction != null) {
@@ -1,6 +1,7 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/resources/image_paths.dart';
import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:core/presentation/views/text/type_ahead_form_field_builder.dart';
import 'package:flutter/material.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart';
import 'package:get/get.dart';
@@ -106,32 +107,26 @@ abstract class BaseLoginView extends GetWidget<LoginController> {
Widget buildUserNameInput(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(bottom: 24, right: 24, left: 24),
child: TypeAheadFormField<RecentLoginUsername>(
child: TypeAheadFormFieldBuilder<RecentLoginUsername>(
key: const Key('login_username_input'),
textFieldConfiguration: TextFieldConfiguration(
controller: loginController.usernameInputController,
onChanged: (value) => loginController.setUserNameText(value),
textInputAction: TextInputAction.next,
autocorrect: false,
autofillHints: [AutofillHints.email],
keyboardType: TextInputType.emailAddress,
decoration: (LoginInputDecorationBuilder()
..setLabelText(AppLocalizations.of(context).email)
..setHintText(AppLocalizations.of(context).email))
.build(),
),
controller: loginController.usernameInputController,
onTextChange: loginController.setUserNameText,
textInputAction: TextInputAction.next,
autocorrect: false,
autofillHints: const [AutofillHints.email],
keyboardType: TextInputType.emailAddress,
decoration: (LoginInputDecorationBuilder()
..setLabelText(AppLocalizations.of(context).email)
..setHintText(AppLocalizations.of(context).email))
.build(),
debounceDuration: const Duration(milliseconds: 300),
suggestionsCallback: (pattern) async {
return await loginController.getAllRecentLoginUsernameAction(pattern);
},
itemBuilder: (context, loginUsername) =>
RecentItemTileWidget(loginUsername, imagePath: imagePaths),
suggestionsCallback: loginController.getAllRecentLoginUsernameAction,
itemBuilder: (context, loginUsername) => RecentItemTileWidget(loginUsername, imagePath: imagePaths),
onSuggestionSelected: (recentUsername) {
loginController.setUsername(recentUsername.username);
passFocusNode.requestFocus();
},
suggestionsBoxDecoration: const SuggestionsBoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(14))),
suggestionsBoxDecoration: const SuggestionsBoxDecoration(borderRadius: BorderRadius.all(Radius.circular(14))),
noItemsFoundBuilder: (context) => const SizedBox(),
hideOnEmpty: true,
hideOnError: true,
+12 -15
View File
@@ -1,4 +1,5 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/views/text/type_ahead_form_field_builder.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart';
@@ -135,27 +136,23 @@ class LoginView extends BaseLoginView {
Widget _buildUrlInput(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(right: 24, left: 24, bottom: 24),
child: TypeAheadFormField<RecentLoginUrl>(
textFieldConfiguration: TextFieldConfiguration(
controller: loginController.urlInputController,
textInputAction: TextInputAction.next,
keyboardType: TextInputType.url,
onSubmitted: (value) => controller.handleNextInUrlInputFormPress(),
decoration: (LoginInputDecorationBuilder()
..setLabelText(AppLocalizations.of(context).prefix_https)
..setPrefixText(AppLocalizations.of(context).prefix_https))
.build()
),
child: TypeAheadFormFieldBuilder<RecentLoginUrl>(
controller: loginController.urlInputController,
textInputAction: TextInputAction.next,
keyboardType: TextInputType.url,
onTextSubmitted: (value) => controller.handleNextInUrlInputFormPress(),
decoration: (LoginInputDecorationBuilder()
..setLabelText(AppLocalizations.of(context).prefix_https)
..setPrefixText(AppLocalizations.of(context).prefix_https))
.build(),
debounceDuration: const Duration(milliseconds: 300),
suggestionsCallback: (pattern) async {
loginController.formatUrl(pattern);
return loginController.getAllRecentLoginUrlAction(pattern);
},
itemBuilder: (context, loginUrl) =>
RecentItemTileWidget(loginUrl, imagePath: imagePaths),
itemBuilder: (context, loginUrl) => RecentItemTileWidget(loginUrl, imagePath: imagePaths),
onSuggestionSelected: (loginUrl) => controller.formatUrl(loginUrl.url),
suggestionsBoxDecoration: const SuggestionsBoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(14))),
suggestionsBoxDecoration: const SuggestionsBoxDecoration(borderRadius: BorderRadius.all(Radius.circular(14))),
noItemsFoundBuilder: (context) => const SizedBox(),
hideOnEmpty: true,
hideOnError: true,