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 🙁
>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.