🐛 TextBox Obscure Text Icon

[AnPTdev]

Describe the bug
When using the textbox and obscure text, an icon will apear but notthing happen when clicking on the icon

Screenshots

[bdlukaa]

Can you provide a reproducible code? Do you update the obscure property when the button is pressed? Have you tried PasswordBox?

[AnPTdev]

Hi, the "Icon" wasn't by me, it's was a default one (?) when i set obscureText to true? the reason why i didn't use "PasswordBox" is because it doesn't give me the give me to change the decoration.

Here's the code for the TextBox
TextBox(
onSubmitted: (value) {
controller.checkLogin();
},
obscureText: true,
controller: controller.passwordController,
foregroundDecoration: BoxDecoration(
border:
Border.all(color: Colors.transparent)),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5)),
prefix: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Icon(FluentIcons.fingerprint),
),
placeholder: password,
),

---

This is what if i changed it to passwordBox

---

FluentUI is ^4.5.0

[bdlukaa]

Sorry, but the TextBox doesn't add any automatic suffixes, even if obscureText is true

[AnPTdev]

where did you find this, i'm using FluentUI ^4.5.1

here's the codebase:

import 'package:affiliate_auto_tagging_frontend/controllers/login/login_controller.dart';
import 'package:fluent_ui/fluent_ui.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../constants/constants.dart';

class LoginScreen extends GetView<LoginController> {
  const LoginScreen({super.key});
  @override
  Widget build(BuildContext context) {
    return FluentTheme(
      data: FluentThemeData(scaffoldBackgroundColor: primaryColor),
      child: ScaffoldPage(
        padding: EdgeInsets.zero,
        content: ConstrainedBox(
          constraints: BoxConstraints.expand(),
          child: SingleChildScrollView(
            padding: EdgeInsets.symmetric(vertical: 80.h),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Image.asset(
                  logoImage,
                  height: 51,
                  width: 100,
                ),
                padding(52.h),
                Text(
                  textAlign: TextAlign.center,
                  signUpTitle.toUpperCase(),
                  style: title40Medium(color: neutralWhite),
                ),
                padding(24.h),
                Text(
                  signUpSubTitle,
                  textAlign: TextAlign.center,
                  style: title28Regular(color: neutralWhite),
                ),
                padding(24.h),
                Obx(
                  () => Container(
                    width: 440,
                    height: 388,
                    padding: const EdgeInsets.symmetric(
                        vertical: 60, horizontal: 40),
                    decoration: BoxDecoration(
                        color: neutralWhite,
                        borderRadius: BorderRadius.circular(4)),
                    child: Column(
                      children: [
                        GetInputField(
                            label: email, placeholder: signUpEmailPlaceHolder),
                        padding(24),
                        GetInputField(
                          label: password,
                          placeholder: signUpPasswordPlaceHolder,
                          isPassword: true,
                        ),
                        padding(40),
                        SizedBox(
                          width: 360,
                          height: 40,
                          child: FilledButton(
                              style: ButtonStyle(
                                  foregroundColor: ButtonState.all(
                                      controller.btnDisabled.value
                                          ? secondary500Color.withOpacity(.2)
                                          : neutralWhite),
                                  textStyle: ButtonState.all(button14Bold()),
                                  backgroundColor: ButtonState.all(
                                      controller.btnDisabled.value
                                          ? secondaryBackgroundColor
                                          : secondary500Color)),
                              child: Center(
                                child: Text(signUp),
                              ),
                              onPressed:
                                  controller.btnDisabled.value ? null : () {}),
                        )
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget padding(size) {
    return SizedBox(height: size);
  }
}

class GetInputField extends StatefulWidget {
  final String label;
  final String placeholder;
  final bool? isPassword;
  const GetInputField(
      {super.key,
      required this.label,
      required this.placeholder,
      this.isPassword});

  @override
  State<GetInputField> createState() => _GetInputFieldState();
}

class _GetInputFieldState extends State<GetInputField> {
  FocusNode focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    focusNode.addListener(() {
      setState(() {});
    });
  }

  @override
  void dispose() {
    focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return InfoLabel(
      labelStyle: body16Regular(),
      label: widget.label,
      child: Container(
        constraints: BoxConstraints.tightFor(width: 360, height: 40),
        margin: EdgeInsets.only(top: 7),
        child: TextBox(
          style: body14Regular(),
          placeholderStyle: body14Regular(color: neutralGrey500),
          focusNode: focusNode,
          unfocusedColor: Colors.transparent,
          highlightColor: secondary500Color,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(2),
              border: Border.all(
                  color: focusNode.hasPrimaryFocus
                      ? Colors.transparent
                      : neutralGrey400)),
          obscureText: widget.isPassword == null ? false : true,
          placeholder: widget.placeholder,
          cursorColor: Colors.black,
        ),
      ),
    );
  }
}

and the password box still got the same icon ?