Flutterflow QuickStart Guide

This Flutter template provides a solid foundation for building feature-rich mobile applications by combining the power of FlutterFlow and HMS Room Kit for real-time communication capabilities. This guide will walk you through simple instructions to create a video conferencing/streaming application using flutterflow and 100ms prebuilt.

Features

• FlutterFlow Integration: Leverage FlutterFlow's intuitive visual development platform to design stunning user interfaces for your Flutter app effortlessly.

• HMS Room Kit: Integrate 100ms HMS Room Kit for seamless real-time communication features such as instant messaging, audio, and video calls into your Flutter application.

Prerequisites

• A 100ms account if you don't have one already.
• A Flutterflow account if you don't have one already
• Flutterflow subscription plan to test the application locally.

Getting started

Follow these steps to setup and run the project:

1. Setup basic widgets required for your application in flutterflow, Follow the flutterflow docs here

2. Create a custom widget in flutterflow, checkout the docs to create custom widget here

3. Add hms_room_kit in Pubspec dependencies section.

4. In your custom widget add the HMSPrebuilt widget and pass the room code:

HMSPrebuilt(roomCode: "Enter your room code here");

That's it now you can run the application and test it out.

Known issues

hms_room_kit manages state and UI out of the box, but there are some conflicts with flutterflow. So, we need to make some changes in the app layer. Please follow the steps below to run the app:

1. Solving dependency conflicts:

There are several packages which are common in both flutterflow and hms_room_kit, but with different versions. So, we need to make sure that the versions of these packages are same in both pubspec.yaml files. For conflict in packages you will get error like this:

Error: Failed running flutter pub get...
Because custom_widget depends on flutter_cache_manager 3.3.0 which depends on http ^0.13.0, http ^0.13.0 is required.
So, because custom_widget depends on http ^1.0.0, version solving failed.


You can try the following suggestion to make the pubspec resolve:
* Try upgrading your constraint on flutter_cache_manager: flutter pub add flutter_cache_manager:^3.3.1

This can be solved by updating to the higher version of the package. For example, in the above error, we need to update flutter_cache_manager to ^3.3.1 in pubspec.yaml file.

2. Issues with Navigator:

Flutterflow uses go_router whereas hms_room_kit uses MaterialPageRoute for navigation. So, you might face issues while navigating from app screen to hms_room_kit screen. To solve this, you will need to use MaterialPageRoute while pushing the hms_room_kit path while you can continue using go_router for other paths.

That's it. You can now use the amazing Prebuilt UI with speed of Flutterflow in your application.

If you face any issues or have any questions, please reach out to us on Discord

Next steps

We have multiple example apps to get you started with 100ms Flutter SDK.

HLS Streaming blog

Checkout the HLS Streaming blog here. Checkout the repository here

Basic example

For a basic example, see the sample app on GitHub.

Full-fledged example

You can also check out the full-fledged example app implementation in the 100ms Flutter SDK GitHub repository showcasing multiple features provided by 100ms. This uses the provider package as the state management library.

Examples with other state management libraries

For implementations with other state management libraries, visit :

• Bloc
• Getx
• Riverpod
• Mobx

App store / Play store

You can download & check out the 100ms Flutter app -

🤖 Flutter Android app from Google Play Store.

📱 Flutter iOS app from Apple App Store.