문제 설명
플러터에서 양식 변수를 얻는 방법 (How to get form variables in flutter)
플러터에 양식이 있고 버튼을 누르면 사용자를 등록하는 포스트 함수를 호출하지만 양식의 변수에 액세스할 수 없습니다.
접근하고 싶습니다. 게시물을 작성하고 사용자를 등록하기 위한 사용자 이름, 이메일 및 비밀번호 입력 값
나는 그것을 다른 위젯으로 나눴습니다. 여기 코드:
양식
이것은 내 등록 화면에 있는 양식 위젯입니다.
Form(
key: _formKey,
child: SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
padding: EdgeInsets.symmetric(
horizontal: 40.0,
vertical: 60.0,
),
child: Column(
children: <Widget>[
new Container(
child: Image.asset(
'../../assets/logo‑feec.png',
width: 200,
),
padding: EdgeInsets.symmetric(vertical: 15),
alignment: Alignment.topCenter,
),
buildUsernameTF(),
SizedBox(
height: 30.0,
),
buildEmailTF(),
SizedBox(
height: 30.0,
),
buildPasswordTF(),
SizedBox(
height: 30.0,
),
buildConfirmPasswordTF(),
Container(
padding: EdgeInsets.symmetric(vertical: 25.0),
width: 200,
child: ElevatedButton.icon(
onPressed: () async {
if (_formKey.currentState.validate()) {
futureString = await resource.MyHttpService().registerUser(username, email, password);
/ Here we want to access the variables /
}
},
label: Text('Envia'),
icon: Icon(Icons.login),
style: ElevatedButton.styleFrom(
primary: Colors.white,
onPrimary: Colors.black,
shape: const BeveledRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(3))),
)),
),
Container(
padding: EdgeInsets.all(5),
width: 200,
child: TextButton(
onPressed: () => RouterConfig.router.navigateTo(
context,
"login",
transition: TransitionType.nativeModal,
),
child: Text("Inicia sessió"),
),
)
],
)),
)
</code></pre>
위젯
이것은 양식에서 호출되는 위젯입니다.
import 'package:flutter/material.dart';
import 'package:email_validator/email_validator.dart';
final TextEditingController _confirmPass = TextEditingController();
final TextEditingController _pass = TextEditingController();
Widget buildPasswordTF() {
return Container(
width: 600,
child: TextFormField(
controller: _pass,
obscureText: true,
decoration: const InputDecoration(
icon: Icon(Icons.lock),
hintText: 'Enter password',
labelText: 'Password *'),
validator: (password) {
if (password == null || password.isEmpty) {
return 'invalid Password';
}
return null;
},
),
);
}
Widget buildConfirmPasswordTF() {
return Container(
width: 600,
child: TextFormField(
controller: _confirmPass,
obscureText: true,
decoration: const InputDecoration(
icon: Icon(Icons.lock),
hintText: 'Enter password',
labelText: 'Password *'),
validator: (password) {
if (password == null || password.isEmpty) {
return 'Invalid Password';
}
if (password != _pass.text) {
return 'Passwords don\'t match';
}
return null;
},
),
);
}
Widget buildUsernameTF() {
return Container(
width: 600,
child: TextFormField(
decoration: const InputDecoration(
icon: Icon(Icons.person),
hintText: 'Enter Username',
labelText: 'Username'),
validator: (username) {
if (username == null || username.isEmpty) {
return 'Invalid Username';
}
return null;
},
),
);
}
Widget buildEmailTF() {
return Container(
width: 600,
child: TextFormField(
decoration: const InputDecoration(
icon: Icon(Icons.mail),
hintText: 'Enter email',
labelText: 'Email *'),
validator: (email) {
if (EmailValidator.validate(email) != true) {
return 'Invalid Email';
}
if (email == null || email.isEmpty) {
return 'Invalid Email';
}
return null;
},
),
);
}
</code></pre>
참조 솔루션
방법 1:
The answer to this will depend on your widget tree but ideally, you would be able to access the TextEditingControllers inside your TextFormFields.
You will need to create TextEditingControllers for each TextFormField:
TextEditingController emailController = TextEditingController();
And then when you submit, you need to access the controller and get the text.
onPressed: () async {
if (_formKey.currentState.validate()) {
futureString = await resource.MyHttpService().registerUser(username, email, password);
/* Here we want to access the variables */
print('Email text: ' + emailController.text);
}
},
(by Pol López、Joe Muller)
참조 문서