Как получить значение TextField в флаттер
Привет, я создал экран регистрации в трепете. Я хочу получить электронную почту и пароль в onPressed из FlatButton.
Кто-нибудь знает, как это сделать в трепете?
Widget SignupPage() {
return new Scaffold(body: Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Colors.white,
image: DecorationImage(
colorFilter: new ColorFilter.mode(
Colors.black.withOpacity(0.05), BlendMode.dstATop),
image: AssetImage('assets/images/mountains.jpg'),
fit: BoxFit.cover,
),
),
child: new Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(100.0),
child: Center(
child: Icon(
Icons.headset_mic,
color: Colors.redAccent,
size: 50.0,
),
),
),
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"EMAIL",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'PLEASE ENTER YOUR EMAIL',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
Divider(
height: 24.0,
),
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"PASSWORD",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: '*********',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
Divider(
height: 24.0,
),
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"CONFIRM PASSWORD",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: '*********',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
Divider(
height: 24.0,
),
new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 20.0),
child: new FlatButton(
child: new Text(
"Already have an account?",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
textAlign: TextAlign.end,
),
onPressed: () => {},
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 50.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: Colors.redAccent,
onPressed: () => authHandler.handleSignInEmail(emailController.text, passwordController.text)
.then((FirebaseUser user) {
Navigator.push(context, new MaterialPageRoute(builder: (context) => HomePage()));
}).catchError((e) => print(e)),
child: new Container(
padding: const EdgeInsets.symmetric(
vertical: 20.0,
horizontal: 20.0,
),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: Text(
"SIGN UP",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
],
),
),
),
),
],
),
),
],
),
));
}
Ответы
Ответ 1
Создайте свой TextEditingController как глобальную переменную в своем классе State и установите его в свой виджет TextField.
TextEditingController emailController = new TextEditingController();
....
TextField(
controller: emailController,
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'PLEASE ENTER YOUR EMAIL',
hintStyle: TextStyle(color: Colors.grey),
),
)
Теперь вы можете получить значение, используя:
emailController.text
Вы можете получить больше информации здесь: https://flutter.dev/docs/cookbook/forms/retrieve-input
Ответ 2
Текстовое поле вызывает onChanged вызов onChanged всякий раз, когда пользователь меняет текст в поле. Если пользователь указывает, что они были введены в поле (например, нажав кнопку на мягкой клавиатуре), текстовое поле вызывает onSubmitted обратный вызов.
Используя эти обратные вызовы, мы можем установить instance variables и использовать эти переменные на onPress of submit.
Ответ 3
Сначала вы должны объявить TextEditingController глобально под вашим классом, как показано ниже:
TextEditingController textEditController = new TextEditingController();
Затем вы должны назначить его на ваш controller TextField как TextField ниже:
TextField(
controller: textEditController,
),
Теперь вы можете получить это значение методом нажатия кнопки, как показано ниже:
void testingMethod() {
print(textEditController.text);
}
Удачного кодирования.
Ответ 4
Вы можете использовать TextEditingController для получения текста или установки текста в TextField
TextEditingController tec;
@override
onInit() {
....
....
tec = new TextEditingController;
}
@override
dispose() {
tec.dispose();
}
Используйте его так
TextField(controller : tec)
void _myFunc() {
tec.text; //for getting text
tec.text = "my text"; //for setting text
}
Ответ 5
Вот полный пример
class SignInFormState extends State<SignInFormWidget> {
var usernameCtr = TextEditingController();
var passwordCtr = TextEditingController();
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(children: <Widget>[
TextFormField(
controller: usernameCtr,
decoration: InputDecoration( labelText: "Username"),
),
TextFormField(
controller: passwordCtr,
decoration: InputDecoration( labelText: "Password"),
),
RaisedButton(
child: Text("Submit"),
onPressed: (){
var username=usernameCtr.text;
var password=passwordCtr.text;
},
)
]),
);
}
}
Ответ 6
Предположим, вы хотите необработанный текст без маски. Как это будет сделано?
