Mail and SMS in Flutter

The world works in text. From advertisements to conversations, text is everywhere. The most popular modes of official textual communication are Mail followed by SMS. Companies use these modes to communicate not only with their employees but also with their customers. This has led app developers to include mailing and SMS services in their apps. Flutter uses special plugins to bring these features to life and work into mobile apps.

Steps to Implement Mail and SMS in Flutter

Step 1 : Create a New Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the below command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter

Step 2 : Adding the Dependency

To add the dependency to the pubspec.yaml file, add url_launcher as a dependency in the dependencies part of the pubspec.yaml file, as shown below:

dependencies:
     flutter:
       sdk: flutter
     url_launcher: ^6.3.1

– Now run the below command in the terminal.

flutter pub get

Step 3 : Importing the Dependency

Use the below line of code in the main.dart file, to import the url_launcher dependency :

import 'package:url_launcher/url_launcher.dart';

Step 4 : Code to implement Mail and SMS

– Sending a Mail in Flutter

Now, let’s create a function that can be called whenever the user clicks a button that’s linked to a particular Mail ID, to which the user can send a mail.

Future<void> _sendingMails() async {
      var _url = Uri.parse("mailto:[email protected]");
      if (!await launchUrl(_url, mode: LaunchMode.externalApplication)) {
             throw Exception('Could not launch $_url');
      }
}

• The function is named here as “_sendingMails” and the function is declared as “async”, so that it returns a promise.
• The “url” variable is assigned with the required Mail ID, as a string. The syntax “mailto:” instructs the app to open the default mailing app of the mobile phone and also fill the “To” section with the Mail ID mentioned in the ‘url’ variable. It is declared as a “const” so that the variable is not changed at any circumstance.
• If there is a possibility to launch the URL, only then the URL is launched by calling the launch() function with URL variable as an attribute.
• Else, it will throw/print a text with the url value, as an error message.

– Sending an SMS in Flutter

Now, let’s create a function that can be called whenever the user clicks a button that’s linked to a phone number, to which the user can send an SMS.

Future<void> _sendingSMS() async {
      var _url = Uri.parse("sms:1234567890");
      if (!await launchUrl(_url, mode: LaunchMode.externalApplication)) {
            throw Exception('Could not launch $_url');
      }
}

• The function is named here as “_sendingSMS” and the function is declared as “async”, so that it returns a promise.
• The “url” variable is assigned with the required phone number, as a string. The syntax “sms:” instructs the app to open the default messaging app of the mobile phone and also fill the “To” section with the phone number mentioned in the ‘url’ variable. It is declared as a “const”, so that the variable is not changed at any circumstance.
• If there is a possibility to launch the URL, only then the url is launched by calling the “launch()” function with url variable as an attribute.
• Else, it will throw/print a text with the url value, as an error message.

– Calling the functions

The above functions can be called whenever needed in code, by calling the name of the functions as such. The examples are as follows:

• This creates two raised buttons having the text “Here” and “Here” on it, respectively.
• For the onPressed attribute, we are calling _sendingMails and _sendingSMS respectively so that, when the first button is pressed the default mail app opens with the Mail ID filled in the “To” section and when the second button is pressed the default messaging app is opened with phone number filled in the “To” section.

Complete Source Code

main.dart:

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

// app build process is triggered here
void main(){
   WidgetsFlutterBinding.ensureInitialized();
   runApp(const MyApp());
}

Future<void> _sendingMails() async {
  var _url = Uri.parse("mailto:[email protected]");
  
  if(!await launchUrl(_url, mode: LaunchMode.externalApplication)) {
    throw Exception('Could not launch $_url');
  }
}

Future<void> _sendingSMS() async {
  var _url = Uri.parse("sms:1234567890");
  
  if (!await launchUrl(_url, mode: LaunchMode.externalApplication)) {
    throw Exception('Could not launch $_url');
  }
}


class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Geeks for Geeks'),
          backgroundColor: Colors.green,
          foregroundColor: Colors.white,
        ),
        body: SafeArea(
          child: Center(
            child: Column(
              children: [
                Container(
                  height: 200.0,
                ),
                const Text(
                  'Welcome to GFG!',
                  style: TextStyle(
                    fontSize: 35.0,
                    color: Colors.green,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Container(
                  height: 20.0,
                ),
                const Text(
                  'For any Queries, Mail us',
                  style: TextStyle(
                    fontSize: 18.0,
                    color: Colors.green,
                  ),
                ),
                Container(
                  height: 10.0,
                ),
                ElevatedButton(
                  onPressed: _sendingMails,
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.green,
                    foregroundColor: Colors.white
                  ),
                  child: const Text('Here'),
                ), // ElevatedButton

             
                Container(
                  height: 20.0,
                ),
                const Text(
                  'Or Send SMS',
                  style: TextStyle(
                    fontSize: 18.0,
                    color: Colors.green,
                  ),
                ),
                Container(
                  height: 10.0,
                ),
                ElevatedButton(
                  onPressed: _sendingSMS,
                  style:ElevatedButton.styleFrom(
                    backgroundColor: Colors.green,
                    foregroundColor: Colors.white
                  ),
                  child: const Text('Here'),
                ), // ElevatedButton

              ],
            ),
          ),
        ),
      ),
    );
  }
}

To know more about ElevatedButton in flutter refer this article: Flutter – ElevatedButton Widget

Output:

varshaadhanasekar

Follow

Improve

Article Tags :

• Flutter
• Flutter
• Flutter-Packages
• Flutter-Plugins