Email Customization In Flutter
Digital Communication Is an Integral part of communication in today’s era to help us in getting the message quicker & broader. Over the years, Email has always been one of the most popular modes of official textual communications. Mobile provides us the ability to send in an email from remote locations where you may not have enough time to formulate mail. In this article, we’ll send emails using a custom mailer template by using the Sendinblue email provider.
Table of Contents :
Introduction:
The Sendinblue API gives developers access to the entire range of Sendinblue features via a standardized programmatic interface. Using Sendinblue’s API, you can do just about anything you can do on sendinblue.com via the customer interface.
All Your Digital Marketing Tools in One Place – Sendinblue
Take your business to new heights with the complete all-in-one digital marketing toolbox that’s built to scale and…www.sendinblue.com
Create a Template:
- Create a test template that contains dynamic contents
2. Design the template
Once directed select the import a template
3. Click “Import” next to the URL. You should be redirected to the following page below.
Click the “Save & Quit” button, then on the new page “ Save and Activate”.
Creating the API request:
In the code snippet, we’ve created a method to call web API for sending an email.
You’ve to add a header request.
API Request method
In this code snippet, we’re using sendinblue to create a custom template and send an email.
Code File :
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app_sendinblue/api-provider.dart';
import 'package:fluttertoast/fluttertoast.dart';
class HomeView extends StatefulWidget {
@override
_HomeViewState createState() => _HomeViewState();
}
class _HomeViewState extends State<HomeView> {
var sNameController = TextEditingController();
var rNameController = TextEditingController();
var sEmailController = TextEditingController();
var rEmailController = TextEditingController();
var subController = TextEditingController();
var _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text("Send Email"),
),
body: Container(
margin: const EdgeInsets.all(20),
child: Form(
key: _formKey,
child: Column(
children: [
TextField(
controller: sNameController,
decoration: InputDecoration(
labelText: "Sender's Name",
labelStyle: TextStyle(
color: Colors.black,
),
border: OutlineInputBorder(),
focusedBorder: OutlineInputBorder(),
),
),
SizedBox(height: 10,),
TextFormField(
controller: sEmailController,
validator: (value) {
if (value.isEmpty ||
!RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+")
.hasMatch(value)) {
return 'Enter a valid email!';
}
return null;
},
decoration: InputDecoration(
labelText: "Enter sender's email id ",
labelStyle: TextStyle(
color: Colors.black,
),
border: OutlineInputBorder(),
focusedBorder: OutlineInputBorder(),
),
),
SizedBox(height: 10,),
TextField(
controller: subController,
decoration: InputDecoration(
labelText: "Subject",
labelStyle: TextStyle(
color: Colors.black,
),
border: OutlineInputBorder(),
focusedBorder: OutlineInputBorder(),
),
),
SizedBox(height: 10,),
TextFormField(
controller: rNameController,
decoration: InputDecoration(
labelText: "Receiver's Name",
labelStyle: TextStyle(
color: Colors.black,
),
border: OutlineInputBorder(),
focusedBorder: OutlineInputBorder(),
),
),
SizedBox(height: 10,),
TextFormField(
controller: rEmailController,
validator: (value) {
if (value.isEmpty ||
!RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+")
.hasMatch(value)) {
return 'Enter a valid email!';
}
return null;
},
decoration: InputDecoration(
labelText: "Enter receiver's email id ",
labelStyle: TextStyle(
color: Colors.black,
),
border: OutlineInputBorder(),
focusedBorder: OutlineInputBorder(),
),
),
SizedBox(height: 10,),
RaisedButton(onPressed: (){
//String senderName, String receiverName, String sEmail, String rEmail,String sub,
if(_formKey.currentState.validate()){
new ApiProvider().sendEmail(sNameController.text.toString(),
rNameController.text,sEmailController.text,rEmailController.text,
subController.text,context).then((value){
if(value!=null){
Fluttertoast.showToast(
msg: "Email Send",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 16.0
);
}
});
}
_formKey.currentState.save();
},
child: Text('Send Mail'),)
],
),
),
),
),
);
}
}
Output
Conclusion
In this article, I have explained the Sendinblue package demo which you can modify and experiment with according to your own. This little introduction was about customized the email template.
I hope this blog will provide you with sufficient information in trying up to use the send email in your flutter projects. We will show this demo program for working Sendinblue in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
