I'm trying to move my TextFormField
logic to flutter hooks so I have password field where I want implement obscure
text. So on tap of button it should hide/unhide the text. Now I using setState()
in the hooks to do that but it rebuilds the whole UI and moves focus to first field because I have set autoFocus for first field so How I can make sure the it rebuilds only that specific TextFormField.
My custom hooks file,
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
enum Index { email, password }
TextFormField useTextFormField(Index index) {
return use(_CustomHook(index: index));
}
class _CustomHook extends Hook<TextFormField> {
final Index index;
_CustomHook({@required this.index});
@override
_CustomHookState createState() => _CustomHookState();
}
class _CustomHookState extends HookState<TextFormField, _CustomHook> {
Index index;
bool obscure = false;
@override
TextFormField build(BuildContext context) {
return TextFormField(
decoration: InputDecoration(
hintText: 'some help',
suffixIcon: IconButton(
onPressed: () {
setState(() {
obscure = !obscure; //<--- here
});
},
icon: Icon(obscure ? Icons.visibility_off : Icons.visibility),
),
),
validator: (text) {
if (text.isEmpty) return 'enter something';
return null;
},
obscureText: index == Index.email ? false : obscure,
);
}
}
If anyone can help?