The keyboard closes after being opened by clicking on the textfield of the dialogue box..
Actually, I want to set the valid text length to 10, but when I click on the text field, it automatically unfocuse.
I have used a code for doing this has been mentioned below.
import 'dart:ui';
import 'package:bonanza_flutter/Constants/constants.dart';
import 'package:bonanza_flutter/UIs/Dashboard/dashboard.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class AddNewMemberPage extends StatefulWidget {
@override
State<AddNewMemberPage> createState() => _AddNewMemberPageState();
}
class _AddNewMemberPageState extends State<AddNewMemberPage> {
@override
Widget build(BuildContext context) {
return Dialog(
insetPadding: EdgeInsets.all(35),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
elevation: 0.0,
backgroundColor: Colors.transparent,
child: dialogContent(context),
);
}
}
double t4Size = 14;
extension widgetExtension on _AddNewMemberPageState {
dialogContent(BuildContext context) {
GlobalKey<FormState> _formKey = GlobalKey();
TextEditingController addPanController = TextEditingController();
return SingleChildScrollView(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 3.3, sigmaY: 3.3),
child: Dialog(
insetPadding: EdgeInsets.only(top: 30, bottom: 30, left: 20, right: 20),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)),
// backgroundColor: skyBlue,
child: Container(
padding: EdgeInsets.only(top: 30, bottom: 30),
decoration: new BoxDecoration(
color: Colors.white,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 10.0,
offset: const Offset(0.0, 10.0),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Text(
"Add New Member",
style: TextStyle(
fontSize: tSize26,
color: skyBlue,
fontWeight: FontWeight.w500),
textAlign: TextAlign.center,
),
Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding:
const EdgeInsets.only(left: 20.0, right: 20, bottom: 4,top: 20),
child: Text(
"PAN Card",
style: TextStyle(
fontSize: tSize14,
color: darkGreyColor,
fontWeight: FontWeight.w500,
),
),
),
Padding(
padding: const EdgeInsets.only(
left: 20.0, right: 20, bottom: 20),
child: TextFormField(
onChanged: (value) {
if (value.length == 10) {
FocusScope.of(context).unfocus();
}
},
validator: (value) {
if (value!.length == 10) {
return null;
}
return "";
},
maxLength: 10,
textCapitalization: TextCapitalization.characters,
controller: addPanController,
cursorColor: Theme.of(context).cursorColor,
decoration: const InputDecoration(
counterText: "",
hintText: "Enter PAN number",
hintStyle: TextStyle(color: greyColor),
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: mediumGreyColor, width: 1.7),
),
contentPadding:
EdgeInsets.only(left: 12, right: 12, top: 12),
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: mediumGreyColor, width: 1.7),
),
prefixIcon: Icon(
Icons.verified_user_rounded,
color: greyColor,
),
),
),
)
],
),
),
Padding(
padding: const EdgeInsets.all(20.0),
child: Text(
"Note: PAN number should be connected to same phone number by which you currently sign in.",
style: TextStyle(
fontSize: tSize14,
color: greyColor,
),
textAlign: TextAlign.center,
),
),
Padding(
padding: const EdgeInsets.only(
top: 00.0, bottom: 4, left: 30, right: 30),
child: SizedBox(
height: 45,
width: MediaQuery.of(context).size.width,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: skyBlue, shadowColor: Colors.transparent),
onPressed: () {
Navigator.pop(context);
Navigator.push(
context,
(MaterialPageRoute(
builder: (context) => Dashboard())));
},
child: Text(
'Add Member',
style: TextStyle(
fontSize: tSize16,
),
),
),
),
),
],
)),
),
),
);
}
}
this is my on click fuction
showDialog(
useRootNavigator: true,
barrierDismissible: false,
barrierColor: skyBlue.withOpacity(0.4),
context: context,
builder: (BuildContext context) {
return AddNewMemberPage();
});
I discovered an issue with your _formKey.
Use the below code to fix your issue :
class AddNewMemberPage extends StatefulWidget {
const AddNewMemberPage({Key? key}) : super(key: key);
@override
State<AddNewMemberPage> createState() => _AddNewMemberPageState();
}
class _AddNewMemberPageState extends State<AddNewMemberPage> {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Dialog(
insetPadding: const EdgeInsets.all(35),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
elevation: 0.0,
backgroundColor: Colors.transparent,
child: dialogContent(
context,
_formKey,
),
);
}
}
double t4Size = 14;
dialogContent(BuildContext context, GlobalKey _key) {
TextEditingController addPanController = TextEditingController();
return SingleChildScrollView(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 3.3, sigmaY: 3.3),
child: Dialog(
insetPadding:
const EdgeInsets.only(top: 30, bottom: 30, left: 20, right: 20),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)),
// backgroundColor: skyBlue,
child: Container(
padding: const EdgeInsets.only(top: 30, bottom: 30),
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(10),
boxShadow: const [
BoxShadow(
color: Colors.black26,
blurRadius: 10.0,
offset: Offset(0.0, 10.0),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
const Text(
"Add New Member",
style: TextStyle(fontSize: 10, fontWeight: FontWeight.w500),
textAlign: TextAlign.center,
),
Form(
key: _key,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Padding(
padding: EdgeInsets.only(
left: 20.0, right: 20, bottom: 4, top: 20),
child: Text(
"PAN Card",
style: TextStyle(
fontWeight: FontWeight.w500,
),
),
),
Padding(
padding: const EdgeInsets.only(
left: 20.0, right: 20, bottom: 20),
child: TextFormField(
onChanged: (value) {
if (value.length == 10) {
FocusScope.of(context).unfocus();
}
},
validator: (value) {
if (value!.length == 10) {
return null;
}
return "";
},
maxLength: 10,
textCapitalization: TextCapitalization.characters,
controller: addPanController,
cursorColor: Theme.of(context).cursorColor,
decoration: const InputDecoration(
counterText: "",
hintText: "Enter PAN number",
hintStyle: TextStyle(color: Colors.red),
contentPadding:
EdgeInsets.only(left: 12, right: 12, top: 12),
prefixIcon: Icon(
Icons.verified_user_rounded,
),
),
),
)
],
),
),
const Padding(
padding: EdgeInsets.all(20.0),
child: Text(
"Note: PAN number should be connected to same phone number by which you currently sign in.",
style: TextStyle(),
textAlign: TextAlign.center,
),
),
Padding(
padding: const EdgeInsets.only(
top: 00.0, bottom: 4, left: 30, right: 30),
child: SizedBox(
height: 45,
width: MediaQuery.of(context).size.width,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
shadowColor: Colors.transparent),
onPressed: () {
Navigator.pop(context);
},
child: const Text(
'Add Member',
style: TextStyle(),
),
),
),
),
],
)),
),
),
);
}