SendGrid Flutter

Send transactional email from Flutter with SendGrid 215 words.

Jeff Delaney avatar
By
Created
Last Updated
Code Slack
#flutter #ios #android #sendgrid
👀

This tutorial is an extension of the 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.

file_type_flutter pubspec.yaml 
dependencies:
  flutter:
    sdk: flutter

  firebase_core: 0.4.0
  firebase_auth: 0.11.1+7
  cloud_functions: 0.4.0+2

Transactional 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.

file_type_dartlang 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'))
            ]
          ],
        ),
      ),
    );
  }
}

Q&A Chat