问题
Sign up form with flutter
I'm trying to build an app front end with flutter and it's my first time so I faced some bugs like this one: there is no way to edit my textformfield because I putted my form elements in a listview ! when keyboard appears to enter some text to the field it disappears in a second ! I need an immediat solution please :(
import 'package:flutter/material.dart';
import'package:dubai274_app/mobile_verif.dart';
import 'EnsureVisible.dart';
class SignUp extends StatefulWidget{
static String tag = 'Sign_up-page';
SignUp_Page createState() => SignUp_Page();
}
class SignUp_Page extends State<SignUp>{
List<DropdownMenuItem<String>> _Dropdownmenuitems;
String _statusSel;
List<DropdownMenuItem<String>> _getDropdownmenuitem(){
List<DropdownMenuItem<String>> items=new List();
items.add(new DropdownMenuItem(value:'Emirates',child: new Text('United Arab Emirates')));
items.add(new DropdownMenuItem(value:'Tun',child: new Text('Tunisia')));
return items;
}
void changeddropdowselecteditem(String selecteditem){
setState(() {
_statusSel=selecteditem;
});
}
@override
void initState() {
// TODO: implement initState
//listViewController=new ScrollController().addListener(_scrollListener);
_Dropdownmenuitems=_getDropdownmenuitem();
_statusSel=_Dropdownmenuitems[0].value;
}
@override
Widget build(BuildContext context) {
final scaffoldKey = GlobalKey<ScaffoldState>();
final formKey = GlobalKey<FormState>();
final TextEditingController _controller = new TextEditingController();
final first_value=TextFormField(autofocus: false,
validator: (val) =>
val.length < 6 ? 'First name required' : null,
decoration: InputDecoration(
labelText: 'First Name',
hintText: 'First Name',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
),);
final family_value=TextFormField(autofocus: false,
decoration: InputDecoration(
labelText: 'Last Name',
hintText: 'Last Name',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
),);
final Nationality=new DropdownButton(items: _Dropdownmenuitems, value:_statusSel,onChanged: changeddropdowselecteditem);
final email_value=TextFormField(keyboardType: TextInputType.emailAddress,
autofocus: false,
decoration: InputDecoration(
labelText: 'Email',
hintText: 'Email',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
),);
final password=Column(children: <Widget>[ TextFormField(autofocus: false,
obscureText: true,
decoration: InputDecoration(
labelText: 'Password',
hintText: 'Password',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),)), Text('Min 8 characters with at least one special character')]);
void _performsignup() {
final snackbar = SnackBar(
content: Text('Email: $email, password: $password'),
);
scaffoldKey.currentState.showSnackBar(snackbar);
}
void _submit() {
final form = formKey.currentState;
if (form.validate()) {
form.save();
Navigator.push(
context,
MaterialPageRoute(builder: (context) => MobileVerif()),
);
_performsignup();
}
}
final forward_signedin=FloatingActionButton(tooltip: 'Go forward',
child: Icon(Icons.arrow_forward,color: Colors.white,size: 38.4,),
onPressed: (){_submit();},);
return MaterialApp(
title: 'Sign_Up_Page',
home: Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
title: const Text('Sign Up',style: TextStyle(color: Colors.blueAccent, fontSize: 25.0,fontWeight: FontWeight.bold),textAlign: TextAlign.center,),
centerTitle: true,
leading: IconButton(
tooltip: 'Previous choice',
icon: const Icon(Icons.arrow_back_ios),
onPressed: () { Navigator.pop(context);},
color: Colors.black,
iconSize: 20.0,
),
),
body: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage("assets/background.png"),
fit: BoxFit.cover,
),
),
child: new Form( key: formKey,
child: new Padding( padding: new EdgeInsets.all(40.0), child: ListView(
children: <Widget>[
first_value,
family_value,
Nationality,
email_value,
password,
new ListTile( title:forward_signedin,)],
)) )
),
),
);
}
}
回答1:
You have the following code in your build function:
final formKey = GlobalKey<FormState>();
This is the problem. You have to either make it static or move to
initState()
回答2:
I'm going to post my answer here, even though it is not exactly the same as problem as the OP.
I searched the internet high and low for this issue of the keyboard appearing and disappearing, and
1. this was the only SO question I found that describes the keyboard appear disappear issue, and
2. the other solutions out there, like @apc's answer and this github answer are all focused on the formKey being static and/or a GlobalKey, and that was definitely not the cause of my problem (having unchanging keys or re-created keys for my form, and/or it's fields, had no effect at all on the issue).
My specific problem involved a class AuthService with ChangeNotifier with a number of Future methods.
After literally days of trying different approaches I found that the only way that I could avoid the keyboard-appearing-and-instantly-disappearing-on-form-field-focus issue was to have the AuthService() be at the top level of my app, in runApp() :
void main() => runApp(
ChangeNotifierProvider<AuthService>(
child: TheWidgetThatIsMyAppAndHasAllBusinessLogicInIt(),
builder: (BuildContext context) {
return AuthService();
},
),
);
(Having the ChangeNotifierProvider anywhere else in the code has the keyboard disappear issue)
I've then had to get creative about how I structured my logic under this - because I only really care about the AuthService in certain parts of my application, but I'm very new to Flutter and it's all been good learning.
I don't know why this is, and I'd love to learn more, and I know I haven't spelled out my full situation.....
but I've spent literally days solving this, I needed to put my answer here to hopefully help others.
回答3:
I see that you have declared formkey inside build function.
It should be outside the build function.
Checkout here
来源：https://stackoverflow.com/questions/51320692/flutter-keyboard-disappears-immediately-when-editing-my-text-fields