Flutter,将表单数据发送到电子邮件

jam*_*mil 6 flutter

我想创建一个联系表,并且想知道:如何将数据从联系表发送到我的电子邮件?我想看一个可行的例子。我想提交这样的表格:

    return new Scaffold(
  appBar: new AppBar(
    title: new Text(widget.title),
    actions: <Widget>[
      new IconButton(icon: const Icon(Icons.save), onPressed: () {})
    ],
  ),
  body: new Column(
    children: <Widget>[
      new ListTile(
        leading: const Icon(Icons.person),
        title: new TextField(
          decoration: new InputDecoration(
            hintText: "Name",
          ),
        ),
      ),
      new ListTile(
        leading: const Icon(Icons.phone),
        title: new TextField(
          decoration: new InputDecoration(
            hintText: "Phone",
          ),
        ),
      ),
      new ListTile(
        leading: const Icon(Icons.email),
        title: new TextField(
          decoration: new InputDecoration(
            hintText: "Email",
          ),
        ),
      ),
Run Code Online (Sandbox Code Playgroud)

F-1*_*F-1 7

尝试flutter_email_sender包。这是从他们的github 中获取的示例。

import 'dart:async';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_email_sender/flutter_email_sender.dart';
import 'package:image_picker/image_picker.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String attachment;

  final _recipientController = TextEditingController(
    text: 'example@example.com',
  );

  final _subjectController = TextEditingController(text: 'The subject');

  final _bodyController = TextEditingController(
    text: 'Mail body.',
  );

  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  Future<void> send() async {
    final Email email = Email(
      body: _bodyController.text,
      subject: _subjectController.text,
      recipients: [_recipientController.text],
      attachmentPath: attachment,
    );

    String platformResponse;

    try {
      await FlutterEmailSender.send(email);
      platformResponse = 'success';
    } catch (error) {
      platformResponse = error.toString();
    }

    if (!mounted) return;

    _scaffoldKey.currentState.showSnackBar(SnackBar(
      content: Text(platformResponse),
    ));
  }

  @override
  Widget build(BuildContext context) {
    final Widget imagePath = Text(attachment ?? '');

    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.red),
      home: Scaffold(
        key: _scaffoldKey,
        appBar: AppBar(
          title: Text('Plugin example app'),
          actions: <Widget>[
            IconButton(
              onPressed: send,
              icon: Icon(Icons.send),
            )
          ],
        ),
        body: SingleChildScrollView(
          child: Center(
            child: Padding(
              padding: EdgeInsets.all(8.0),
              child: Column(
                mainAxisSize: MainAxisSize.max,
                // mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.all(8.0),
                    child: TextField(
                      controller: _recipientController,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Recipient',
                      ),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.all(8.0),
                    child: TextField(
                      controller: _subjectController,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Subject',
                      ),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.all(8.0),
                    child: TextField(
                      controller: _bodyController,
                      maxLines: 10,
                      decoration: InputDecoration(
                          labelText: 'Body', border: OutlineInputBorder()),
                    ),
                  ),
                  imagePath,
                ],
              ),
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton.extended(
          icon: Icon(Icons.camera),
          label: Text('Add Image'),
          onPressed: _openImagePicker,
        ),
      ),
    );
  }

  void _openImagePicker() async {
    File pick = await ImagePicker.pickImage(source: ImageSource.gallery);
    setState(() {
      attachment = pick.path;
    });
  }
}
Run Code Online (Sandbox Code Playgroud)


Vin*_*mar 6

您可以导航到default Email app。您还可以通过flutter应用程序设置以下属性。

1)to mail ID
2)subject
3)body

使用url_launcher插件。

Steps:

1)将其添加到包的pubspec.yaml文件中: url_launcher: "^3.0.1"

2)main.dart档案

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

void main() => runApp(new MaterialApp(home: new MyApp(), debugShowCheckedModeBanner: false,));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new RaisedButton(onPressed: () => _launchURL('vinoth1094@gmail.com', 'Flutter Email Test', 'Hello Flutter'), child: new Text('Send mail'),),
      ),
    );
  }

  _launchURL(String toMailId, String subject, String body) async {
    var url = 'mailto:$toMailId?subject=$subject&body=$body';
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

  • 使用 string concate ani 制作单个字符串。 (3认同)
  • 感谢您的回答,但我想要的是能够发送包含多个字段的表单数据,例如:姓名、电话、电子邮件、日期和时间。我希望用户使用该表单,并且我希望通过电子邮件接收数据。 (2认同)

Mah*_*eri 5

请检查颤振中的“mailer”包。它将使用 smtp 从后台发送电子邮件,而无需打开用户界面应用程序。它有 gmail、yahoo 邮件、mailgun 选项来发送电子邮件。

参考链接:

https://pub.dartlang.org/packages/mailer


小智 5

如果您想静默发送并且不弹出任何电子邮件对话框,您可以考虑使用 firebase 扩展和SMTP provider 的方式

在我的示例中,我使用 Firebase 作为我们的后端 API,因此我们选择了一个名为“ trigger email ”的 Firebase 扩展来静默发送电子邮件。

在您设置 SMTP 提供商并决定选择“Firebase trigger email extension”后,您可以通过在 Flutter 代码中创建的表单静默发送电子邮件。

我希望它有帮助。