I’ve a ‘TextFormField’ inside a ‘Card’ widget in my Flutter app. Nonetheless, when an in-app error happens (triggered by the consumer), the looks of the error message isn’t as desired. Here is the related code:
Type(
key: _form,
baby: Column(
kids: [
// email textfield
Card(
//surfaceTintColor: Colors.white,
elevation: 5,
surfaceTintColor: Colors.white,
child: TextFormField(
enabled: !_isAuthenticating,
keyboardType: TextInputType.emailAddress,
controller: _emailController,
onTapOutside: (e) =>
FocusScope.of(context).unfocus(),
autocorrect: false,
textCapitalization: TextCapitalization.none,
decoration: InputDecoration(
prefixIcon: const Icon(Icons.email),
contentPadding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 20,
),
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide.none,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
borderSide:
const BorderSide(color: Colors.white),
),
fillColor: Colors.white,
filled: true,
hintText: 'Email',
hintStyle: TextStyle(
color: Colors.grey[600],
),
),
validator: (worth) {
if (worth == null ||
worth.trim().isEmpty ||
!worth.incorporates('@')) {
return 'Please enter a legitimate e mail tackle.';
}
return null;
},
onSaved: (worth) {
_enteredEmail = worth!;
},
),
),
const SizedBox(peak: 20),
// password textfield
Card(
elevation: 5,
surfaceTintColor: Colours.white,
baby: TextFormField(
enabled: !_isAuthenticating,
controller: _passwordController,
obscureText: _passwordVisible,
onTapOutside: (e) =>
FocusScope.of(context).unfocus(),
ornament: InputDecoration(
prefixIcon: const Icon(Icons.key),
contentPadding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 20,
),
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide.none,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.round(10),
borderSide:
const BorderSide(colour: Colours.white),
),
fillColor: Colours.white,
stuffed: true,
hintText: 'Password',
hintStyle: TextStyle(
colour: Colours.gray[600],
),
suffixIcon: IconButton(
icon: Icon(
_passwordVisible
? Icons.visibility_off
: Icons.visibility,
colour: Colours.gray[600],
),
onPressed: () {
setState(
() {
_passwordVisible = !_passwordVisible;
},
);
},
),
),
validator: (worth) {
if (worth == null || worth.trim().size < 8) {
//_passwordError =
return 'Password should be at the least 8 characters lengthy.';
//_passwordError;
}
return null;
},
onSaved: (worth) {
_enteredPassword = worth!;
},
),
),
],
),
),
[
]
I am a newbie in Flutter, and regardless that I tried to handle the problem with the steering from ChatGPT, sadly, I wasn’t capable of resolve it. Are you able to please present additional help or steering to assist me obtain the specified look for error messages inside my ‘Card’ widget, with out the pink line?
It might be nice if I might get it to appear to be this: [
]
Within the error state of affairs, I do not need the pink line above the error message, and I might just like the error message to be displayed outdoors the ‘Card’ widget.
How can I obtain this look with out the pink line and with the error message contained in the ‘Card’ widget?
