Send transactional email from Flutter with SendGrid 215 words.
Created
Last Updated
Last Updated
This tutorial is an extension of the [SendGrid Transactional Email Guide](/lessons/sendgrid-transactional-email-guide/). You must have the Cloud Functions deployed to start sending email from your frontend app.
Initial Setup
To support both iOS and Android, you will need to follow the Firebase installation guide and have the cloud_functions and auth plugins from FlutterFire installed.
pubspec.yaml
dependencies:
flutter:
sdk: flutter
firebase_core: 0.4.0
firebase_auth: 0.11.1+7
cloud_functions: 0.4.0+2Transactional Email Widget
The widget below creates a new user with email/pass auth and provides a button to send a transactional email (via callable functions) from the app.
main.dart
class TransactionalEmail extends StatefulWidget {
@override
createState() => _TransactionalEmailState();
}
class _TransactionalEmailState extends State<TransactionalEmail> {
final HttpsCallable callable = CloudFunctions.instance.getHttpsCallable(
functionName: 'genericEmail',
);
final FirebaseAuth auth = FirebaseAuth.instance;
FirebaseUser user;
String emailAddress = 'CHANGE_ME@example.com';
@override
initState() {
super.initState();
auth.onAuthStateChanged.listen((u) {
setState(() => user = u);
});
}
sendEmail() {
return callable.call({
'text': 'Sending email with Flutter and SendGrid is fun!',
'subject': 'Email from Flutter'
}).then((res) => print(res.data));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Send Email with SendGrid and Flutter'),),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
if (user != null) ...[
Text('$user'),
FlatButton(child: Text('SignOut'), onPressed: auth.signOut),
FlatButton(child: Text('Send Email with Callable Function'), onPressed: sendEmail)
]
else ...[
FlatButton(child: Text('Login'), onPressed: () => auth.createUserWithEmailAndPassword(email: emailAddress, password: 'demoPass23'))
]
],
),
),
);
}
}