[Solved] Is it possible to just use one TextFormField for the email and password?

Question

Asked by Efipee on January 15, 2022 (source).

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 :(

Answer

Question answered by Juan C (source).

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.

Video Answers on YouTube

DART FLUTTER TEXTFORMFIELD
SHARE: