Floating input icon in PlatformTextFormField isn't behaving properly - flutter

Question

The widget is from the package 'flutter_platform_widgets'
As you can see, the floating icon that shows input location doesn't go behind app bar when screen is scrolled down. I need to either get rid of it completely or at least have it disappear properly. I tried dismissing the keyboard on screen drag, but it gets a bit annoying as all the content fits on one screen, it isn't actually scrollable (scrollview necessary because there is content behind the keyboard and I was getting pixel overflow errors without it).
Some code if that helps
EDIT:
This is the widget seen on the first two screenshots.
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(top: 16.0),
child: Form(
key: widget.formKey,
child: SingleChildScrollView(
// keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
child: Column(
children: [
EmailTextFormField(
controller: widget.emailController,
),
PasswordTextFormField(
labelText: AppLocalizations.of(context)!.password,
controller: widget.passwordController,
),
PasswordTextFormField(
labelText: AppLocalizations.of(context)!.confirmPassword,
controller: widget.passwordConfirmationController,
password: widget.passwordController,
),
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: Button(
text: AppLocalizations.of(context)!.next,
onPressed: () {
FocusScope.of(context).unfocus();
_validateLoginInformation();
},
),
),
,
SizedBox(
height: MediaQuery.of(context).size.height / 2.75,
),
const TermsOfUse(),
],
),
),
),
);
}
This is the emailtextformfield. The code for passwordtextformfield is nearly identical.
#override
Widget build(BuildContext context) {
return Row(
children: [
Padding(
padding: const EdgeInsets.only(right: 16.0),
child: Icon(
Icons.mail_outline,
color: iconColor,
),
),
Expanded(
child: AutofillGroup(
child: PlatformTextFormField(
hintText: AppLocalizations.of(context)!.email,
controller: widget.controller,
focusNode: _focusNode,
keyboardType: TextInputType.emailAddress,
textInputAction: TextInputAction.next,
autofillHints: const [AutofillHints.email],
onFieldSubmitted: (_) => _focusNode.nextFocus(),
validator: (email) {
if (email == null || email.isEmpty) {
return AppLocalizations.of(context)!.emailIsNull;
} else if (!EmailValidator.validate(email)) {
return AppLocalizations.of(context)!.emailInvalid;
} else {
return null;
}
},
material: (_, __) => MaterialTextFormFieldData(
decoration: InputDecoration(
floatingLabelBehavior: FloatingLabelBehavior.auto,
labelText: AppLocalizations.of(context)!.email,
suffixIcon: widget.controller.text.isNotEmpty
? ClearTextFieldIcon(controller: widget.controller)
: null,
),
),
cupertino: (_, __) => CupertinoTextFormFieldData(
textInputAction: TextInputAction.next,
focusNode: _focusNode,
decoration: BoxDecoration(
color: CupertinoColors.extraLightBackgroundGray,
borderRadius: BorderRadius.circular(10.0),
),
),
),
),
),
],
);
}

Answer 1

I think it is not possible to remove it. But you can make it invisible by setting its color to transparent.
You can set the color globally:
textSelectionTheme: const TextSelectionThemeData(
selectionHandleColor: Colors.transparent,
),
main.dart
#override
Widget build(BuildContext context) => MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
textSelectionTheme: const TextSelectionThemeData(
selectionHandleColor: Colors.transparent,
),
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
I also tried to set it locally using the Theme widget, but it seems buggy.
You can also access the complete source code through GitHub.
If you have further questions, please don't hesitate to write in the comments.