Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
114 lines (91 sloc) 2.95 KB
title lastmod publishdate author draft description type tags vimeo github
SendGrid Flutter
2019-07-05 10:43:06 -0700
2019-07-05 10:43:06 -0700
Jeff Delaney
false
Send transactional email from Flutter with SendGrid
lessons
flutter
ios
android
sendgrid
346869096

{{% box emoji="👀" %}} 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. {{% /box %}}

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 "flutter" "pubspec.yaml" >}} {{< highlight yaml >}} dependencies: flutter: sdk: flutter

firebase_core: 0.4.0 firebase_auth: 0.11.1+7 cloud_functions: 0.4.0+2 {{< /highlight >}}

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 "dart" "main.dart" >}} {{< highlight dart >}} class TransactionalEmail extends StatefulWidget { @override createState() => _TransactionalEmailState(); }

class _TransactionalEmailState extends State {

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: [ 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'))
        ]
      ],
    ),
  ),
);

} } {{< /highlight >}}

You can’t perform that action at this time.