How to Send A Complicated Email with Flutter Mailer Package

html email dart flutter mailer
3,667

There are 2 aspects to this question.

  • How to set the stripo html.
  • How to adapt an html template. (Modify the content to change parts of the template)

To set the template simply do:

message.html =
'''<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[... copy the complete template here ...]
</html>'''

Three quotes (''') instead of one quote (') allows text to span multiple lines. To keep your code clean, you might want to create a new dart file: mail-template.dart and assign the html-template to a variable. Then include this file and assign the variable.

To replace parts of the template I would use .replaceAll on the template.

var nameFromSomeInput = 'Jane Doe';
var yourHtmlTemplate = '<html>Dear {{NAME}}</html>';
message.html = yourHtmlTemplate.replaceAll('{{NAME}}', nameFromSomeInput);

Note that replaceAll is easy and doesn't depend on any additional libraries. It is however slow. Especially if you replace multiple values by calling replaceAll multiple times.

Consider a template engine like: jinja in such cases.

Share:
3,667
Henry
Author by

Henry

Updated on December 07, 2022

Comments

  • Henry
    Henry over 1 year

    I am able to send simple HTML emails with the Mailer package (https://pub.dartlang.org/packages/mailer). As in their example, "<h1>Test</h1>\n<p>Hey! Here's some HTML content</p>"works as a simple HTML text:

    final message = new Message()
..from = new Address(username, 'Your name')
..recipients.add('[email protected]')
..ccRecipients.addAll(['[email protected]', '[email protected]'])
..bccRecipients.add(new Address('[email protected]'))
..subject = 'Test Dart Mailer library :: 😀 :: ${new DateTime.now()}'
..text = 'This is the plain text.\nThis is line 2 of the text part.'
..html = "<h1>Test</h1>\n<p>Hey! Here's some HTML content</p>";

    But what if I wanna create a complex HTML email? For example stripo.email provides templates with HTML code. How can I pass this HTML code as a string for the ..html parameter for the new Message() method?

    Here is the HTML code stripo.email website creates for their template:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="width:100%;font-family:arial, 'helvetica neue', helvetica, sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;">

<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <meta name="x-apple-disable-message-reformatting">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="telephone=no" name="format-detection">
  <title>New email</title>
  <!--[if (mso 16)]>
    <style type="text/css">
    a {text-decoration: none;}
    </style>
    <![endif]-->
  <!--[if gte mso 9]><style>sup { font-size: 100% !important; }</style><![endif]-->
  <style type="text/css">
    @media only screen and (max-width:600px) {
      p,
      ul li,
      ol li,
      a {
        font-size: 16px!important
      }
      h1 {
        font-size: 30px!important;
        text-align: center
      }
      h2 {
        font-size: 26px!important;
        text-align: center
      }
      h3 {
        font-size: 20px!important;
        text-align: center
      }
      h1 a {
        font-size: 30px!important
      }
      h2 a {
        font-size: 26px!important
      }
      h3 a {
        font-size: 20px!important
      }
      .es-menu td a {
        font-size: 16px!important
      }
      .es-header-body p,
      .es-header-body ul li,
      .es-header-body ol li,
      .es-header-body a {
        font-size: 16px!important
      }
      .es-footer-body p,
      .es-footer-body ul li,
      .es-footer-body ol li,
      .es-footer-body a {
        font-size: 16px!important
      }
      .es-infoblock p,
      .es-infoblock ul li,
      .es-infoblock ol li,
      .es-infoblock a {
        font-size: 12px!important
      }
      *[class="gmail-fix"] {
        display: none!important
      }
      .es-m-txt-c,
      .es-m-txt-c h1,
      .es-m-txt-c h2,
      .es-m-txt-c h3 {
        text-align: center!important
      }
      .es-m-txt-r,
      .es-m-txt-r h1,
      .es-m-txt-r h2,
      .es-m-txt-r h3 {
        text-align: right!important
      }
      .es-m-txt-l,
      .es-m-txt-l h1,
      .es-m-txt-l h2,
      .es-m-txt-l h3 {
        text-align: left!important
      }
      .es-m-txt-r img,
      .es-m-txt-c img,
      .es-m-txt-l img {
        display: inline!important
      }
      .es-button-border {
        display: block!important
      }
      .es-button {
        font-size: 20px!important;
        display: block!important;
        border-width: 10px 0px 10px 0px!important
      }
      .es-btn-fw {
        border-width: 10px 0px!important;
        text-align: center!important
      }
      .es-adaptive table,
      .es-btn-fw,
      .es-btn-fw-brdr,
      .es-left,
      .es-right {
        width: 100%!important
      }
      .es-content table,
      .es-header table,
      .es-footer table,
      .es-content,
      .es-footer,
      .es-header {
        width: 100%!important;
        max-width: 600px!important
      }
      .es-adapt-td {
        display: block!important;
        width: 100%!important
      }
      .adapt-img {
        width: 100%!important;
        height: auto!important
      }
      .es-m-p0 {
        padding: 0px!important
      }
      .es-m-p0r {
        padding-right: 0px!important
      }
      .es-m-p0l {
        padding-left: 0px!important
      }
      .es-m-p0t {
        padding-top: 0px!important
      }
      .es-m-p0b {
        padding-bottom: 0!important
      }
      .es-m-p20b {
        padding-bottom: 20px!important
      }
      .es-mobile-hidden,
      .es-hidden {
        display: none!important
      }
      .es-desk-hidden {
        display: table-row!important;
        width: auto!important;
        overflow: visible!important;
        float: none!important;
        max-height: inherit!important;
        line-height: inherit!important
      }
      .es-desk-menu-hidden {
        display: table-cell!important
      }
      table.es-table-not-adapt,
      .esd-block-html table {
        width: auto!important
      }
      table.es-social {
        display: inline-block!important
      }
      table.es-social td {
        display: inline-block!important
      }
    }
    
    #outlook a {
      padding: 0;
    }
    
    .ExternalClass {
      width: 100%;
    }
    
    .ExternalClass,
    .ExternalClass p,
    .ExternalClass span,
    .ExternalClass font,
    .ExternalClass td,
    .ExternalClass div {
      line-height: 100%;
    }
    
    .es-button {
      mso-style-priority: 100!important;
      text-decoration: none!important;
    }
    
    a[x-apple-data-detectors] {
      color: inherit!important;
      text-decoration: none!important;
      font-size: inherit!important;
      font-family: inherit!important;
      font-weight: inherit!important;
      line-height: inherit!important;
    }
    
    .es-desk-hidden {
      display: none;
      float: left;
      overflow: hidden;
      width: 0;
      max-height: 0;
      line-height: 0;
      mso-hide: all;
    }
  </style>
</head>

<body style="width:100%;font-family:arial, 'helvetica neue', helvetica, sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;">
  <div class="es-wrapper-color" style="background-color:#F6F6F6;">
    <!--[if gte mso 9]>
			<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
				<v:fill type="tile" color="#f6f6f6"></v:fill>
			</v:background>
		<![endif]-->
    <table cellpadding="0" cellspacing="0" class="es-wrapper" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-repeat:repeat;background-position:center top;">
      <tr style="border-collapse:collapse;">
        <td valign="top" style="padding:0;Margin:0;">
          <table cellpadding="0" cellspacing="0" class="es-content" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;">
            <tr style="border-collapse:collapse;">
              <td align="center" style="padding:0;Margin:0;">
                <table class="es-content-body" align="center" cellpadding="0" cellspacing="0" width="600" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:transparent;">
                  <tr style="border-collapse:collapse;">
                    <td align="left" style="padding:20px;Margin:0;">
                      <!--[if mso]><table width="560"><tr><td width="356" valign="top"><![endif]-->
                      <table cellpadding="0" cellspacing="0" class="es-left" align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left;">
                        <tr style="border-collapse:collapse;">
                          <td width="356" class="es-m-p0r es-m-p20b" valign="top" align="center" style="padding:0;Margin:0;">
                            <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
                              <tr style="border-collapse:collapse;">
                                <td align="left" class="es-infoblock es-m-txt-c" style="padding:0;Margin:0;line-height:120%;font-size:12px;color:#CCCCCC;">
                                  <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:12px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:120%;color:#CCCCCC;">Use this area to offer a short preview of your email's content.</p>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                      <!--[if mso]></td><td width="20"></td><td width="184" valign="top"><![endif]-->
                      <table cellpadding="0" cellspacing="0" align="right" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
                        <tr style="border-collapse:collapse;">
                          <td width="184" align="left" style="padding:0;Margin:0;">
                            <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
                              <tr style="border-collapse:collapse;">
                                <td align="right" class="es-infoblock es-m-txt-c" style="padding:0;Margin:0;line-height:120%;font-size:12px;color:#CCCCCC;">
                                  <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:12px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:120%;color:#CCCCCC;"><a target="_blank" href="http://stripo.email" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:12px;text-decoration:underline;color:#2CB543;">View email in your browser</a></p>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                      <!--[if mso]></td></tr></table><![endif]-->
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <table cellpadding="0" cellspacing="0" class="es-content" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;">
            <tr style="border-collapse:collapse;">
              <td align="center" style="padding:0;Margin:0;">
                <table class="es-content-body" align="center" cellpadding="0" cellspacing="0" width="600" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;">
                  <tr style="border-collapse:collapse;">
                    <td align="left" style="padding:20px;Margin:0;">
                      <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
                        <tr style="border-collapse:collapse;">
                          <td width="560" align="center" valign="top" style="padding:0;Margin:0;">
                            <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
                              <tr style="border-collapse:collapse;">
                                <td align="left" style="padding:0;Margin:0;padding-bottom:15px;">
                                  <h2 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:24px;font-style:normal;font-weight:normal;color:#333333;">Welcome to the Stripo 2&nbsp;Columns Template!</h2>
                                </td>
                              </tr>
                              <tr style="border-collapse:collapse;">
                              </tr>
                              <tr style="border-collapse:collapse;">
                                <td align="left" style="padding:0;Margin:0;padding-top:20px;">
                                  <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">Now it’s the time to insert your own content into it by dragging blocks and structures from the side&nbsp;panel to this template area.</p>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                  <tr style="border-collapse:collapse;">
                    <td align="left" style="Margin:0;padding-top:20px;padding-bottom:20px;padding-left:20px;padding-right:20px;">
                      <!--[if mso]><table width="560"><tr><td width="270" valign="top"><![endif]-->
                      <table cellpadding="0" cellspacing="0" class="es-left" align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left;">
                        <tr style="border-collapse:collapse;">
                          <td width="270" class="es-m-p20b" align="left" style="padding:0;Margin:0;">
                            <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
                              <tr style="border-collapse:collapse;">
                                <td align="left" style="padding:0;Margin:0;">
                                  <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">When your email is ready, you can save it or export using one of available methods: to your MailChimp account or as a pure HTML.</p>
                                </td>
                              </tr>
                              <tr style="border-collapse:collapse;">
                                <td align="left" style="padding:0;Margin:0;padding-top:20px;">
                                  <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">Currently, our team is working to create customized blocks for you so you could create your emails faster.</p>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                      <!--[if mso]></td><td width="20"></td><td width="270" valign="top"><![endif]-->
                      <table cellpadding="0" cellspacing="0" class="es-right" align="right" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:right;">
                        <tr style="border-collapse:collapse;">
                          <td width="270" align="left" style="padding:0;Margin:0;">
                            <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
                              <tr style="border-collapse:collapse;">
                              </tr>
                              <tr style="border-collapse:collapse;">
                                <td align="center" style="padding:0;Margin:0;padding-top:10px;">
                                  <h3 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:20px;font-style:normal;font-weight:normal;color:#333333;">Image Title Goes Here</h3>
                                </td>
                              </tr>
                              <tr style="border-collapse:collapse;">
                                <td align="left" style="padding:0;Margin:0;padding-top:5px;">
                                  <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">You can change the size, layout or link of the downloaded image in the left-hand side menu.</p>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                      <!--[if mso]></td></tr></table><![endif]-->
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <table cellpadding="0" cellspacing="0" class="es-footer" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;background-color:transparent;background-repeat:repeat;background-position:center top;">
            <tr style="border-collapse:collapse;">
              <td align="center" style="padding:0;Margin:0;">
                <table class="es-footer-body" align="center" cellpadding="0" cellspacing="0" width="600" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:transparent;">
                  <tr style="border-collapse:collapse;">
                    <td align="left" style="padding:0;Margin:0;padding-top:20px;padding-left:20px;padding-right:20px;">
                      <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
                        <tr style="border-collapse:collapse;">
                          <td width="560" align="center" valign="top" style="padding:0;Margin:0;">
                            <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
                              <tr style="border-collapse:collapse;">
                                <td align="center" style="padding:20px;Margin:0;">
                                  <table border="0" width="75%" height="100%" cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
                                    <tr style="border-collapse:collapse;">
                                      <td style="padding:0;Margin:0px 0px 0px 0px;border-bottom:1px solid #CCCCCC;background:none;height:1px;width:100%;margin:0px;"> </td>
                                    </tr>
                                  </table>
                                </td>
                              </tr>
                              <tr style="border-collapse:collapse;">
                                <td align="center" style="padding:0;Margin:0;padding-top:10px;padding-bottom:10px;">
                                  <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:11px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">Your footer info might be placed here</p>
                                </td>
                              </tr>
                              <tr style="border-collapse:collapse;">
                                <td align="center" style="padding:0;Margin:0;padding-top:10px;padding-bottom:10px;">
                                  <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:11px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">© 2018 Your Company name</p>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <table cellpadding="0" cellspacing="0" class="es-content" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;">
            <tr style="border-collapse:collapse;">
              <td align="center" style="padding:0;Margin:0;">
                <table class="es-content-body" align="center" cellpadding="0" cellspacing="0" width="600" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:transparent;">
                  <tr style="border-collapse:collapse;">
                    <td align="left" style="padding:0;Margin:0;padding-left:20px;padding-right:20px;padding-bottom:30px;">
                      <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
                        <tr style="border-collapse:collapse;">
                          <td width="560" align="center" valign="top" style="padding:0;Margin:0;">
                            <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
                              <tr style="border-collapse:collapse;">
                                <td class="es-infoblock" align="center" style="padding:0;Margin:0;line-height:120%;font-size:12px;color:#CCCCCC;">
                                  <a target="_blank" href="http://stripo.email/?utm_source=templates&utm_medium=email&utm_campaign=basic&utm_content=two_columns" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:12px;text-decoration:underline;color:#2CB543;">
                                  <img src="https://ibwhc.stripocdn.email/content/guids/CABINET_9df86e5b6c53dd0319931e2447ed854b/images/64951510234941531.png" alt="" width="125" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;">                                    </a>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
</body>

</html>

    Which results into: enter image description here

  • Aia's Blog
    Aia's Blog over 2 years
    Hi, May i ask, if you have multiple items that needs to be changed inside the htmltemplate, like address, contact number,, aside from the name, i tried 3 htmltemplate.replacleAll, with name, phone and address listed, but when i send the email, only the last htmltemplate.replaceall is saved which is the address only, can you help me?
  • close2
    close2 over 2 years
    you would call replaceAll on the result of the previous replaceAll call: dart message.html = yourHtmlTemplate.replaceAll('{{NAME}}', name).replaceAll('{{ADDRESS}}', address);

Recents

Why Is PNG file with Drop Shadow in Flutter Web App Grainy?
How to troubleshoot crashes detected by Google Play Store for Flutter app
Cupertino DateTime picker interfering with scroll behaviour
Why does awk -F work for most letters, but not for the letter "t"?
Flutter change focus color and icon color but not works
How to print and connect to printer using flutter desktop via usb?
Critical issues have been reported with the following SDK versions: com.google.android.gms:play-services-safetynet:17.0.0
Flutter Dart - get localized country name from country code
navigatorState is null when using pushNamed Navigation onGenerateRoutes of GetMaterialPage
Android Sdk manager not found- Flutter doctor error
Flutter Laravel Push Notification without using any third party like(firebase,onesignal..etc)
How to change the color of ElevatedButton when entering text in TextField

Related

How to compose an email with HTML in Flutter?
EOS thermal printer does not print Arabic characters properly when using Flutter framework
How to parse a div content with Flutter?
How do I use <a> anchor elements in Flutter web?
I want to get an image from a website URL in Flutter
Show downloaded temporary local file(png,jpg,pdf,rtf) in webview using flutter
How to send email in flutter withouth open a email app?
how to pass data from parent page to webview page in flutter?
Listing by Attributes When Parsing Html in Dart & Flutter
How to manipulate HTML in Flutter webview?