Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

          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 🙁

>Solution :

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.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading