[firebase_ui_auth] SignInScreen styles cannot be editable

[Lazizbek97]

I have used SignInScreen (A screen displaying a fully styled Sign In flow for Authentication) in my app. but i cannot edit input fields design. there is styles property, but doesn't effect on UI. as well as i want to add visibility toggle button on passwords. but There is not such option to add it.
How can i achieve to those? Thanks.

class UserSignInScreen extends StatefulWidget {
  const UserSignInScreen({Key? key, required this.mfaAction}) : super(key: key);

  final AuthStateChangeAction<MFARequired> mfaAction;

  @override
  _UserSignInScreenState createState() => _UserSignInScreenState();
}

class _UserSignInScreenState extends State<UserSignInScreen> {
  final screenCubit = SignInCubit();

  @override
  void initState() {
    screenCubit.loadInitialData();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return BlocConsumer<SignInCubit, SignInState>(
      bloc: screenCubit,
      listener: (BuildContext context, SignInState state) {
        if (state.error != null) {}
      },
      builder: (BuildContext context, SignInState state) {
        if (state.isLoading) {
          return const Center(child: CircularProgressIndicator());
        }

        return buildBody(state, widget.mfaAction);
      },
    );
  }
  // var user = await FirebaseAuth.instance.signInAnonymously();

  Widget buildBody(SignInState state, mfaAction) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          onPressed: () {
            Navigator.pop(context);
          },
          icon: const ShaderGradientWidget(
            child: Icon(Icons.arrow_back_ios),
          ),
        ),
      ),
      body: SignInScreen(
        resizeToAvoidBottomInset: true,
        headerMaxExtent: 180,
        actions: [
          ForgotPasswordAction((context, email) {
            Navigator.pushNamed(
              context,
              '/forgot-password',
              arguments: {'email': email},
            );
          }),
          AuthStateChangeAction((context, state) {
            final user = switch (state) {
              SignedIn(user: final user) => user,
              CredentialLinked(user: final user) => user,
              UserCreated(credential: final cred) => cred.user,
              _ => null,
            };

            switch (user) {
              case User(emailVerified: true):
                Navigator.pushReplacementNamed(context, '/');
              case User(emailVerified: false, email: final String _):
                Navigator.pushNamed(context, '/verify-email');
            }
          }),
          mfaAction,
          EmailLinkSignInAction((context) {
            Navigator.pushReplacementNamed(context, '/email-link-sign-in');
          }),
        ],
        styles: const {
          EmailFormStyle(
            signInButtonVariant: ButtonVariant.filled,
            inputDecorationTheme: InputDecorationTheme(
              border: OutlineInputBorder(
                borderRadius: BorderRadius.all(
                  Radius.circular(16),
                ),
                borderSide: BorderSide(
                  color: Colors.green,
                ),
              ),
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.all(
                  Radius.circular(16),
                ),
                borderSide: BorderSide(
                  color: Colors.green,
                ),
              ),
              outlineBorder: BorderSide(
                color: Colors.green,
              ),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.all(
                  Radius.circular(16),
                ),
                borderSide: BorderSide(
                  color: Colors.green,
                ),
              ),
            ),
          ),
        },
        headerBuilder: headerImage('assets/logo1.png'),
        sideBuilder: sideImage('assets/logo1.png'),
        subtitleBuilder: (context, action) {
          final actionText = switch (action) {
            AuthAction.signIn => 'Please sign in to continue.',
            AuthAction.signUp => 'Please create an account to continue',
            _ => throw Exception('Invalid action: $action'),
          };

          return Padding(
            padding: const EdgeInsets.only(bottom: 8),
            child: Text('Welcome to Example! $actionText.'),
          );
        },
        footerBuilder: (context, action) {
          final actionText = switch (action) {
            AuthAction.signIn => 'signing in',
            AuthAction.signUp => 'registering',
            _ => throw Exception('Invalid action: $action'),
          };

          return Center(
            child: Padding(
              padding: const EdgeInsets.only(top: 16),
              child: Text(
                'By $actionText, you agree to our terms and conditions.',
                style: const TextStyle(color: Colors.grey),
              ),
            ),
          );
        },
      ),
    );
  }
}