How do you stop a Flutter "Form" from throwing errors? - forms

Question

Working on my personal site, and I want to add a contact form so anyone on the site can fill out a simple form and the site will send me an email. I think I've figured out the email part, but the form the users would have to fill out isn't working yet.
Whenever I start debugging my code it loads into my home page. I click on "Contact Me" at the top right and it takes me to the form page just like it's supposed to, but it immediately shows
Below is my contact_form.dart file in its entirety:
import 'package:flutter/material.dart';
import 'package:flutter_email_sender/flutter_email_sender.dart';
import 'package:google_fonts/google_fonts.dart';
import '../../extensions/email_detection_extension.dart';
import '../../extensions/hover_extensions.dart';
class ContactForm extends StatefulWidget {
const ContactForm({Key key}) : super(key: key);
#override
_ContactFormState createState() => _ContactFormState();
}
class _ContactFormState extends State<ContactForm> {
static const bool _autovalidate = false;
final _formKey = GlobalKey<FormState>();
final _nameController = TextEditingController();
final _emailController = TextEditingController();
final _messageController = TextEditingController();
#override
Widget build(BuildContext context) {
return Form(
key: _formKey,
autovalidate: _autovalidate, //as you can see I have autovalidate disabled so that shouldn't be it
child: ListView(
children: <Widget>[
Row(
children: <Widget>[
Text(
'Name: ',
style: GoogleFonts.ubuntu(
fontSize: 18,
fontWeight: FontWeight.w500,
height: 1.7,
color: Colors.white,
),
),
SizedBox(width: 10),
SizedBox(
child: TextFormField(
validator: (value){
if(value.isEmpty) return 'This field is required.';
return null;
},
decoration: InputDecoration(
hintText: 'First Last',
hintStyle: GoogleFonts.ubuntu(
fontSize: 18,
fontWeight: FontWeight.w500,
height: 1.7,
color: Colors.white,
),
enabledBorder: const UnderlineInputBorder(
borderSide: const BorderSide(color: Color.fromARGB(255, 220, 220, 220))
),
focusedBorder: const OutlineInputBorder(
borderSide: const BorderSide(color: Color.fromARGB(255, 220, 220, 220))
),
fillColor: Color.fromARGB(255, 255, 255, 255),
focusColor: Color.fromARGB(50, 150, 50, 200),
errorText: 'This field is required.'
),
controller: _nameController
),
width: 500
)
]
),
Row(
children: <Widget>[
Text(
'Email: ',
style: GoogleFonts.ubuntu(
fontSize: 18,
fontWeight: FontWeight.w500,
height: 1.7,
color: Colors.white,
),
),
SizedBox(width: 10),
SizedBox(
child: TextFormField(
validator: (value){
if(!value.isValidEmail()) return 'This field is required and must be of the form "example#website.abc".';
return null;
},
decoration: InputDecoration(
hintText: 'example#website.abc',
hintStyle: GoogleFonts.ubuntu(
fontSize: 18,
fontWeight: FontWeight.w500,
height: 1.7,
color: Colors.white,
),
enabledBorder: const UnderlineInputBorder(
borderSide: const BorderSide(color: Color.fromARGB(255, 220, 220, 220))
),
focusedBorder: const OutlineInputBorder(
borderSide: const BorderSide(color: Color.fromARGB(255, 220, 220, 220))
),
fillColor: Color.fromARGB(255, 255, 255, 255),
focusColor: Color.fromARGB(50, 150, 50, 200),
errorText: 'This field is required and must be of the form "example#website.abc".'
),
controller: _emailController,
keyboardType: TextInputType.emailAddress,
),
width: 500
)
]
),
Row(
children: <Widget>[
Text(
'Message:',
style: GoogleFonts.ubuntu(
fontSize: 18,
fontWeight: FontWeight.w500,
height: 1.7,
color: Colors.white,
),
),
SizedBox(width: 10),
SizedBox(
child: TextFormField(
validator: (value){
if(!value.isValidEmail()) return 'This field is required.';
return null;
},
decoration: InputDecoration(
hintText: 'Message',
hintStyle: GoogleFonts.ubuntu(
fontSize: 18,
fontWeight: FontWeight.w500,
height: 1.7,
color: Colors.white,
),
enabledBorder: const UnderlineInputBorder(
borderSide: const BorderSide(color: Color.fromARGB(255, 220, 220, 220))
),
focusedBorder: const OutlineInputBorder(
borderSide: const BorderSide(color: Color.fromARGB(255, 220, 220, 220))
),
fillColor: Color.fromARGB(255, 255, 255, 255),
focusColor: Color.fromARGB(50, 150, 50, 200),
errorText: 'This field is required.',
),
controller: _messageController
),
width: 500
)
]
),
//Submit button
GestureDetector(
onTap: () async {
if(_formKey.currentState.validate()){
final Email email = Email(
subject: 'Contact Email from ' + _nameController.text,
body: 'Dear Future Me,\n\n' + _nameController.text + " sent you an email from your contact form just now. Here's their message:\n\n" + _messageController.text + '\n\nYou can reach out to them at their provided email: ' + _emailController.text + '\n\nHave a good one, and keep that chin up!\n ~Pseudo-Robotic Past You',
recipients: ['redacted (my email address)'],
isHTML: false
);
try {
await FlutterEmailSender.send(email);
//Navigate to success page
} catch (error) {
//Navigate to failure page
}
}
},
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 60, vertical: 15),
child: Text(
'Submit',
style: GoogleFonts.ubuntu(
fontSize: 18,
fontWeight: FontWeight.w500,
color: Colors.white,
),
),
decoration: BoxDecoration(
color: Color.fromARGB(255, 120, 20, 220),
borderRadius: BorderRadius.circular(5)
),
width: 200
),
).showCursorOnHover
]
)
);
}
}
It's not perfect, I'm gonna clean it up when I'm done, but this is where I stand. Been at this for about 2.5 hours, it's 2 am, and I have a partially functional form that doesn't want to stop erroring. (It shows the error messages even after I've put in acceptable strings and hit submit.) I'd appreciate any ideas on how to fix my autovalidation problem.
Thanks.