google-cloud-functions - 如何通过网站联系表发送电子邮件

Question

我正在使用 Flutter web 的网站上实现联系表单。

为了使这个表单起作用，我需要将它作为电子邮件发送给收件人。

我什至不知道我应该寻找什么来实现这一点。这种情况下有哪些不同的实施选项？

如果我使用 Firebase 进行托管，我可能会使用可调用的云函数。这有什么意义吗？

这是我实现的一种非常通用的形式：

class ContactMe extends StatefulWidget {
  const ContactMe({Key key}) : super(key: key);

  @override
  _ContactMeState createState() => _ContactMeState();
}

class _ContactMeState extends State<ContactMe> {
  final _formKey = GlobalKey<FormState>();
  String _name;
  String _email;
  String _message;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: const EdgeInsets.all(15),
        margin: const EdgeInsets.only(top: 15),
        child: Column(
          children: [
            Align(
              alignment: Alignment.centerLeft,
              child: const _BrandName(),
            ),
            Container(
              padding: const EdgeInsets.all(55),
              child: Form(
                key: _formKey,
                child: Column(
                  children: [
                    TextFormField(
                      decoration: InputDecoration(
                          helperText: 'Please enter name',
                          hintText: 'Darth Vader'),
                      cursorColor: kDarkBlue,
                      onChanged: (value) {
                        _name = value;
                        _formKey.currentState.validate();
                      },
                      validator: (value) {
                        if (value.isEmpty) {
                          return 'Please enter valid name';
                        }
                        return null;
                      },
                    ),
                    TextFormField(
                      decoration: InputDecoration(
                          helperText: 'Please enter email',
                          hintText: '[e-mail]'),
                      cursorColor: kDarkBlue,
                      onChanged: (value) {
                        _email = value;
                        _formKey.currentState.validate();
                      },
                      validator: (value) {
                        if (value.isEmpty) {
                          return 'Please enter valid email';
                        }
                        if (!RegExp(
                                r"[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?")
                            .hasMatch(value)) {
                          return 'Please enter a valid email';
                        }
                        return null;
                      },
                    ),
                    TextFormField(
                      decoration: InputDecoration(
                          helperText: 'Please enter subject',
                          hintText: 'Optimizing Lightsaber Production'),
                      cursorColor: kDarkBlue,
                      onChanged: (value) {
                        _name = value;
                        _formKey.currentState.validate();
                      },
                      validator: (value) {
                        if (value.isEmpty) {
                          return 'Please enter a valid subject';
                        }
                        return null;
                      },
                    ),
                    TextFormField(
                      maxLines: 14,
                      cursorColor: kDarkBlue,
                      decoration: InputDecoration(
                        helperText: 'Please enter message',
                      ),
                      onChanged: (value) {
                        _message = value;
                        _formKey.currentState.validate();
                      },
                      validator: (value) {
                        if (value.isEmpty) {
                          return 'Please enter a message';
                        }
                        return null;
                      },
                    )
                  ],
                ),
              ),
            ),
            ElevatedButton(
              style: ElevatedButton.styleFrom(primary: kBrightGreen),
              onPressed: () {
                if (_formKey.currentState.validate()) {
                  //todo: add here functionalitty

                  //todo: Show a Succesful send message, then transfer to primary
                  Navigator.pushNamed(context, kScreenPrimary);
                }
              },
              child: Text(
                'Submit',
                style: kTitleStyle,
              ),
            )
          ],
        ),
      ),
    );
  }
}

PS 我正在使用 Flutter：1.23.0-18.1.pre 主通道。

标签： google-cloud-functionsflutter-web