{"id":967,"date":"2021-07-08T15:32:44","date_gmt":"2021-07-08T13:32:44","guid":{"rendered":"https:\/\/fileidea.com\/?p=967"},"modified":"2021-07-22T10:19:15","modified_gmt":"2021-07-22T08:19:15","slug":"trigger-default-email-app-to-send-email-in-flutter","status":"publish","type":"post","link":"https:\/\/fileidea.com\/2021\/07\/08\/trigger-default-email-app-to-send-email-in-flutter\/","title":{"rendered":"Trigger default email app to send email in Flutter"},"content":{"rendered":"\n
To use the old fashion mail-to functionality in Flutter that make the user’s phone open up Gmail or whatever is the default email application to start composing an email is actually pretty simple. Just like in ordinary JavaScript where you do something like this:<\/p>\n\n\n
\nwindow.location.href = 'mailto:address@fileidea.com&subject=Hello there&body=This is my message';\n<\/pre><\/div>\n\n\n
You can do it in a similar way in Dart. In your Flutter project add the dependency in your pubspec.yaml<\/strong> file under dependencies<\/strong>:<\/p>\n\n\n
\nurl_launcher: ^6.0.9\n<\/pre><\/div>\n\n\n
Now if you have let’s say a ListView like this that shows items: <\/p>\n\n\n
\nimport 'package:flutter\/material.dart';\n\nvoid main() {\n runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n \/\/ This widget is the root of your application.\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n title: 'FileIdea Example',\n theme: ThemeData(\n primarySwatch: Colors.green,\n ),\n home: MyHomePage(title: 'FileIdea example'),\n );\n }\n}\n\nclass MyHomePage extends StatefulWidget {\n MyHomePage({Key? key, required this.title}) : super(key: key);\n\n \/\/ This widget is the home page of your application. It is stateful, meaning\n \/\/ that it has a State object (defined below) that contains fields that affect\n \/\/ how it looks.\n\n \/\/ This class is the configuration for the state. It holds the values (in this\n \/\/ case the title) provided by the parent (in this case the App widget) and\n \/\/ used by the build method of the State. Fields in a Widget subclass are\n \/\/ always marked "final".\n\n final String title;\n\n @override\n _MyHomePageState createState() => _MyHomePageState();\n}\n\nclass EmailThing {\n late String title;\n late String email;\n\n EmailThing(title, email) {\n this.title = title;\n this.email = email;\n }\n}\n\nclass _MyHomePageState extends State<MyHomePage> {\n @override\n Widget build(BuildContext context) {\n final stuff = List<EmailThing>.generate(10,\n (i) => new EmailThing("thing ${i + 1}", "somerandomdomain$i@info.com"));\n\n return Scaffold(\n appBar: AppBar(\n title: Text(widget.title),\n ),\n body: Center(\n child: ListView.builder(\n itemCount: stuff.length,\n itemBuilder: (BuildContext context, int index) {\n return ListTile(\n onTap: () => {\n print(\n "hello from fileidea: " + stuff[index].email,\n )\n },\n tileColor: Colors.green[200],\n title: Text('${stuff[index].title}'),\n );\n },\n ),\n ),\n );\n }\n}\n\n<\/pre><\/div>\n\n\n
You would obviously have the EmailThing <\/strong>class inside a separate folder and not inside the main.dart<\/strong>. Anyways, we have now a list with generated items that is of the type EmailThing, this class has two fields, an email field and a field for the title. We can pass these field values into our email program.<\/p>\n\n\n\n<\/figure>\n\n\n\n
You click on one of the List items but nothing will happen, expect some logging. This is where I will put the function to call the launch function, which will open up the email program. Add the launch function like this:<\/p>\n\n\n
\nimport 'package:flutter\/material.dart';\nimport 'package:url_launcher\/url_launcher.dart';\n\nvoid main() {\n runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n \/\/ This widget is the root of your application.\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n title: 'FileIdea Example',\n theme: ThemeData(\n primarySwatch: Colors.green,\n ),\n home: MyHomePage(title: 'FileIdea example'),\n );\n }\n}\n\nclass MyHomePage extends StatefulWidget {\n MyHomePage({Key? key, required this.title}) : super(key: key);\n\n \/\/ This widget is the home page of your application. It is stateful, meaning\n \/\/ that it has a State object (defined below) that contains fields that affect\n \/\/ how it looks.\n\n \/\/ This class is the configuration for the state. It holds the values (in this\n \/\/ case the title) provided by the parent (in this case the App widget) and\n \/\/ used by the build method of the State. Fields in a Widget subclass are\n \/\/ always marked "final".\n\n final String title;\n\n @override\n _MyHomePageState createState() => _MyHomePageState();\n}\n\nclass EmailThing {\n late String title;\n late String email;\n\n EmailThing(title, email) {\n this.title = title;\n this.email = email;\n }\n}\n\nclass _MyHomePageState extends State<MyHomePage> {\n String? encodeQueryParameters(Map<String, String> params) {\n return params.entries\n .map((e) =>\n '${Uri.encodeComponent(e.key)}=${Uri.encodeComponent(e.value)}')\n .join('&');\n }\n\n @override\n Widget build(BuildContext context) {\n final stuff = List<EmailThing>.generate(10,\n (i) => new EmailThing("thing ${i + 1}", "somerandomdomain$i@info.com"));\n\n return Scaffold(\n appBar: AppBar(\n title: Text(widget.title),\n ),\n body: Center(\n child: ListView.builder(\n itemCount: stuff.length,\n itemBuilder: (BuildContext context, int index) {\n final Uri emailLaunchUri = Uri(\n scheme: 'mailto',\n path: stuff[index].email,\n query: encodeQueryParameters(\n <String, String>{'subject': stuff[index].title}),\n );\n\n return ListTile(\n onTap: () => {launch(emailLaunchUri.toString())},\n tileColor: Colors.green[200],\n title: Text('${stuff[index].title}'),\n );\n },\n ),\n ),\n );\n }\n}\n\n<\/pre><\/div>\n\n\n
So at the row 71-82 is where the important things happen. We will first encode our query parameters such as subject so we got the characters displayed correctly, then we will call on the launch <\/strong>function which will trigger the email program, in this case Gmail, to open up like this:<\/p>\n\n\n\n<\/figure>\n\n\n\n
You can add body also if you would want that so you already have a message written for you! <\/p>\n\n\n
\n final Uri emailLaunchUri = Uri(\n scheme: 'mailto',\n path: stuff[index].email,\n query: encodeQueryParameters(<String, String>{\n 'subject': stuff[index].title,\n 'body': "Hey, this is FileIdea, how are you?"\n }),\n );\n<\/pre><\/div>\n\n\n<\/figure>\n\n\n\n
And there you have it! <\/p>\n","protected":false},"excerpt":{"rendered":"
To use the old fashion mail-to functionality in Flutter that make the user’s phone open up Gmail or whatever is the default email application to start composing an email is actually pretty simple. Just like in ordinary JavaScript where you do something like this: You can do it in a similar way in Dart. In … <\/p>\n
![\"flutter](\"https:\/\/fileidea.com\/wp-content\/uploads\/2021\/07\/image-4.png\")
<\/figure>\n\n\n\n![\"open](\"https:\/\/fileidea.com\/wp-content\/uploads\/2021\/07\/image-5.png\")
<\/figure>\n\n\n\n![\"open](\"https:\/\/fileidea.com\/wp-content\/uploads\/2021\/07\/image-6.png\")
<\/figure>\n\n\n\n