update passowrd field to have toggle

This commit is contained in:
2024-04-06 12:14:46 +02:00
parent 92fb204bf4
commit 8a69cb5e86
15 changed files with 154 additions and 75 deletions

View File

@@ -0,0 +1,69 @@
import 'package:flutter/material.dart';
class MyPassField extends StatefulWidget {
final controller;
final String hintText;
const MyPassField({
super.key,
required this.controller,
required this.hintText,
});
@override
State<MyPassField> createState() => _MyPassFieldState();
}
class _MyPassFieldState extends State<MyPassField> {
final textFieldFocusNode = FocusNode();
bool _obscured = true;
void _toggleObscured() {
setState(() {
_obscured = !_obscured;
if (textFieldFocusNode.hasPrimaryFocus)
return; // If focus is on text field, dont unfocus
textFieldFocusNode.canRequestFocus =
false; // Prevents focus if tap on eye
});
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: TextField(
controller: widget.controller,
obscureText: _obscured,
decoration: InputDecoration(
fillColor: Colors.white,
filled: true,
hintText: widget.hintText,
hintStyle: TextStyle(color: Colors.blueGrey[400]),
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blueAccent,
width: 2.0,
),
),
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue),
),
suffixIcon: Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 4, 0),
child: GestureDetector(
onTap: _toggleObscured,
child: Icon(
_obscured
? Icons.visibility_rounded
: Icons.visibility_off_rounded,
size: 24,
color: Colors.blue,
),
),
),
),
),
);
}
}