[Flutter] 이메일 보내기 (문의하기)

[ 목표 ]

 

보통 앱의 설정 탭에 문의하기(또는 피드백 보내기) 기능을 넣어서

사용자가 회사 또는 개발자에게 의견을 보낼 수 있도록 합니다. 

 

아이폰 기준,

기본 메일 앱이 깔려있고 메일 앱에 이메일을 등록해놨다면 email을 보낼 수 있는 폼이 나오고

아니라면 얼럿을 띄워줍니다. 

(MFMailComposeViewController 로 이 기능을 구현합니다.)

 

'포토위젯' 앱의 경우 

 

왼쪽: 메일 앱 있을 때 / 오른쪽: 메일 앱 없을 때

 

'프립' 앱의 경우 

 

왼쪽: 메일 앱 있을 때 / 오른쪽: 메일 앱 없을 때

 

 

검색해보니, 안드로이드는 기본 메일 앱이 gmail이라서 gmail 앱 으로 랜딩시킨다고 하네요. 

 

 

 

플러터 문서를 검색해보니 email 관련해서 제공해주는 Widget이나 유틸 같은 것은 따로 없는 것 같고

써드파티 패키지를 검색해보니 나옵니다..! (flutter email send라고 검색하면 됨)

 

저는 제일 간단해보이는 pub.dev/packages/flutter_email_sender 이 패키지를 사용하여서

이 기능을 구현해보겠습니다. 

 

 

[1] 패키지 설치

 

pubspec.yaml > dependencies 에 아래 라인을 복붙해주시고

flutter_email_sender: ^4.0.0

 flutter pub get 해줍니다. 

 

 

[2] 문의하기 버튼 만들기 

 

CupertinoButton(
  child: Text("문의하기", style: _textStyle),
  padding: EdgeInsets.zero,
  onPressed: () {
    _sendEmail();
  },
),

 

[3] _sendEmail 메소드 작성

 

문의하기 버튼을 누르면 실행되는 메소드를 작성해주겠습니다. 

'프립' 앱이 좋은 사례여서 에러메세지를 따라해줍니다.

import 'package:flutter_email_sender/flutter_email_sender.dart';

void _sendEmail() async {
  final Email email = Email(
    body: '',
    subject: '[양파가족 문의]',
    recipients: ['onionfamily.official@gmail.com'],
    cc: [],
    bcc: [],
    attachmentPaths: [],
    isHTML: false,
  );

  try {
    await FlutterEmailSender.send(email);
  } catch (error) {
    String title = "기본 메일 앱을 사용할 수 없기 때문에 앱에서 바로 문의를 전송하기 어려운 상황입니다.\n\n아래 이메일로 연락주시면 친절하게 답변해드릴게요 :)\n\nonionfamily.official@gmail.com";
    String message = "";
    _showErrorAlert(title: title, message: message);
  }
}

 

 

[4] 결과확인

4.1 안드로이드 

 

gmail 앱이 깔려있고 계정 등록을 해놨다면

gmail 앱으로 랜딩되고 아래 화면이 뜹니다. 

 

 

만약 gmail 앱에 계정등록을 안했으면 gmail 앱이 열리고 끝!

만약 gmail 앱이 안깔려있다면..? -> 이럴 일이 없음.

안드로이드 에뮬레이터에서 gmail 앱을 uninstall 할 수 없었습니다. 안드로이드는 기본 앱을 못지우나봐요. 

 

 

4.2 iOS 

 

메일 앱이 깔려있고 계정 등록을 해놨다면 

현재 앱 내에서 이메일 폼이 뜹니다. 

 

 

만약 메일 앱이 안깔려있거나 

메일 앱이 깔려있지만 계정등록을 안한 상태라면

error로 떨어집니다. 

 

 

 

[5] body에 필요한 정보 추가하기 

 

이제 mail body에 device info, app info, user info를 추가해보겠습니다. ('프립' 앱이 좋은 사례여서 따라 해줍니다.)

device info, app info 구하는 코드는 이 글을 참고해주세요

 

Future<String> _getEmailBody() async {
  Map<String, dynamic> userInfo = _getUserInfo();
  Map<String, dynamic> appInfo = await _getAppInfo();
  Map<String, dynamic> deviceInfo = await _getDeviceInfo();

  String body = "";

  body += "==============\n";
  body += "아래 내용을 함께 보내주시면 큰 도움이 됩니다 🧅\n";

  userInfo.forEach((key, value) {
    body += "$key: $value\n";
  });

  appInfo.forEach((key, value) {
    body += "$key: $value\n";
  });

  deviceInfo.forEach((key, value) {
    body += "$key: $value\n";
  });

  body += "==============\n";

  return body;
}

void _sendEmail() async {

  String body = await _getEmailBody();

  final Email email = Email(
    body: body,
    subject: '[양파가족 문의]',
    recipients: ['onionfamily.official@gmail.com'],
    cc: [],
    bcc: [],
    attachmentPaths: [],
    isHTML: false,
  );

  ...
}