# Flutter -------------------------------------------------------------------------------- title: "Introduction" description: "Build a dialer application in Flutter using Catalyst Advanced I/O Functions,DataStore and integration with Twilio’s Voice API that establishes an outbound call connection between your sales team and customers." last_updated: "2026-03-18T07:41:08.675Z" source: "https://docs.catalyst.zoho.com/en/tutorials/dialer-mobile-app/flutter/introduction/" service: "All Services" related: - Project Directory Structure (/en/cli/v1/project-directory-structure/introduction/) - Android SDK (/en/sdk/android/v2/overview/) - iOS SDK (/en/sdk/ios/v2/overview/) - Flutter SDK (/en/sdk/flutter/v2/overview/) - Twilio (https://www.twilio.com/) -------------------------------------------------------------------------------- # Dialer Mobile App ### Introduction In this tutorial, we will build a simple Android and iOS Dialer application in Catalyst by integrating with {{%link href="https://www.twilio.com/en-us" %}}Twillio{{%/link%}}. The applications for both the Android and iOS platforms will be built on the {{%link href="https://flutter.dev/" %}}Flutter framework{{%/link%}} using the {{%link href="/en/sdk/flutter/v2/overview/" %}}Catalyst Flutter SDK{{%/link%}}. The Dialer application allows you to initiate an outbound audio call connection between your sales team and customers. Flutter is an open-source framework by Google built on the Dart programming language that is used to develop natively-compiled, cross-platform applications. {{%link href="/en/sdk/flutter/v2/overview/" %}}Catalyst Flutter SDK{{%/link%}} contains tools for various Catalyst services and components, for both Android and iOS environments. {{%link href="https://www.twilio.com/en-us" %}}Twillio{{%/link%}} is a cloud communication platform that provides a rich set of REST APIs to establish meaningful and quick connections through voice, video, messaging, live-streaming, emails, and more. Twilio platform provides a variety of functionalities such as personalized customization of text-to-speech dial messages, call recordings, conference calling, call forwarding, and tracking. We will use the {{%link href="https://www.twilio.com/voice" %}}Programmable Voice API{{%/link%}} of Twilio for setting up an outbound call between two phone numbers through a virtual phone number. {{%note%}}{{%bold%}}Note{{%/bold%}}: You will need a paid Twilio account for this application, because integration with Twilio's APIs is not available in its free version. A Twilio phone number (virtual number) can be purchased from the Twilio console based on your country preference when you sign up for a Twilio account. {{%/note%}} The mobile application will appear as follows: **Android** **iOS** The Dialer application contains the following fundamental Catalyst components and the features they provide: 1. {{%link href="/en/serverless/getting-started/introduction/" %}}**Catalyst Serverless**{{%/link%}}: - {{%bold%}}{{%link href="/en/serverless/help/functions/advanced-io" %}}Advanced I/O Function{{%/link%}}{{%/bold%}}: The Advanced I/O function is coded in {{%bold%}}Node.js{{%/bold%}} programming environment. It contains backend logic that integrates with Twilio's Programmable Voice API to initiate outbound calls and also keep track of the call logs. 2. {{%link href="/en/cloud-scale/getting-started/introduction/" %}}**Catalyst Cloud Scale**{{%/link%}}: - {{%bold%}}{{%link href="/en/cloud-scale/help/data-store/introduction" %}}Data Store{{%/link%}}{{%/bold%}}: To store information related to the calls you make, such as the phone numbers, countries from which the calls are initiated, timestamp of the calls, and call statuses. - {{%bold%}}{{%link href="/en/cloud-scale/help/zcql/introduction" %}}ZCQL{{%/link%}}{{%/bold%}}: To query the Data Store and fetch the call logs after a call is completed, to be rendered in the web client. You will need to configure both the Android and iOS apps in Catalyst to build them with the Catalyst Flutter SDK. This includes registering the apps with Catalyst to obtain Catalyst-specific property files for both, to be included in the respective code modules. We will use the Catalyst web console and the Catalyst Command Line Interface (CLI), as well as the required mobile IDEs and simulators for both Android and iOS, to build and test this application. In this tutorial, we have provided the code for the files to be included in the Advanced I/O function, and the Flutter code for both Android and iOS apps. You will just need to copy the provided code and paste it into the appropriate files as directed. ### Application Architecture The Dialer application architecture is depicted below: 1. The application accepts user input, such as the sales team's contact number and the customer’s phone number. 2. The phone numbers entered by the user are validated. Upon successful validation, the numbers will be stored in CallLogs table of Catalyst's Data Store and a request will be sent to the Twilio's Voice API. 3. Upon calling the Twilio API, an outbound call is initiated and routed from your Twilio number to the sales team's contact number. 4. At this point, the dialer application sends TwilML instructions to the Voice API in order to dictate the actions to be presented to the user once the call is on-going. In our application, we have configured an url that returns voice instructions back to the REST API. 5. Twilio's Voice Response function has pre-configured verbs that allow you to customize the call actions according to your preference. Here, we will use the {{%link href="https://www.twilio.com/docs/voice/twiml/dial" %}}dial(){{%/link%}} and {{%link href="https://www.twilio.com/docs/voice/twiml/say" %}}say(){{%/link%}} verbs to dial the sales number from your account's Twilio number and present a message to the caller once the respective call is being forwarded. 6. On successful completion of the call, the call details such as call duration, call status, called country, and timestamp of the call are updated in the table. The call will be terminated when either of the parties hang up or if Twilio’s signal is busy. 7. The user can also view the call logs in the Dialer application. The logs will be fetched by querying the Data Store. The Dialer application serves as a quick solution to initiate outbound audio call communications to your customers. -------------------------------------------------------------------------------- title: "Prerequisites" description: "Build a dialer application in Flutter using Catalyst Advanced I/O Functions, DataStore and integration with Twilio’s Voice API that establishes an outbound call connection between your sales team and customers." last_updated: "2026-03-18T07:41:08.676Z" source: "https://docs.catalyst.zoho.com/en/tutorials/dialer-mobile-app/flutter/prerequisites/" service: "All Services" related: - CLI Command Reference (/en/cli/v1/cli-command-reference/) - Install CLI (/en/getting-started/installing-catalyst-cli/) - Login CLI (/en/cli/v1/login/login-from-cli/) -------------------------------------------------------------------------------- # Prerequisites Before you begin building the application, you must have the following prerequisites installed on your system: 1. {{%bold%}}Catalyst CLI{{%/bold%}} : Catalyst CLI contains a host of tools that enable you to initialize, develop, test, and deploy the components of your application from your local machine. We will be working with Catalyst CLI in this tutorial. You must perform these actions: 1. {{%bold%}}Install Catalyst CLI{{%/bold%}}: Catalyst CLI is installed through NPM. You must therefore have NPM and Node.js installed on your system before you install the CLI. Refer to the {{%link href="/en/getting-started/installing-catalyst-cli" %}}**Install Catalyst CLI help page**{{%/link%}} for details on the pre-requisites and the steps to install it. 2. {{%bold%}}Login Catalyst CLI{{%/bold%}}: After you install Catalyst CLI, you must authenticate the CLI with your Catalyst account before using it. Refer to the {{%link href="/en/cli/v1/login/login-from-cli/" %}}**CLI Login help page**{{%/link%}} for the steps to log in from Catalyst CLI and the various options available for it. 2. {{%bold%}}Any IDE tool for Node.js code development{{%/bold%}} : Download and install an IDE of your choice in your system. You can use any IDE to work with the function and the client code. Some popular choices include Visual Studio Code, IntelliJ IDEA, Eclipse, and Sublime Text. 3. **Install Flutter** 1. **Download and Install Flutter :** Visit the official Flutter website at {{%link href="https://docs.flutter.dev/get-started/install" %}}flutter.dev{{%/link%}} and download the Flutter SDK for your operating system. 2. **Extract the Archive :** Extract the downloaded Flutter SDK archive to a location on your computer. 3. **Set up Environment Variables :** Add the Flutter SDK's bin directory to your system's PATH environment variable. This step allows you to access Flutter's command-line tools from any directory in your terminal. 4. **Run flutter doctor :** Open your terminal and run the following command : {{%code%}} flutter doctor{{%/code%}} This command verifies if there are any additional requirements or dependencies needed for Flutter development and provides instructions to install or set them up. {{%note%}}{{%bold%}}Note :{{%/bold%}} Refer to {{%link href="https://docs.flutter.dev/" %}}Flutter's official documentation{{%/link%}} for help about the framework.{{%/note%}} 4. **Android studio** Download the latest version of Android studio from their official site. Run the downloaded installer in your machine. While installing, please make sure to select the following components mandatorily : * Android SDK (latest version available) * Android Virtual Device (AVD) * Device Emulator (You can skip it if you’ll test only on physical devices) Also, make sure the IDE must meet these minimum supported environments: * Android Studio- 3.1.1 or later * OS- Android 21 (Lollipop 4.4) * Kotlin- 1.3.20 * Gradle- 3.4.0 {{%info image="/images/tutorials/todo-list/vscode.png"%}}If you are a Visual Studio Code IDE user, you can install the {{%bold%}}Catalyst Tools{{%/bold%}} extension, and use your IDE itself in place of the CLI. You can find more details about the Catalyst VS Code extension from this {{%link href="/en/catalyst-extensions/vs-code-extension/introduction/" %}}help section{{%/link%}}.{{%/info%}} 5. **iOS Setup** * To run the Flutter application on the iOS platform, please ensure to have these minimum supported environments in place: * {{%link href="https://guides.cocoapods.org/" %}}CocoaPods{{%/link%}} * iOS - 9 or later * Swift - 4 or later * Set up a device or an emulator in your IDE for running your app * We will be using {{%link href="https://developer.apple.com/xcode/" %}}XCode{{%/link%}} for running the application in iOS in this tutorial. * Instal Xcode from the Mac App Store. After it is installed, launch it and agree to the license agreement, if prompted. 6. {{%bold%}} Twilio account and credentials{{%/bold%}} : As discussed earlier, you will need to purchase a paid Twilio account in order to integrate with Twilio's Voice API. Make sure you obtain the below credentials in prior from your Twilio account: 1. {{%bold%}}Twilio phone number{{%/bold%}} 2. {{%bold%}}Twilio SID{{%/bold%}} 3. {{%bold%}}AuthToken{{%/bold%}} You can navigate to the Twilio console to obtain your account’s SID and AuthToken. These are auto-generated by Twilio upon account creation. {{%bold%}}SID{{%/bold%}} is a unique string value provided by Twilio to identify your account's call resource and AuthToken is generated to authenticate your API requests. Make sure to get a voice capable Twilio number. Again, this can be purchased for free from the Twilio console itself. As discussed earlier, the primary purpose of this number is to route calls in your application. We will use these credentials in our code section while calling Twilio's Voice API. -------------------------------------------------------------------------------- title: "Create a project" description: "Build a dialer application in Flutter using Catalyst Advanced I/O Functions,DataStore and integration with Twilio’s Voice API that establishes an outbound call connection between your sales team and customers." last_updated: "2026-03-18T07:41:08.676Z" source: "https://docs.catalyst.zoho.com/en/tutorials/dialer-mobile-app/flutter/create-project/" service: "All Services" related: - Project Directory (/en/cli/v1/project-directory-structure/introduction) - Setup Catalyst Projects (/en/getting-started/catalyst-projects) -------------------------------------------------------------------------------- # Create a Project Let's {{%link href="/en/getting-started/catalyst-projects" %}}create a Catalyst project{{%/link%}} from the Catalyst console. 1. Log in to the {{%link href="https://console.catalyst.zoho.com/baas/index" %}}Catalyst console{{%/link%}} and click {{%bold%}}Create new Project{{%/bold%}}. <br/> 2. Enter the project's name as {{%bold%}}'DialerApp'{{%/bold%}} in the pop-up window and click **Create**. <br/> Your project will be created and opened. -------------------------------------------------------------------------------- title: "Create a table" description: "Build a dialer application in Flutter using Catalyst Advanced I/O Functions,DataStore and integration with Twilio’s Voice API that establishes an outbound call connection between your sales team and customers." last_updated: "2026-03-18T07:41:08.679Z" source: "https://docs.catalyst.zoho.com/en/tutorials/dialer-mobile-app/flutter/create-table/" service: "All Services" related: - Data Store (/en/cloud-scale/help/data-store/introduction) -------------------------------------------------------------------------------- # Create a Table in the Data Store Let's now create a table in the Data Store of the **Dialer** project. As discussed earlier, this table is used to store to-do list items created by the user. To create a table: 1. Navigate to {{%bold%}}Cloud Scale{{%/bold%}} in the Catalyst console and click **Start Exploring**. <br/> 2. Navigate to **Data Store** on the left pane and click **Create a new Table**. <br/> 3. Enter the table's name as "{{%bold%}}CallLog{{%/bold%}}" and click {{%bold%}}Create{{%/bold%}}. <br/> {{%note%}}{{%bold%}}Note : {{%/bold%}} Ensure that you enter the name exactly as instructed, because the application's code contains the same name.{{%/note%}} The table is now created and displayed in the Data Store page. ### Create Columns Next, let's create a column to store the details of the call. 1. Click {{%bold%}}New Column{{%/bold%}} in the Schema View section of the table. <br/> 2. Enter the column's name as "{{%bold%}}callDuration{{%/bold%}}". Select the data type as {{%bold%}}'int'{{%/bold%}} and click {{%bold%}}Create{{%/bold%}}. You can learn about the various data types supported by Catalyst and the other properties of a column from the {{%link href="/en/cloud-scale/help/data-store/introduction" %}}Data Store help page{{%/link%}}. The column will be created and listed in the Schema View section. You must now create five other columns in the same way. The table must contain six columns in total with the following mandatory properties : <table class="content-table"> <thead> <tr> <th>Column Name</th> <th>Data Type</th> <th>Max Length</th> </tr> </thead> <tbody> <tr> <td>callStatus</td> <td>varchar</td> <td>255</td> </tr> <tr> <td>calledCountry</td> <td>varchar</td> <td>255</td> </tr> <tr> <td>timeOfCall</td> <td>varchar</td> <td>255</td> </tr> <tr> <td>fromNumber</td> <td>varchar</td> <td>255</td> </tr> <tr> <td>toNumber</td> <td>text</td> <td></td> </tr> </tbody> </table> {{%note%}}{{%bold%}}Note:{{%/bold%}} Ensure that you enter the name exactly as instructed, because the application's code contains the same name.{{%/note%}} You have now configured all the necessary components from the console. You will now be working on coding the application from your local system. -------------------------------------------------------------------------------- title: "Initialize the project" description: "Build a dialer application in Flutter using Catalyst Advanced I/O Functions,DataStore and integration with Twilio’s Voice API that establishes an outbound call connection between your sales team and customers." last_updated: "2026-03-18T07:41:08.679Z" source: "https://docs.catalyst.zoho.com/en/tutorials/dialer-mobile-app/flutter/initialize-project/" service: "All Services" related: - Project Directory Structure (/en/cli/v1/project-directory-structure/introduction) - Initialize Resources (/en/cli/v1/initialize-resources/introduction) -------------------------------------------------------------------------------- # Initialize the Project from the CLI You can now begin working on your Catalyst project from the CLI. The first step is to initialize the project in an empty directory. This will be the home directory of your project and all of the project files will be saved in it. You can learn more about this from the {{%link href="/en/cli/v1/project-directory-structure/introduction" %}}Project Directory Structure help page{{%/link%}}. You can learn about initializing a project in detail from the {{%link href="/en/cli/v1/initialize-resources/introduction/" %}}CLI help documentation{{%/link%}}. For the Dialer application, we will initialize the Advanced I/O function component using the following steps. 1. Create a folder for the project on your local machine and navigate to it from the terminal. 2. Initialize a project by executing the following command from that directory: {{%cli%}} catalyst init{{%/cli%}} 3. The CLI will now ask you to select the default Catalyst organization. Select the organization in which you created the project in the first step of this tutorial and press **Enter**. 4. The CLI will now ask you to associate a Catalyst project with the directory. Associate it with the project that we created earlier from the console. Select {{%bold%}}CatalystDialerApp{{%/bold%}} from the list and press {{%bold%}}Enter{{%/bold%}}. <br/> 4. Select {{%bold%}}Functions{{%/bold%}} using the space bar. Press the {{%bold%}}Enter{{%/bold%}} key to initialize. <br/> 5. The CLI will initiate the function setup. Select {{%bold%}}AdvancedIO{{%/bold%}} as the function type. <br/> 6. Select the latest runtime version of **nodeJS** platform listed. <br/> 7. Enter {{%badge%}}dialer{{%/badge%}} as the package name, {{%badge%}}index.js{{%/badge%}} as the entry point, and your email address as the author and press {{%bold%}}Enter{{%/bold%}}. You can alternatively press {{%bold%}}Enter{{%/bold%}} without entering inputs to fill in the default values. The CLI will prompt the initialization of the Node dependencies. Press {{%bold%}}Y{{%/bold%}} to confirm the installation, and press {{%bold%}}Enter{{%/bold%}} to confirm your choice. The Node modules will be installed. <br/> The CLI will prompt the initialization of the Node dependencies. Press {{%bold%}}Y{{%/bold%}} to confirm the installation, and press {{%bold%}}Enter{{%/bold%}} to confirm your choice. The Node modules will be installed. {{%note%}}{{%bold%}}Note{{%/bold%}}: Ensure that you enter the function's package name or class name exactly as instructed, because the application's code contains the same name.{{%/note%}} Catalyst initialization is now complete. Your {{%link href="/en/cli/v1/project-directory-structure/introduction" %}}project directory{{%/link%}} (CATALYST_PROJECT_HOME), {{%link href="/en/cli/v1/project-directory-structure/functions-directory" %}}functions directory{{%/link%}} (CATALYST\_FUNCTIONS\_HOME) along with the configuration files and dependencies, {{%link href="/en/cli/v1/project-directory-structure/catalyst-json" %}}catalyst.json{{%/link%}} and a hidden {{%badge%}}.catalystrc{{%/badge%}} file will be created in a standard structure. This is the structure of the DailerApp project's directory with the function directory configured. -------------------------------------------------------------------------------- title: "Configure the Advanced I/O function" description: "Build a dialer application in Flutter using Catalyst Advanced I/O Functions,DataStore and integration with Twilio’s Voice API that establishes an outbound call connection between your sales team and customers." last_updated: "2026-03-18T07:41:08.680Z" source: "https://docs.catalyst.zoho.com/en/tutorials/dialer-mobile-app/flutter/configure-advanced-function/" service: "All Services" related: - Advanced I/O Functions (/en/serverless/help/functions/advanced-io/) - Functions Directory Structure (/en/cli/v1/project-directory-structure/functions-directory) -------------------------------------------------------------------------------- # Configure the Advanced I/O Function Let's begin coding the Dialer app by configuring the function component. The function's directory,{{%badge%}}functions/dialer{{%/badge%}} contains: * The {{%badge%}}index.js{{%/badge%}} main function file * The {{%badge%}}catalyst-config.json{{%/badge%}} configuration file * Node modules * {{%badge%}}{{%link href="https://docs.npmjs.com/files/package.json" %}}package.json{{%/link%}}{{%/badge%}} and {{%badge%}}{{%link href="https://docs.npmjs.com/configuring-npm/package-lock-json.html" %}}package-lock.json{{%/link%}}{{%/badge%}} dependency files ### Install packages for Node.js You will need to install two additional packages in the functions directory of your application before proceeding further. #### {{%bold%}}Express{{%/bold%}} To import the {{%link href="https://expressjs.com/" %}}Express Node.js{{%/link%}} package in the code, you must install the Express dependencies in your system. The express framework is used to manage routes and also respond to HTTP requests. To install {{%badge%}}Express.js{{%/badge%}} in your local machine, navigate to the function's home directory ({{%badge%}}functions/dialer{{%/badge%}}) in your terminal and execute the following command: {{%cli%}} npm install express --save {{%/cli%}} This will install the Express module and save the dependencies. #### {{%bold%}}Twilio{{%/bold%}} You will also need to install the {{%link href="https://www.npmjs.com/package/twilio" %}}Twilio package{{%/link%}} for this tutorial. The Twilio library allows you to make HTTP requests to the Twilio API. Execute the below command to add the Twilio dependencies. {{%cli%}} npm install twilio {{%/cli%}} This information will also be updated in the {{%badge%}}package.json{{%/badge%}} file. Next, let's add the code in the function file. Copy the Node js code and paste it in {{%badge%}}index.js{{%/badge%}} in the {{%badge%}}functions/dialer{{%/badge%}} directory. You can use any IDE of your choice to work with the application's files. {{%note%}}{{%bold%}}Note{{%/bold%}}: Please go through the code given in this section to ensure you fully understand it. We will discuss the architecture of the function and the client in the next section.{{%/note%}} {{% panel_with_adjustment header="index.js" class="language-javascript line-numbers" %}}const express = require("express"); const app = express(); var twilio = require('twilio'); const VoiceResponse = require("twilio").twiml.VoiceResponse; var catalyst = require('zcatalyst-sdk-node'); var YOUR_TWILIO_NUMBER = '+xxxxxxxxxx'; var accountSid = "xxxxxxxxxxxxxx"; var authToken = "7xxxxxxxxxxxxxxx8"; var twilioClient = twilio(accountSid, authToken); var bodyParser = require('body-parser'); app.use(bodyParser.json()); // support json encoded bodies app.use(bodyParser.urlencoded({ extended: true })); // support encoded bodies app.post("/makeCall", async (req, res) => { try { var salesNumber = req.body.salesNumber; console.log(req.body) const catalystApp = catalyst.initialize(req); let rowData = { fromNumber: req.body.phoneNumber, toNumber: req.body.salesNumber }; console.log(rowData) const catalystTable = catalystApp.datastore().table('CallLog'); const data = await catalystTable.insertRow(rowData); var url = 'https://' + req.headers.host + '/server/dialer/outbound/' + encodeURIComponent(salesNumber); var options = { to: req.body.phoneNumber, from: YOUR_TWILIO_NUMBER, url: url, method: 'post', statusCallbackEvent: ['answered', 'completed'], statusCallback: 'https://' + req.headers.host + '/server/dialer/statusCheck?ROWID=' + data.ROWID, statusCallbackMethod: 'POST' }; twilioClient.calls.create(options).then((call) => { res.status(200).send({ message: 'Call Initiated' }); }).catch((error) => { console.log(error); res.status(500).send({ "error": error }); }); } catch (e) { console.log("Exception while making a Call ::" + e); res.status(500).send({ "error": 'Internal Server Error Occured. Please Try again after sometime.' }); } }); app.post('/outbound/:salesNumber', function (req, res) { try { var salesNumber = req.params.salesNumber; var twimlResponse = new VoiceResponse(); twimlResponse.say('Thanks for trying out the Catalyst Dialer App. Please hold on so that we can connect with your Customer... ', { voice: 'alice' }); twimlResponse.dial(salesNumber); res.status(200).send(twimlResponse.toString()); } catch (e) { console.log("Exception while making Outbound Call ::" + e); res.status(500).send({ "error": 'Internal Server Error Occured. Please Try again after sometime.' }); } }); app.post('/statusCheck', async (req, res) => { try { const catalystApp = catalyst.initialize(req); if (req.body.CallStatus === "completed") { let updatedRowData = { callDuration: req.body.CallDuration, callStatus: req.body.CallStatus, calledCountry: req.body.CalledCountry, calledState: req.body.CalledState, timeOfCall: req.body.Timestamp, ROWID: req.body.ROWID }; console.log(updatedRowData) const catalystTable = catalystApp.datastore().table('CallLog'); await catalystTable.updateRow(updatedRowData); } res.status(200).send(' StatusCheck Completed'); } catch (e) { console.log("Exception while checking status :: " + e); res.status(500).send({ "error": 'Internal Server Error Occured. Please Try again after sometime.' }); } }); app.get('/getLogs', async function (req, res) { try { const catalystApp = catalyst.initialize(req); const query = 'SELECT callDuration,callStatus,calledCountry,timeOfCall,fromNumber,toNumber FROM CallLog'; const queryResult = await catalystApp.zcql().executeZCQLQuery(query); res.status(200).send(queryResult); } catch (e) { console.log("Exception while getting Call Logs ::" + e); res.status(500).send({ "error": 'Internal Server Error Occured. Please Try again after sometime.' }); } }); module.exports = app; {{% /panel_with_adjustment %}} {{%note%}}{{%bold%}}Note{{%/bold%}}:Please make sure you add your Twilio accountID, associated Twilio phone number ,and auth token values in lines 6, 7, and 8.{{%/note%}} The functions directory is now configured. -------------------------------------------------------------------------------- title: "Register the application" description: "Build a dialer application in Flutter using Catalyst Advanced I/O Functions,DataStore and integration with Twilio’s Voice API that establishes an outbound call connection between your sales team and customers." last_updated: "2026-03-18T07:41:08.680Z" source: "https://docs.catalyst.zoho.com/en/tutorials/dialer-mobile-app/flutter/register-app/" service: "All Services" related: - Android SDK Setup (/en/sdk/android/v2/setup/) - iOS SDK Setup (/en/sdk/ios/v2/setup/) -------------------------------------------------------------------------------- # Register the application Now, we will register the Android and iOS applications in Catalyst and fetch the configuration files. To build your Flutter app with Android or iOS as your development targets with the Flutter SDK, you will need to register your apps and fetch the property files generated by Catalyst and include them in both Android and iOS app directories. Please follow the steps below to register the mobile applications in Catalyst. To register an Android application in Catalyst: 1. Open your project in the Catalyst console and click on the **Settings** icon in the top right corner of the screen. <br/> 2. Navigate to **Project Settings → Developer Tools**. Click the **Android** tile. <br/> 3. Provide the package name as **com.example.dialer** and the redirect URL as dialerapp and then click **Create**. <br/> 4. Click **Download**. The configuration file gets downloaded to your local. <br/> {{%note%}}{{%bold%}}Note:{{%/bold%}} You can refer to {{%link href="/en/sdk/flutter/v2/setup-for-android/" %}}this help documentation{{%/link%}} to learn more about the Android setup for Flutter SDK in detail.{{%/note%}} Similarly, to register an iOS application in Catalyst, follow the same steps as mentioned above by clicking the iOS tile. Provide the package name as **"com.example.catalyst.dialer"**, redirect url as **"dialerapp"** and download the iOS configuration file. {{%note%}}{{%bold%}}Note:{{%/bold%}} You can refer to {{%link href="/en/sdk/flutter/v2/setup-for-ios/" %}}this help documentation{{%/link%}} to learn more about the iOS setup.{{%/note%}} -------------------------------------------------------------------------------- title: "Deploy the function" description: "Build a dialer application in Flutter using Catalyst Advanced I/O Functions,DataStore and integration with Twilio’s Voice API that establishes an outbound call connection between your sales team and customers." last_updated: "2026-03-18T07:41:08.680Z" source: "https://docs.catalyst.zoho.com/en/tutorials/dialer-mobile-app/flutter/deploy-function/" service: "All Services" related: - Deploy CLI Resources (/en/cli/v1/deploy-resources/introduction) - Web Client Hosting (/en/cloud-scale/help/web-client-hosting/introduction) -------------------------------------------------------------------------------- # Deploy the Function We will now deploy the function from your local terminal to the Catalyst console. This will generate an endpoint URL for the function that can be incorporated in the mobile app's code. To {{%link href="/en/cli/v1/deploy-resources/deploy-functions/" %}}deploy the function{{%/link%}} component of your Catalyst project from the CLI, run the following command in your terminal from your project directory (CATALYST_PROJECT_HOME). {{%cli%}} catalyst deploy{{%/cli%}} The endpoint URL of the function component will be displayed. We will include this URL in the Android and iOS code in the next step. -------------------------------------------------------------------------------- title: "Configure the Flutter client" description: "Build a dialer application in Flutter using Catalyst Advanced I/O Functions,DataStore and integration with Twilio’s Voice API that establishes an outbound call connection between your sales team and customers." last_updated: "2026-03-18T07:41:08.680Z" source: "https://docs.catalyst.zoho.com/en/tutorials/dialer-mobile-app/flutter/configure-client/" service: "All Services" related: - Client Directory Structure (/en/cli/v1/project-directory-structure/introduction) -------------------------------------------------------------------------------- # Configure Flutter Client We will be providing the entire Flutter code for your Dialer application. You can download the Flutter code from {{%link href="https://learn.zoho.com/scroll/downloadFile.do?soid=671864332&fileId=5569550000021783853&articleId=5569550000012907037" %}}here{{%/link%}}. The code directory will look like this : {{%note%}}{{%bold%}}Note:{{%/bold%}} This code zip contains the source code required for both Android and iOS applications.{{%/note%}} In the code provided, we have already imported the Flutter SDK in the {{%badge%}}lib/main.dart{{%/badge%}} file. You can check the detailed steps to import the SDK in this help page. After importing the SDK, we have initialized the SDK in the main()function using the {{%badge%}}ZCatalystApp.init(){{%/badge%}} method. To know the steps to initialize the SDK, you can refer to this help page. {{%note%}}{{%bold%}}Note:{{%/bold%}} Since the provided code includes the {{%badge%}}build.gradle{{%/badge%}} file, you won’t need to rebuild the application manually.{{%/note%}} Now we will proceed to configure and run the application in Android Studio and Xcode. To configure the project in Android Studio please make sure to follow the below listed steps : 1. Click **File → Open** and open the downloaded code folder. 2. Navigate to **View → Tool Windows → Terminal**. Run the following command in the terminal to install the dependencies needed for the Flutter application. {{%cli%}}flutter pub get{{%/cli%}} 3. Navigate to the assets directory(**/assets**) of your Android app module and add the android configuration file you downloaded from the Catalyst console in {{%link href="/en/tutorials/dialer-mobile-app/flutter/register-app" %}}this step{{%/link%}}. Next, we will need to configure the Catalyst function URLs for both {{%badge%}}/makeCall{{%/badge%}} and {{%badge%}}/getLogs{{%/badge%}} routes in the {{%badge%}}catalyst_paramters.env{{%/badge%}} file in Android Studio. To fetch the Catalyst function url, navigate to **Serverless → Functions** and click the **dialer function**. Copy the invocation url as shown in the screenshot below and paste it in the {{%badge%}}catalyst_paramters.env{{%/badge%}} file. For example: **CALL_INITIATION_URL** = https://catalystdialerapp-781316834.development.catalystserverless.com/server/dialer/makeCall <br> **CALL_LOGS_URL** = https://catalystdialerapp-781316834.development.catalystserverless.com/server/dialer/getLogs To configure the iOS project in Xcode please make sure to follow the below listed steps : 1. Click **File → Open** and open the iOS folder and all other files from the code zip extracted earlier, except android folder. 2. Right click on **Runner**. Select **Add Files to Runner** and now add the iOS configuration file downloaded in {{%link href="/en/tutorials/dialer-mobile-app/flutter/register-app" %}}this step{{%/link%}}. -------------------------------------------------------------------------------- title: "Test the application" description: "Build a dialer application in Flutter using Catalyst Advanced I/O Functions,DataStore and integration with Twilio’s Voice API that establishes an outbound call connection between your sales team and customers." last_updated: "2026-03-18T07:41:08.681Z" source: "https://docs.catalyst.zoho.com/en/tutorials/dialer-mobile-app/flutter/test-application/" service: "All Services" related: - Serve CLI Resources (/en/cli/v1/serve-resources/introduction) -------------------------------------------------------------------------------- # Test the application Now we are done configuring both the Android and iOS project. We will begin to test the Flutter application. **Android :** 1. Open Android Studio and select a compatible emulator device that you have set up, then click **Run**. After the emulator device is powered on, open the Catalyst Dialer application from the installed apps. You will see the following screen: Enter the sales and customer number along with the country code in the Dial section, and click **Initiate call**. The call will be initiated, and on successful connection, a call log will be registered. You can access the logs by clicking the **Call Logs** button in the app from the bottom. **iOS**: To run the iOS application in the simulator, open XCode and click the **Run** button from the top. Enter the sales and customer numbers along with the country code and initiate the call. Similar to the Android application, the call logs can be viewed by clicking on **Call Logs**. Once your app runs successfully on the emulator or device, you can proceed to generate an installable file for distribution: * **For Android**: Generate an APK (Android Package) file. * **For iOS**: Generate an IPA (iOS App Store Package) file. **Steps to generate the build:** **For Android (APK):** 1. In Android Studio, go to **Build > Build Bundle(s) / APK(s) > Build APK(s)**. 2. Once the build is complete, click **Locate** to find the generated APK file. 3. You can then install this APK directly onto any Android device. **For iOS (IPA):** 1. Open the project in Xcode. 2. Select **Generic iOS Device** or a connected real device as the build target. 3. Go to **Product > Archive**. 4. After the archive is ready, use Organizer to export the build as an IPA file. 5. You can then install the IPA using tools like TestFlight, Apple Configurator, or through manual device provisioning.