Custom Code Showcase
DP
Damien P.
 · Flutter, it becomes interesting ;-)

Send an SMS with Twilio

Hi,

For the application I'm developing, I needed an SMS sending system for double authentication that doesn't use Firebase's one. So I decided to use Twilio's SMS sending service.

In this tutorial, I will give you two methods to do this. One will be using custom actions, the other will be using API calls (only for users who have a Pro account).

REQUIREMENTS 


1- You need a Twilio account that can be created for free with a credit ($15.50 I think) to test their service.
2- When you are connected, you have to "buy" a phone number, by going to your console and click on Phone Number > Manage > Buy a number




 
Be careful to choose a number that is able to send SMS. Typically, I had to take an American phone number because for a free account the French numbers are not eligible. Please note the number that you will be given in the international form (ex: +1 000 000 0000)
 
3- Normally, when you click on "Verified Caller IDs", you should see your own phone number that you used when you registered. This will be the only number you will be able to send an SMS to as long as you have a free account.
4- Go to Messaging > Get Set Up to finalize the SMS sending and get two important variables: Account SID and Auth Token

METHOD 1 - CUSTOM ACTIONS


1- Go to Custom Action

2- Click on "+ Create

3- Give a name to your code, I chose "sendSMSTwilio".




5- "Define Arguments", click on "+ Add Parameter" then give an for Argument Name "phoneUser" and select the "Data Type" in our case here "String"

5 - Click on "+ Add Parameter" then give an for Argument Name "messageSMS" and select the "Data Type" in our case here "String"




6- Click on "+ Add Dependency" then enter "twilio_flutter".





7- On the right side, enter the following code:

import 'package:twilio_flutter/twilio_flutter.dart';

Future sendSMSTwilio(
  String phoneUser,
  String messageSMS,
) async {
  var twilioFlutter = TwilioFlutter(
      accountSid: '[ACCOUNT_SID]',
      authToken: '[AUTH_TOKEN]',
      twilioNumber: '[YOUR_PHONE_NUMBER_TWILIO]');

  twilioFlutter.sendSMS(toNumber: phoneUser, messageBody: messageSMS);
}

Replace the values with your own

You should have this screen :



12- Finish by pressing "Check errors", after a few seconds you should get a green button "No Errors!".

You can now use this code in your actions.

METHOD 2 - API CALL


At first, you have to encode the couple [ACCOUNT_SID] :[AUTH_TOKEN] in base64. For that we will launch a command line with Terminal. 

1- Launch Terminal, then enter the following code by replacing the values by yours:

echo -n '[ACCOUNT_SID]:[AUTH_TOKEN]' | base64



Note the string that is displayed.

2- Go back to FlutterFlow, go to API Calls then click on the "Add API Call" button

3- In " API Call Name ", give a name to your API call. I chose "sendSMSTwilio". 

4- In Method Type, choose " POST ".

5- In API URL, enter 
 

https://api.twilio.com/2010-04-01/Accounts/[ACCOUNT_SID]/Messages.json

(replacing [ACCOUNT_SID] by yours)

6- Click on " Add Header " then in Name, enter " Content-Type " and in value, enter " multipart/form-data ".

7- Click again on " Add Header " then in Name, enter " Authorization " and in value, enter " Basic [TERMINAL_STRING] " (replacing [TERMINAL_STRING] by the character string you obtained in the Terminal)


8- Click on " Add Variable " then in Name, enter " To ", in Value Type, choose " String " and in Default Value, leave empty

9- Click again on " Add Variable " then in Name, enter " Body ", in Value Type, choose " String " and in Default Value, leave empty

10- Click again on " Add Variable " then in Name, enter " From ", in Value Type, choose " String " and in Default Value, leave empty



11- You can test by clicking on " Response & Test ".

I hope you will find it useful. 😅
Don't hesitate to ask me questions.

Damien

5
22 replies