iT邦幫忙

2022 iThome 鐵人賽

DAY 17
0
Mobile Development

在 Flutter 開發旅程的手札系列 第 17

Flutter Package - 寄送信件

  • 分享至 

  • xImage
  •  

今天要來介紹使用url_launcher,讓使用者能夠透過自己的信箱,寄信到指定的mail內,並且能預設好主旨和內文,由於模擬器無法模擬出寄送信件的功能,下面也會補充說明該如何接上iPhone手機進行測試

下載套件

flutter pub add url_launcher
flutter pub get

新增檔案send_mail_screen.dart
下方的receive_mail@example.com記得改成要收件的地方

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

class SendMailScreen extends StatelessWidget {
  const SendMailScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("寄送信件"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                String? encodeQueryParameters(Map<String, String> params) {
                  return params.entries
                      .map((MapEntry<String, String> e) => '${Uri.encodeComponent(e.key)}=${Uri.encodeComponent(e.value)}')
                      .join('&');
                }

                final Uri emailLaunchUri = Uri(
                  scheme: 'mailto',
                  path: 'receive_mail@example.com',
                  query: encodeQueryParameters(<String, String>{'subject': '寄送信件測試', 'body': '您好, 寄送信件測試。'}),
                );
                launchUrl(emailLaunchUri);
              },
              child: Text("Button"),
            )
          ],
        ),
      ),
    );
  }
}

使用實體機才能進行寄送Mail的測試,如果還不會設定實體機的測試,可以看下方兩篇文章
Flutter Setup - iPhone實體機的測試設定
Flutter Setup - Android實體機的測試設定

APP在手機上執行成功畫面
https://ithelp.ithome.com.tw/upload/images/20221002/20152683LBU8RcKe7o.png
點擊Button後會自己開啟郵件,並可以看到上方預設的文字訊息
https://ithelp.ithome.com.tw/upload/images/20221002/20152683oReXd2Ijja.png


上一篇
Flutter Setup - Android實體機的測試設定
下一篇
Flutter Package — Firebase Crashlytics
系列文
在 Flutter 開發旅程的手札30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言