My idea is to use only one TextFormField for the email and password...

But I also want to make the password obscure, and I have no idea how to implement this, using just a TextFormField

    TextFormField inputField({
    required String hintText,
    required String errorMessage,
    required bool isPassword,
  }) {
    return TextFormField(
      decoration: InputDecoration(
        enabledBorder: inputBorder(const Color(0xFF000000), 2),
        focusedBorder: inputBorder(const Color(0xFF000000), 3),
        errorBorder: inputBorder(const Color(0xFFF44336), 2),
        focusedErrorBorder: inputBorder(const Color(0xFFF44336), 3),
        hintText: hintText,
        hintStyle: const TextStyle(
          color: Colors.black,
          fontSize: 18,
          fontWeight: FontWeight.w500,
        ),
      ),
      validator: (value) {
        if (value == null || value.isEmpty) {
          return errorMessage;
        }
        return null;
      },
      obscureText: isPassword,
    );
  }

Padding password:

          Padding(
        padding: const EdgeInsets.only(top: 24, left: 32, right: 24),
        child: Stack(
          children: [
            SizedBox(
              height: 60,
              child: Align(
                alignment: Alignment.centerRight,
                child: Padding(
                  padding: const EdgeInsets.only(right: 16),
                  child: GestureDetector(
                    onTap: () {_changeIcon(passwordIcon);},
                    child: passwordIcon,
                  ),
                ),
              ),
            ),
            inputField(
              hintText: 'password',
              errorMessage: 'Please enter your password',
              isPassword: _LoginFormState()._isHidden,

            ),
          ],
        ),
      ),

Is there any way to implement this? Sorry for anything I just started on Flutter :(

CodePudding user response：

Here is a example:

import 'package:flutter/material.dart';

class Example extends StatefulWidget {
  const Example({Key? key}) : super(key: key);

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  late TextEditingController _emailEditingController;
  late TextEditingController _passwordEditingController;

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      inputField(
          hintText: 'email',
          errorMessage: 'errorMessage',
          isPassword: false,
          textEditingController: _emailEditingController),
      inputField(
          hintText: 'password',
          errorMessage: 'errorMessage',
          isPassword: true,
          textEditingController: _passwordEditingController),
    ]);
  }

  @override
  void dispose() {
    _emailEditingController.dispose();
    _passwordEditingController.dispose();
    super.dispose();
  }
}

And your helper method:

TextFormField inputField(
    {required String hintText,
    required String errorMessage,
    required bool isPassword,
    required TextEditingController textEditingController}) {
  return TextFormField(
    decoration: InputDecoration(
      enabledBorder: inputBorder(const Color(0xFF000000), 2),
      focusedBorder: inputBorder(const Color(0xFF000000), 3),
      errorBorder: inputBorder(const Color(0xFFF44336), 2),
      focusedErrorBorder: inputBorder(const Color(0xFFF44336), 3),
      hintText: hintText,
      hintStyle: const TextStyle(
        color: Colors.black,
        fontSize: 18,
        fontWeight: FontWeight.w500,
      ),
    ),
    controller: textEditingController,
    validator: (value) {
      if (value == null || value.isEmpty) {
        return errorMessage;
      }
      return null;
    },
    obscureText: isPassword,
  );
}

Here you are using TextEditingController to re use these method, if you want more info about it: TextEditingController

Whenever the user modifies a text field with an associated TextEditingController, the text field updates value and the controller notifies its listeners.

CodePudding user response：

add this line your code keyboardType: isPassword ? TextInputType.text : TextInputType.emailAddress,

TextFormField(
      decoration: InputDecoration(
        enabledBorder: inputBorder(const Color(0xFF000000), 2),
        focusedBorder: inputBorder(const Color(0xFF000000), 3),
        errorBorder: inputBorder(const Color(0xFFF44336), 2),
        focusedErrorBorder: inputBorder(const Color(0xFFF44336), 3),
        hintText: hintText,
        hintStyle: const TextStyle(
          color: Colors.black,
          fontSize: 18,
          fontWeight: FontWeight.w500,
        ),
      ),
      validator: (value) {
        if (value == null || value.isEmpty) {
          return errorMessage;
        }
        return null;
      },
      keyboardType: isPassword ? TextInputType.text : TextInputType.emailAddress,
      obscureText: isPassword,
    )