アプリ開発

【メール送信】flutterアプリでお問い合わせ欄を作る

今回はflutterでメールを送る方法をご紹介します。

よくアプリの中にあるお問い合わせを実装するには、メールを送る必要があると思います。

何かと知っておくと便利ですね。

今回は、flutter_email_senderというパッケージを使用します。

ちなみに、url_launcherというパッケージでもメールは送れるようです。

flutter_email_senderのインストール

上にリンクが貼ってあるので、そちらから飛んでくださいね。

1.pubspec.yamlに以下を追加。

dependencies: flutter_email_sender: ^3.0.1

2.ターミナルで flutter pub get

3. import ‘package:flutter_email_sender/flutter_email_sender.dart’;

をインポート。

flutter_email_senderによるお問い合わせ欄の例

classごと貼り付けます。

実装すると、以下のようなUIになります。

import 'package:flutter/material.dart';
import 'package:flutter_email_sender/flutter_email_sender.dart';
import 'package:tabelogram/ui/atoms/bottom_sheet/show_one_action_sheet.dart';
import 'package:tabelogram/ui/atoms/text/text.dart';

class ContactUsScreen extends StatefulWidget {
  @override
  _ContactUsScreenState createState() => _ContactUsScreenState();
}

class _ContactUsScreenState extends State<ContactUsScreen> {
  List<String> attachments = [];

  final _recipientController = TextEditingController(
    text: 'your_email_address',
  );

  final _subjectController = TextEditingController(text: 'お問い合わせ');

  final _bodyController = TextEditingController();

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

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

      String platformResponse;

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

      if (!mounted) {
        return;
      }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: HeadlineText3(
          text: '不具合の報告・お問い合わせ',
          color: Colors.white,
        ),
        actions: <Widget>[
          IconButton(
            onPressed: send,
            icon: Icon(Icons.send),
          )
        ],
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(8),
          child: Column(
            mainAxisSize: MainAxisSize.max,
            // mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8),
                child: TextField(
                  controller: _bodyController,
                  maxLines: 10,
                  decoration: const InputDecoration(
                      labelText: 'お問い合わせの内容', border: OutlineInputBorder()),
                ),
              ),
              ...attachments.map(
                (item) => Text(
                  item,
                  overflow: TextOverflow.fade,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

重要なところだけピックアップすると、

final Email email = Email(
        body: _bodyController.text,
        subject: _subjectController.text,
        recipients: [_recipientController.text],
        attachmentPaths: attachments,
        isHTML: false,
      );

ここでメールの内容を決定します。

ここに内容、題名、受けてのメールアドレスリスト、添付ファイルリストを入れています。

await FlutterEmailSender.send(email);

ここがメールを送る部分。emailには、上で作ったemailが入ります。

シミュレータでやっても上手くいかないので、実機でテストしてみてくださいね。

まとめ

いかがでしたでしょうか。

意外と簡単に実装できたと思います。

参考になれば幸いです。