68 lines
2.1 KiB
Dart
68 lines
2.1 KiB
Dart
|
// 👁️ 비밀번호 입력창 - 오른쪽 눈 아이콘을 누르고 있는 동안만 평문으로 보여준다.
|
||
|
|
// 토글형(눌러서 계속 보기) 대신 "홀드"로 만든 이유: 손을 떼는 순간 바로 다시 가려져서
|
||
|
|
// 누가 옆에서 보더라도 짧게 확인만 하고 끝낼 수 있다.
|
||
|
|
import 'package:flutter/material.dart';
|
||
|
|
|
||
|
|
class HoldToRevealPasswordField extends StatefulWidget {
|
||
|
|
final TextEditingController controller;
|
||
|
|
final String labelText;
|
||
|
|
final String? hintText;
|
||
|
|
final IconData prefixIcon;
|
||
|
|
final bool autofocus;
|
||
|
|
final TextInputType? keyboardType;
|
||
|
|
final TextInputAction? textInputAction;
|
||
|
|
final ValueChanged<String>? onSubmitted;
|
||
|
|
|
||
|
|
const HoldToRevealPasswordField({
|
||
|
|
super.key,
|
||
|
|
required this.controller,
|
||
|
|
required this.labelText,
|
||
|
|
this.hintText,
|
||
|
|
this.prefixIcon = Icons.lock,
|
||
|
|
this.autofocus = false,
|
||
|
|
this.keyboardType,
|
||
|
|
this.textInputAction,
|
||
|
|
this.onSubmitted,
|
||
|
|
});
|
||
|
|
|
||
|
|
@override
|
||
|
|
State<HoldToRevealPasswordField> createState() =>
|
||
|
|
_HoldToRevealPasswordFieldState();
|
||
|
|
}
|
||
|
|
|
||
|
|
class _HoldToRevealPasswordFieldState extends State<HoldToRevealPasswordField> {
|
||
|
|
bool _revealed = false;
|
||
|
|
|
||
|
|
void _setRevealed(bool value) {
|
||
|
|
if (_revealed != value) setState(() => _revealed = value);
|
||
|
|
}
|
||
|
|
|
||
|
|
@override
|
||
|
|
Widget build(BuildContext context) {
|
||
|
|
return TextField(
|
||
|
|
controller: widget.controller,
|
||
|
|
obscureText: !_revealed,
|
||
|
|
autofocus: widget.autofocus,
|
||
|
|
keyboardType: widget.keyboardType,
|
||
|
|
textInputAction: widget.textInputAction,
|
||
|
|
onSubmitted: widget.onSubmitted,
|
||
|
|
decoration: InputDecoration(
|
||
|
|
labelText: widget.labelText,
|
||
|
|
hintText: widget.hintText,
|
||
|
|
border: const OutlineInputBorder(),
|
||
|
|
prefixIcon: Icon(widget.prefixIcon),
|
||
|
|
suffixIcon: GestureDetector(
|
||
|
|
behavior: HitTestBehavior.opaque,
|
||
|
|
onTapDown: (_) => _setRevealed(true),
|
||
|
|
onTapUp: (_) => _setRevealed(false),
|
||
|
|
onTapCancel: () => _setRevealed(false),
|
||
|
|
child: Icon(
|
||
|
|
_revealed ? Icons.visibility_rounded : Icons.visibility_off_rounded,
|
||
|
|
color: Colors.grey,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|