How can I solve this TextField Underline issue? - flutter

Question

I have face a issue in flutter textfield , When I am trying to use underline property in my code - show some field good some issued.
How can I solve this issue, help me someone
Here is the issue :
This is my reuseable code :
import 'package:flutter/material.dart';
import '../../configs/appColors.dart';
class LoginSignUpFormField extends StatelessWidget {
const LoginSignUpFormField({
Key? key,
required this.labelText,
required this.icons,
this.controller,
}) : super(key: key);
final String? labelText;
final IconData icons;
final TextEditingController? controller;
#override
Widget build(BuildContext context) {
return TextField(
controller: controller,
autocorrect: true,
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.red),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green),
),
// enabledBorder: UnderlineInputBorder(
// borderSide: BorderSide(color: black45),
// ),
// focusedBorder: UnderlineInputBorder(
// borderSide: BorderSide(color: black45),
// ),
// border: UnderlineInputBorder(
// borderSide: BorderSide(color: black45),
// ),
hintText: labelText,
hintStyle: TextStyle(
color: black45,
fontSize: 15,
),
prefixIcon: Icon(
icons,
color: black45,
),
),
);
}
}
This is SignUp screen Code :
import 'package:duaredoctor_app/src/configs/appColors.dart';
import 'package:duaredoctor_app/src/configs/appUtils.dart';
import 'package:duaredoctor_app/src/pages/loginPage.dart';
import 'package:duaredoctor_app/src/widgets/formField/loginSignUpForm.dart';
import 'package:duaredoctor_app/src/widgets/kText.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class RegisterPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: ListView(
// physics: NeverScrollableScrollPhysics(),
children: [
FittedBox(
child: Container(
height: Get.height,
width: Get.width,
child: Stack(
clipBehavior: Clip.none,
children: [
Container(
alignment: Alignment.center,
height: 150,
width: Get.width,
color: green50,
child: KText(
text: 'REGISTER',
color: white,
fontSize: 30,
fontWeight: FontWeight.bold,
),
),
Positioned(
top: 130,
child: Container(
height: Get.height,
width: Get.width,
decoration: BoxDecoration(
color: white,
borderRadius: BorderRadius.circular(20),
),
child: Padding(
padding: paddingH10V10,
child: Column(
children: [
sizeH40,
LoginSignUpFormField(
labelText: 'Full name',
icons: Icons.person_outlined,
),
sizeH20,
LoginSignUpFormField(
labelText: 'Email',
icons: Icons.email_outlined,
),
sizeH20,
LoginSignUpFormField(
labelText: 'Phone',
icons: Icons.call_outlined,
),
sizeH20,
LoginSignUpFormField(
labelText: 'Password',
icons: Icons.lock_outline,
),
sizeH20,
LoginSignUpFormField(
labelText: 'Password',
icons: Icons.lock_outline,
),
sizeH30,
Container(
height: 40,
width: Get.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: greenDark,
),
child: Center(
child: KText(
text: 'Login',
fontSize: 17,
color: white,
),
),
),
sizeH30,
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: [
KText(
text: 'Already have an account?',
fontSize: 16,
color: black54,
),
InkWell(
onTap: () => Get.to(LoginPage()),
child: Padding(
padding: paddingH10,
child: KText(
text: 'Login',
fontWeight: FontWeight.bold,
fontSize: 17,
color:
Color.fromARGB(255, 75, 174, 255),
),
),
),
],
),
],
),
),
),
),
],
),
),
)
],
),
),
);
}
}

Answer 1

this is an example how to do it
TextField(
................
.....................
border: InputBorder.none,
)
make all border to InputBorder.none, that is (focusedErrorBorder,focusedBorder,enabledBorder,errorBorder,etc...)