Flutter: TextFormPasswordField

Hello, everyone. I have written some app where i created auth screen. And have faced witth a problem of using password field. Flutter has no such field. Default TextFormField has no logic of this and to do this You can write some code and do some manipulations.

So, I had an idea to create custom widget with logic of showing/hiding password (it also can be not only password) clicking on right-sided icon. To do this I have analized code of TextFormField and created custom TextFormPasswordField on its basis. As you can see below I

final InputDecoration effectiveDecoration = (decoration ?? const InputDecoration())              .applyDefaults(Theme.of(field.context).inputDecorationTheme)          .copyWith(suffixIcon: IconButton(              
icon: toggleIcon ?? Icon(Icons.remove_red_eye), onPressed: () {
state.setState(() { state._obscured=!state._obscured;
}) );

Also I have added bool field to _TextFormPasswordFieldState:

class _TextFormPasswordFieldState extends FormFieldState<String> {  TextEditingController _controller;  
bool _obscured = true;

Next step is to use this field in base class:

return TextField(            
obscureText: state._obscured,

I hope it will be usefull for you. See full code on my github repo: https://github.com/mishatron/FlutterUtils/blob/master/TextFormPasswordField.dart

You can just copy this file to your project and use it as you want :)