---
title: Arnaud Blogs on Twilio about creating a video chat mobile app with Twilio Video and Flutter, using BLoC – WebRTC.ventures
description: Arnaud gives us a tutorial on building a mobile video chat app using Twilio Video, Flutter, Dart, and the BLoC design pattern.
---

[WebRTC.ventures Blog](https://blog.webrtc.ventures)

# [Arnaud Blogs on Twilio about creating a video chat mobile app with Twilio Video and Flutter, using BLoC – WebRTC.ventures](https://blog.webrtc.ventures/2022/01/arnaud-twilio-flutter-bloc-tutorial)

 Written by [Jen Oppenheimer](https://blog.webrtc.ventures/author/jen-oppenheimer) | Jan 11, 2022 5:00:00 AM

Arnaud Phommasone is a talented mobile developer that is a valuable member of our [WebRTC.ventures team](https://webrtc.ventures/our-team/). He recently wrote a tutorial to create a [Flutter](https://flutter.dev/) app using an unofficial Flutter package for interfacing with [Twilio Video](https://www.twilio.com/docs/video), that will allow users to host a call and be joined by multiple other users. [Flutter](https://flutter.dev/) is Google’s free, open-source UI toolkit for building applications for mobile, web, and desktop from one single codebase.

The tutorial focuses on creating a serverless endpoint to get access tokens for users to connect and enter the same chat room, represented as a grid of video streams. The app is implemented with the Business Logic Components pattern, known as [BLoC](https://docs.flutter.dev/development/data-and-backend/state-mgmt/options#bloc--rx). BLoC is a design pattern created by Google to help separate business logic from the presentation layer and enable a developer to reuse code more efficiently. 

The tutorial assumes a basic knowledge of [Dart](https://dart.dev/), an open-source, general-purpose, object-oriented programming language with C-style syntax developed by Google.

## The tutorial covers:

1. Setting up the local dev environment, using [Flutter SDK](https://docs.flutter.dev/development/tools/sdk/releases) 2.2.3, An iOS mobile device to test with, [Xcode](https://developer.apple.com/xcode/) downloaded on your machine and [Visual Studio Code](https://code.visualstudio.com/) v1.60.1 (or your favorite code editor/IDE)
2. Creating the backend service, using [Twilio Service](https://www.twilio.com/docs/runtime/functions/create-service) to generate an [access token](https://www.twilio.com/docs/iam/access-tokens) we can use in our chatroom.
3. Starting the client-side app project
4. Simple BLoC architecture with Cubit
5. Writing your Twilio API service
6. Creating your Cubit object to retrieve the access token from the Join Room page
7. Creating the listener and joining a room
8. Writing your Cubit object to handle joining a Twilio room and creating participants
9. Connecting and disconnecting from the Conference Room

**Read the full post on the Twilio blog: “[Create a Chat Room App with Twilio Video and Flutter / BLoC](https://www.twilio.com/blog/create-chat-room-app-twilio-video-flutter-bloc)“.**

[View full post](https://blog.webrtc.ventures/2022/01/arnaud-twilio-flutter-bloc-tutorial)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Jen Oppenheimer"
  },
  "dateModified" : "2024-04-03T18:09:06.170Z",
  "datePublished" : "2022-01-11T05:00:00Z",
  "headline" : "Arnaud Blogs on Twilio about creating a video chat mobile app with Twilio Video and Flutter, using BLoC",
  "image" : {
    "@type" : "ImageObject",
    "height" : 512,
    "url" : "https://45353883.fs1.hubspotusercontent-na1.net/hubfs/45353883/Imported_Blog_Media/Arnaud-Blogs-on-Twilio-2.png",
    "width" : 1024
  },
  "mainEntityOfPage" : "https://blog.webrtc.ventures/2022/01/arnaud-twilio-flutter-bloc-tutorial",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "WebRTC.ventures Blog"
  }
}
```