This is my input.dart
class Input extends StatelessWidget {
final VoidCallback? onPressed;
final InputParameter param;
const Input({super.key, required this.onPressed, required this.param});
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
return SizedBox(
width: param.size?.width ?? constraints.maxWidth,
child: Container(
height: param.size?.height ?? 48,
padding: EdgeInsets.only(
left: param.padding[0],
right: param.padding[1]
),
decoration: BoxDecoration(
color: !(param.static ?? false)
? param.color ?? Color(0xFFE2E2E2)
: AppColors.transparentMain,
border: param.withBorder ? Border.all(
width: 1,
color: param.borderColor ?? Colors.transparent
) : null,
borderRadius: BorderRadius.circular(param.borderRadius ?? 10),
boxShadow: [
BoxShadow(
offset: const Offset(1, 1),
color: param.shadow ?? false ? Colors.black12 : Colors.transparent,
spreadRadius: 2,
blurRadius: 2
)
]
),
child: Container(
padding: param.expands ?? false ? const EdgeInsets.symmetric(vertical: 10) : null,
height: param.inputFieldSize?.height ?? 48,
child: Align(
alignment: Alignment.centerLeft,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
if(param.icon != null)
SizedBox(
width: param.iconSize?.width ?? 20,
height: param.iconSize?.height ?? 20,
child: Center(
child: Icon(
param.icon ?? Icons.search,
color: param.iconColor ?? Colors.grey
)
),
),
const SizedBox(width: 5),
Expanded(
child: TextField(
expands: param.expands ?? false,
minLines: param.expands ?? false ? null : 1,
maxLines: param.expands ?? false ? null : 1,
autofocus: false,
enabled: !(param.static ?? false),
cursorHeight: param.cursorHeight ?? 23,
cursorWidth: 1.5,
cursorColor: Colors.black,
focusNode: param.node,
controller: param.controller,
textInputAction: param.textInputAction,
obscureText: param.obscure ?? false,
onEditingComplete: param.onEditingComplete,
style: AppTextStyle.mainStyle(
fontSize: param.fontSize ?? 13.5,
height: 1.5,
fontWeight: FontWeight.w500,
color: param.fontColor ?? Colors.black,
decoration: TextDecoration.none
),
decoration: InputDecoration(
contentPadding: const EdgeInsets.only(bottom: 2, top: 0),
alignLabelWithHint: true,
isDense: true,
focusColor: param.fontColor,
hintStyle: AppTextStyle.mainStyle(
color: param.hintColor ?? Colors.grey,
fontSize: param.fontSize ?? 13.5,
fontWeight: FontWeight.w500,
height: 1.5,
),
border: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
hintText: param.name.tr,
),
onSubmitted: (value) async {
(onPressed ?? (() {}))();
},
keyboardType: param.isNumber ?? false
? TextInputType.number
: TextInputType.text,
),
),
const SizedBox(width: 10),
if(param.isLoading ?? true)
const SizedBox(
height: 20,
width: 20,
child: CircularProgressIndicator(
color: Colors.black26,
)
),
],
)
),
),
),
);
},
);
}
}
And this is my login field:
class LoginPage extends StatefulWidget {
LoginPage({super.key});
@override
State<LoginPage> createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
final FocusNode usernameNode = FocusNode();
final FocusNode passwordNode = FocusNode();
@override
Widget build(BuildContext context) {
return Consumer<LoginState>(
builder: (context, state, child) {
debugPrint("D543 rebuild ...");
return WillPopScope(
onWillPop: () async {
debugPrint("SS75465E65 pop detected");
return false;
},
child: Scaffold(
backgroundColor: Colors.white,
body: Form(
key: _formKey,
child: LayoutBuilder(
builder: (context, constraints) {
double deviceWidth = constraints.maxWidth;
double deviceHeight = constraints.maxHeight;
double topPadding = MediaQuery.of(context).padding.top;
double defaultWidth = deviceWidth - 70;
return Container(
height: deviceHeight,
width: max(/*min(deviceWidth, 450)*/ deviceWidth, 300),
color: Colors.white,
child: SingleChildScrollView(
child: SizedBox(
height: max(deviceHeight, 600),
width: max(deviceWidth, 300),
child: Stack(
children: [
Container(
constraints: BoxConstraints(
maxWidth: max( deviceWidth, 300),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const SizedBox(height: 15),
Padding(
padding: const EdgeInsets.symmetric(vertical: 5.5),
child: Container(
height: 43,
width: defaultWidth,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 1,
color: Color(0xFF000080)
)
)
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
color: Colors.white,
width: 14,
child: Image.asset(
"assets/ic_username.png",
fit: BoxFit.fitWidth
)
),
Input(
param: InputParameter(
name: "Username",
id: 0,
padding: [0, 0],
fontSize: 15,
color: Colors.white,
size: Size(defaultWidth - 20, 40),
node: usernameNode,
controller: state.usernameController,
isRed: false,
static: false,
),
onPressed: () {
//will be implemented soon
},
)
],
)
),
),
const SizedBox(height: 3),
Padding(
padding: const EdgeInsets.symmetric(vertical: 5.5),
child: Container(
height: 43,
width: defaultWidth,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 1,
color: Color(0xFF000080)
)
)
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
color: Colors.white,
width: 14,
child: Image.asset(
"assets/ic_password.png",
fit: BoxFit.fitWidth
)
),
Input(
param: InputParameter(
name: "Password",
id: 1,
padding: [0, 0],
fontSize: 15,
color: Colors.white,
size: Size(defaultWidth - 20, 40),
node: passwordNode,
controller: state.passwordController,
obscure: true,
isRed: false,
static: false,
),
onPressed: () {
//will be implemented soon
},
)
],
)
),
),
...
The username works properly, but the password field loses its focus after I enter a first letter. If the obscure set to false, it works properly.
I thought that it is because of the Flutter Build. I find this issue in my old laptop, and when I use my new laptop to build the FLutter app first time, it works properly, but after a lot of build in the same laptop, the issue is appearing again. So I tried to clear all the build, Flutter Build, and .graddle, I also tried to clean pub cache and rebuild it. But the issue persists.
Can anyone let me know what is the main cause of this issue? Thank you...
This is my input.dart
class Input extends StatelessWidget {
final VoidCallback? onPressed;
final InputParameter param;
const Input({super.key, required this.onPressed, required this.param});
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
return SizedBox(
width: param.size?.width ?? constraints.maxWidth,
child: Container(
height: param.size?.height ?? 48,
padding: EdgeInsets.only(
left: param.padding[0],
right: param.padding[1]
),
decoration: BoxDecoration(
color: !(param.static ?? false)
? param.color ?? Color(0xFFE2E2E2)
: AppColors.transparentMain,
border: param.withBorder ? Border.all(
width: 1,
color: param.borderColor ?? Colors.transparent
) : null,
borderRadius: BorderRadius.circular(param.borderRadius ?? 10),
boxShadow: [
BoxShadow(
offset: const Offset(1, 1),
color: param.shadow ?? false ? Colors.black12 : Colors.transparent,
spreadRadius: 2,
blurRadius: 2
)
]
),
child: Container(
padding: param.expands ?? false ? const EdgeInsets.symmetric(vertical: 10) : null,
height: param.inputFieldSize?.height ?? 48,
child: Align(
alignment: Alignment.centerLeft,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
if(param.icon != null)
SizedBox(
width: param.iconSize?.width ?? 20,
height: param.iconSize?.height ?? 20,
child: Center(
child: Icon(
param.icon ?? Icons.search,
color: param.iconColor ?? Colors.grey
)
),
),
const SizedBox(width: 5),
Expanded(
child: TextField(
expands: param.expands ?? false,
minLines: param.expands ?? false ? null : 1,
maxLines: param.expands ?? false ? null : 1,
autofocus: false,
enabled: !(param.static ?? false),
cursorHeight: param.cursorHeight ?? 23,
cursorWidth: 1.5,
cursorColor: Colors.black,
focusNode: param.node,
controller: param.controller,
textInputAction: param.textInputAction,
obscureText: param.obscure ?? false,
onEditingComplete: param.onEditingComplete,
style: AppTextStyle.mainStyle(
fontSize: param.fontSize ?? 13.5,
height: 1.5,
fontWeight: FontWeight.w500,
color: param.fontColor ?? Colors.black,
decoration: TextDecoration.none
),
decoration: InputDecoration(
contentPadding: const EdgeInsets.only(bottom: 2, top: 0),
alignLabelWithHint: true,
isDense: true,
focusColor: param.fontColor,
hintStyle: AppTextStyle.mainStyle(
color: param.hintColor ?? Colors.grey,
fontSize: param.fontSize ?? 13.5,
fontWeight: FontWeight.w500,
height: 1.5,
),
border: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
hintText: param.name.tr,
),
onSubmitted: (value) async {
(onPressed ?? (() {}))();
},
keyboardType: param.isNumber ?? false
? TextInputType.number
: TextInputType.text,
),
),
const SizedBox(width: 10),
if(param.isLoading ?? true)
const SizedBox(
height: 20,
width: 20,
child: CircularProgressIndicator(
color: Colors.black26,
)
),
],
)
),
),
),
);
},
);
}
}
And this is my login field:
class LoginPage extends StatefulWidget {
LoginPage({super.key});
@override
State<LoginPage> createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
final FocusNode usernameNode = FocusNode();
final FocusNode passwordNode = FocusNode();
@override
Widget build(BuildContext context) {
return Consumer<LoginState>(
builder: (context, state, child) {
debugPrint("D543 rebuild ...");
return WillPopScope(
onWillPop: () async {
debugPrint("SS75465E65 pop detected");
return false;
},
child: Scaffold(
backgroundColor: Colors.white,
body: Form(
key: _formKey,
child: LayoutBuilder(
builder: (context, constraints) {
double deviceWidth = constraints.maxWidth;
double deviceHeight = constraints.maxHeight;
double topPadding = MediaQuery.of(context).padding.top;
double defaultWidth = deviceWidth - 70;
return Container(
height: deviceHeight,
width: max(/*min(deviceWidth, 450)*/ deviceWidth, 300),
color: Colors.white,
child: SingleChildScrollView(
child: SizedBox(
height: max(deviceHeight, 600),
width: max(deviceWidth, 300),
child: Stack(
children: [
Container(
constraints: BoxConstraints(
maxWidth: max( deviceWidth, 300),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const SizedBox(height: 15),
Padding(
padding: const EdgeInsets.symmetric(vertical: 5.5),
child: Container(
height: 43,
width: defaultWidth,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 1,
color: Color(0xFF000080)
)
)
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
color: Colors.white,
width: 14,
child: Image.asset(
"assets/ic_username.png",
fit: BoxFit.fitWidth
)
),
Input(
param: InputParameter(
name: "Username",
id: 0,
padding: [0, 0],
fontSize: 15,
color: Colors.white,
size: Size(defaultWidth - 20, 40),
node: usernameNode,
controller: state.usernameController,
isRed: false,
static: false,
),
onPressed: () {
//will be implemented soon
},
)
],
)
),
),
const SizedBox(height: 3),
Padding(
padding: const EdgeInsets.symmetric(vertical: 5.5),
child: Container(
height: 43,
width: defaultWidth,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 1,
color: Color(0xFF000080)
)
)
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
color: Colors.white,
width: 14,
child: Image.asset(
"assets/ic_password.png",
fit: BoxFit.fitWidth
)
),
Input(
param: InputParameter(
name: "Password",
id: 1,
padding: [0, 0],
fontSize: 15,
color: Colors.white,
size: Size(defaultWidth - 20, 40),
node: passwordNode,
controller: state.passwordController,
obscure: true,
isRed: false,
static: false,
),
onPressed: () {
//will be implemented soon
},
)
],
)
),
),
...
The username works properly, but the password field loses its focus after I enter a first letter. If the obscure set to false, it works properly.
I thought that it is because of the Flutter Build. I find this issue in my old laptop, and when I use my new laptop to build the FLutter app first time, it works properly, but after a lot of build in the same laptop, the issue is appearing again. So I tried to clear all the build, Flutter Build, and .graddle, I also tried to clean pub cache and rebuild it. But the issue persists.
Can anyone let me know what is the main cause of this issue? Thank you...
Share Improve this question edited Mar 25 at 17:02 Abdullah Azzam asked Mar 25 at 16:51 Abdullah AzzamAbdullah Azzam 231 silver badge5 bronze badges1 Answer
Reset to default 0I have two answers for this, I hope it helps.
In your input.dart your input border it is relay on property
param.withBorder, in your case make sure to put it to trueIn your input.dart you set the container height with
param.size?.height ?? 48and in your login file you create input into a Container with height only 43, logically you may put the height of container in login file at least 49.