如何在Flutter中修复文本输入表单

Question

我有一个基本的电子邮件联系形式，我从网上得到，我试图发送一个样本电子邮件，但由于某种原因，我不能在我的输入字段输入任何文本。有什么建议或想法吗?

当我删除_formKey时，我可以输入文本，但我不能再成功发送电子邮件了。

任何建议或帮助都将非常感谢。

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:email_validator/email_validator.dart';
import 'package:http/http.dart' as http;

class EmailForm extends StatelessWidget {
EmailForm({Key? key}) : super(key: key);
final _formKey = GlobalKey<FormState>();
final nameController = TextEditingController();
final emailController = TextEditingController();
final messageController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xfff5f5fd),
body: Center(
child: Container(
height: 450,
width: 400,
margin: const EdgeInsets.symmetric(
horizontal: 40,
vertical: 20,
),
padding: const EdgeInsets.symmetric(
horizontal: 40,
vertical: 20,
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
offset: const Offset(0, 5),
blurRadius: 10,
spreadRadius: 1,
color: Colors.grey[300]!)
]),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
const Text('Contact Us',
style:
TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
TextFormField(
controller: nameController,
decoration: const InputDecoration(hintText: 'Name'),
validator: (value) {
if (value == null || value.isEmpty) {
return '*Required';
}
return null;
},
),
TextFormField(
controller: emailController,
decoration: const InputDecoration(hintText: 'Email'),
validator: (email) {
if (email == null || email.isEmpty) {
return 'Required*';
} else if (!EmailValidator.validate(email)) {
return 'Please enter a valid Email';
}
return null;
},
),
TextFormField(
controller: messageController,
decoration: const InputDecoration(hintText: 'Message'),
maxLines: 5,
validator: (value) {
if (value == null || value.isEmpty) {
return '*Required';
}
return null;
},
),
SizedBox(
height: 45,
width: 110,
child: TextButton(
style: TextButton.styleFrom(
primary: Colors.white,
backgroundColor: const Color(0xff151534),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40))),
onPressed: () async {
if (_formKey.currentState!.validate()) {
final response = await sendEmail(
nameController.value.text,
emailController.value.text,
messageController.value.text);
ScaffoldMessenger.of(context).showSnackBar(
response == 200
? const SnackBar(
content: Text('Message Sent!'),
backgroundColor: Colors.green)
: const SnackBar(
content: Text('Failed to send message!'),
backgroundColor: Colors.red),
);
nameController.clear();
emailController.clear();
messageController.clear();
}
},
child: const Text('Send', style: TextStyle(fontSize: 16)),
),
),
],
),
),
),
),
);
}
}
Future sendEmail(String name, String email, String message) async {
final url = Uri.parse('https://api.emailjs.com/api/v1.0/email/send');
final response = await http.post(url,
headers: {'Content-Type': 'application/json'},
body: json.encode({
'service_id': '',
'template_id': '',
'user_id': '',
'template_params': {
'from_name': name,
'from_email': email,
'message': message
}
}));
return response.statusCode;
}

Answer 1

当你使用表单小部件时，你不一定需要使用控制器，你可以在TextFormField小部件中使用onchange函数。

不像这样定义TextEditingControllers:

final nameController = TextEditingController();
final emailController = TextEditingController();

这样做:

var name = '';
var email = '';

不是

TextFormField(
controller: nameController,
decoration: const InputDecoration(hintText: 'Name'),
validator: (value) {
if (value == null || value.isEmpty) {
return '*Required';
}
return null;
},
),

这样做:

TextFormField(
decoration: const InputDecoration(hintText: 'Name'),
validator: (value) {
if (value == '') {
return '*Required';
}
return null;
},
onChanged: (value) {
name = value; //If it gives some null check error just add an exclamation like this - name = value!;
}
),

现在你只需要在你的请求中传递这些变量，就像你使用任何普通变量一样。而不是使用namcontroller。文本，只需名称(在开始时创建的变量)就足够了。这将使表单工作完美。

如果你没有得到200状态，那么问题也可能是你发送的数据和服务器期望接收的数据之间的差异。

要找出根本原因，我建议您到处添加Print Statements，以查看哪些函数正常运行，哪些不正常。

打印来自服务器的错误语句可能有助于理解根本问题。所以在返回statusCode

之前试试这个

print(response.body); //Add this line for the output from the server
return response.statusCode;

让我知道你在控制台得到了什么回复。

Answer 2

Future sendEmail(String name, String email, String message) async {
final url = Uri.parse('https://api.emailjs.com/api/v1.0/email/send%27);
const serviceId = 'Enter your service Id';
const templateId = 'Enter your template Id';
const userId = 'Enter your User Id';
final response = await http.post(url,
headers: {'Content-Type': 'application/json'},//This line makes sure it works for all platforms.
body: json.encode({
'service_id': serviceId,
'template_id': templateId,
'user_id': userId,
'template_params': {
'from_name': name,
'from_email': email,
'message': message
}
})
);
print (response.body);
return response.statusCode;
}

您将从您在MailJS上创建的帐户中获得服务Id，模板Id和用户Id。