Создайте повторно используемое поле пароля во флаттере с проверкой предварительного просмотра

Потребовалось 4 дня поиска, чтобы найти это, поэтому я делюсь этим с сообществом, кредит принадлежит X-Вэй.

Проблема:

Создание поля пароля во флаттере с проверкой предварительного просмотра, как показано ниже:

Решение:

• Определять StatefulWidget для нового widget названный PasswordField как показано ниже:

class PasswordField extends StatefulWidget { const PasswordField({ }); _PasswordFieldState createState() => new _PasswordFieldState();
} class _PasswordFieldState extends State<PasswordField> { Widget build(BuildContext context) { return TextFormField( );
}

• Определите необходимое widget параметр в StatefulWidget класс выше, как показано ниже:

const PasswordField({ this.fieldKey, this.maxLength, this.hintText, this.labelText, this.helperText, this.onSaved, this.validator, this.onFieldSubmitted, }); final Key fieldKey; final int maxLength; final String hintText; final String labelText; final String helperText; final FormFieldSetter<String> onSaved; final FormFieldValidator<String> validator; final ValueChanged<String> onFieldSubmitted;

В виджете State вернуть TextFormField у которого есть decoration: InputDecoration

в decoration: InputDecoration определить suffixIcon: GestureDetector у которого есть child: Icon а также onTap функция, которая меняет состояние, как показано ниже:

suffixIcon: GestureDetector( onTap: () { setState(() { _obscureText = !_obscureText; }); }, child: Icon(_obscureText ? Icons.visibility : Icons.visibility_off), ),

• Итак, полный StatefulWidget из нашего PasswordFieldстало как показано ниже password.dart:

import 'package:flutter/material.dart'; class PasswordField extends StatefulWidget { const PasswordField({ this.fieldKey, this.maxLength, this.hintText, this.labelText, this.helperText, this.onSaved, this.validator, this.onFieldSubmitted, }); final Key fieldKey; final int maxLength; final String hintText; final String labelText; final String helperText; final FormFieldSetter<String> onSaved; final FormFieldValidator<String> validator; final ValueChanged<String> onFieldSubmitted; _PasswordFieldState createState() => _PasswordFieldState();
} class _PasswordFieldState extends State<PasswordField> { bool _obscureText = true; Widget build(BuildContext context) { return TextFormField( key: widget.fieldKey, obscureText: _obscureText, maxLength: widget.maxLength ?? 8, onSaved: widget.onSaved, validator: widget.validator, onFieldSubmitted: widget.onFieldSubmitted, decoration: InputDecoration( border: const UnderlineInputBorder(), filled: true, hintText: widget.hintText, labelText: widget.labelText, helperText: widget.helperText, suffixIcon: GestureDetector( onTap: () { setState(() { _obscureText = !_obscureText; }); }, child: Icon(_obscureText ? Icons.visibility : Icons.visibility_off), ), ), ); }
}

• Вызовите этот виджет на своем экране, как и любой другой виджет, например:

child: PasswordField( ),

• Прежде чем вызывать этот дочерний элемент, вам необходимо определить следующее:

String _password; final _passwordFieldKey = GlobalKey<FormFieldState<String>>();

• Полный код для его вызова может быть таким:

import 'package:flutter/material.dart';
import 'package:myApp/password.dart'; class LoginPage extends StatefulWidget { _LoginPageState createState() => new _LoginPageState();
} class _LoginPageState extends State<LoginPage> { final GlobalKey<FormState> _formKey = GlobalKey<FormState>(); String _email, _password; final _passwordFieldKey = GlobalKey<FormFieldState<String>>(); Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), body: Form( key: _formKey, child: Column( children: <Widget>[TextFormField( validator: (input) { if(input.isEmpty){ return 'Provide an email'; } }, decoration: InputDecoration( labelText: 'Email' ), onSaved: (input) => _email = input, ), PasswordField( fieldKey: _passwordFieldKey, helperText: 'No more than 8 characters.', labelText: 'Password *', onSaved: (input) => _password = input, ), SizedBox(height: 24.0), RaisedButton( onPressed: signIn, child: Text('Sign in'), ),], ) ), ); } void signIn() async { if(_formKey.currentState.validate()){ _formKey.currentState.save(); print("email: $_email, password: $_password"); } }
}