DEV Community: Aditya Thakur

A Comprehensive Guide to Flutter-WebRTC

Aditya Thakur — Mon, 21 Mar 2022 11:10:08 +0000

Through the pandemic, we saw the rise in audio/video calling apps. A lot of people wanted to communicate with their loved ones around the globe and, video conferencing apps like Zoom, Google Meet stepped in to make that possible. Twitter introduced Spaces and Discord added Stages. Even audio-only apps like Clubhouse became a rage.

Naturally, developers have been asking the same question these days: How do I establish real-time audio and video in my Flutter app? If you’re curious about how to build a simple app using Flutter WebRTC, you’re in the right place.

This article will discuss WebRTC is and how can it be integrated with Flutter. It will also explore the options available to you in order to scale your operations.

WebRTC enables real-time, audio-video communication between websites and devices. It is an open-source project that allows direct P2P communication without installing additional programs or plugins. It is supported by all modern browsers and can also be embedded into native applications using available libraries.

To use WebRTC in Flutter, there’s a package available called the flutter_webrtc

Run the following command to add the package to project dependencies:



flutter pub add flutter_webrtc

The entire process of integration with Flutter is fairly easy but not very well documented. For a detailed, step-by-step tutorial on the same, have a look at this comprehensive guide to Flutter WebRTC.

WebRTC Flutter Demo

If you follow the steps in the linked article, you’ll be able to build a simple video conferencing app with Flutter that uses WebRTC to connect two peers for video communication and audio enabled.

You can find the complete code here.

Copy the URL and paste it into a new browser window to create two peers.

Click on the ‘Offer’ button in window 1 to generate an offer. It will output the offer to the console accessible using developer tools on Chrome.

Copy-paste this offer into the TextField of window 2 and click on the ‘Set Remote Description’ button. That should set the remote description by calling the underlying function.
Now, click on ‘Answer’ to generate an answer and copy-paste it in the TextField of window 1.

Lastly, copy a candidate from window 2, paste it in the window 1 TextField, and click on the ‘Set Candidate’ button.

This should create the WebRTC connection, and the remote video should show up as seen below:

And, that’s it. 🎉

As you can see, the process of building up a Flutter WebRTC app may seem a little complicated, but once you get the hang of it, it’s not too difficult to accomplish.

Add beautiful containers to your Flutter app

Aditya Thakur — Mon, 26 Jul 2021 10:12:52 +0000

Fancy Containers package lets you add a beautiful gradient container to your Flutter app.

These can be used to:

Share announcements,
Showcase information,
Highlight features,

Installation

Add the latest version of the package to your pubspec.yaml (and run dart pub get):

dependencies:
  fancy_containers: ^0.0.4

Import the package and use it in your Flutter App.

import 'package:fancy_containers/fancy_containers.dart';

Example

There are a number of properties that you can modify:

height
width
title
titlecolor
subtitle
subtitlecolor
gradient (color1 and color2)
onTap (for function callback)

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FancyContainer(
          onTap: (){
            print("Hello World");
          },
          color1: Colors.lightGreenAccent,
          color2: Colors.lightBlue,
          title: 'Hello World',
          textcolor: Colors.white,
          subtitle: 'This is a new package',
          subtitlecolor: Colors.white,
        ),
      ),
    );

Output

Find the package on pub.dev here.

First internship as a Flutter Developer

Aditya Thakur — Tue, 20 Jul 2021 07:17:59 +0000

I had only recently followed the company. It was an ed-tech startup. In a day or two, the co-founder put out a post mentioning that they were hiring for multiple roles. And, one of the roles was that of a Flutter Developer.

I had never interned before. I hadn't even completed the course that I had taken up on Flutter. My knowledge was limited to the front end and in that too, I could only make simple designs. I was just getting started.

The thought that it might be too early to apply kept echoing in my head. Two things could happen, I could be rejected bad, maybe even insulted but at the same time, there was a chance that they select me and I get to test out my skills, learn and level up. Thank god it was the latter!

I commented like a devoted LinkedIn user, 'INTERESTED' under the post. Two days later, I was on a call with the co-founder. They even had me talk to the guy managing their app, who was to be my coordinator later. The guy told me how the co-founder had loved my profile although he in his heart knew, I had very limited knowledge of Flutter.

It is important to point, I had optimized my profile with whatever little I could. Since I was only at the start of my second year then, I had highlighted my experience from the school itself. Not particularly in Flutter but in soft skills like leadership, communication, etc.

I had also put up a video demonstration of two projects that I had done then. One was a simple portfolio app (with an avatar image and my name under it) and the second was a dice app. Both really really basic but anyway got me the offer letter in a week.

The offer was unpaid. It was originally a 2-month internship, but I knew I wouldn't do something for so long for free. I had also spoken to my friends who had previously worked as interns in different sectors. The experience of a technical internship that I needed could be done in a month. I negotiated the same with the employer and shortened the period down to a month.

However much I may say such internships are bad, the first ever that I did was unpaid. I believe I lacked experience and guidance back then. Today, I am at a place with multiple offers and ongoing projects. I have tried to help Flutter developers I know with offers and also built up a community to guide anyone who is just getting started.

We are around a 150 developer community on Discord, that you can join in using the link.

I post internships that I come across, resources to learn Flutter, Data Science, Python, etc from, offers, upgrades, and more! Thank you for reading :)

Open Source projects in Flutter

Aditya Thakur — Mon, 05 Jul 2021 17:09:55 +0000

What are some open source projects to contribute to in Flutter?

Open Source is for everyone! But, starting out you must be at a loss of projects to contribute to. However good the GitHub search might be, it is difficult to find good projects that are beginner-friendly with community support.

Fear no more.

Here, I have listed some of the projects from a number of open-source programs that you can contribute to!

Upcharika

A unique flutter application aimed at helping people getting their vitals using Photoplethysmography and Computer Vision.

smaranjitghose / Upcharika

A unique flutter application aimed at helping people getting their vitals using Photoplethysmography and Computer Vision

Current Goals:

Use the camera and flash sensors to calculate Heart Rate
Use the camera and flash sensors to calcuate SP02
Make a dashboard for storing periodic readings
User Profile
Login Page
Sign Up Page
Splash Screen
Firebase/Supabase Intergration for Authentication
Generate Reports

Our hard-working Project Maintainers👨‍🏫:


Smaranjit Ghose	Anush Bhatia

Our valuable Contributors👩‍💻👨‍💻 :

Documents related to the project:

References:

 Kanva, A.K., Sharma, C.J. and Deb, S., 2014, January. Determination of SpO 2 and heart-rate using smartphone camera. In Proceedings of The 2014 International Conference on Control, Instrumentation, Energy and Communication (CIEC) (pp. 237-241). IEEE

   Bolkhovsky, J.B., Scully, C.G. and Chon, K.H., 2012, August. Statistical analysis of heart rate and heart rate variability monitoring through the use of smart phone cameras. In 2012 Annual International Conference

…

View on GitHub

SheHeroes

A Women And Child Safety App.

shagun25 / SheHeroes

SheHeroes- A Women And Child Safety App

🅂🄷🄴🄷🄴🅁🄾🄴🅂 - Women Safety App

🗂 CONTENT:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

📌 Cross WinterOfCode 21

📌 Inspiration

📌 Tech Stack

📌 Features

📌 How to get started

📌 Steps to follow

📌 Developed By

📌 ScreenShots

📌 Features We Demand

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

🏷️ Inspiration

…

View on GitHub

Relic Bazaar

A Retro Theme-based e-commerce app for antiques.

himanshusharma89 / relic_bazaar

A Retro Theme-based e-commerce app for antiques. #Hack20

Motivation💭💭

With the boons of internet🌐 spreading worlwide over the last two decades, e-commerce has evolved to be one of the largest industries💹!.

With the passage of time, platforms like Amazon, E-Bay, Flipkart, Myntra have become the modern supermarkerts for us.

From our fashionable clothes👗, shoes👟, grocery🥒, items of daily needs to mobile phones📱 we are accustomed to buying almost everything online. Even our food!🎂. Features like flexible options of payment, tons of choices to select from, assured delivery, as well as great customer support, have paved the way for the notion.

However, we found there's something that is left behind on the e-commerce wave.

The Vintage Products...Yes, those items of immense cultural significance or historical importance. Maybe those coins from pre-independent India, that chair from the royal family, or perhaps the autograph or souvenirs your family members might have got from Mother Teresa. Trading with such items is…

View on GitHub

DocLense

An open-source document scanner!

smaranjitghose / DocLense

An open-source document scanner!

Features🔬 :

Scan your documents with ease!
Numerous choices of filters to choose from
Auto-adjust size and focus on text
Save in multiple formats
Share as consolidated document across multiple platforms
Scan a variety of Docs
Options to customize the size of the scanned pages (Crop)
Apply different types of filter
Download/Export in .pdf
Rename the documents

📱App Screens📱

📷App Mock-ups📷

🎥App Demo🎥

Contribution Guidelines🏗

Are we missing any of your favorite features, which you think you can add to it❓ We invite you to contribute to this project and make it better? To start contributing, follow the below guidelines:

1. Fork this repository.

2. Clone your forked copy of the project.

git clone --depth 1 https://github.com/<your_user_name>/DocLense.git

3. Navigate to the project directory 📁 .

cd DocLense

4. Add a reference(remote) to the original repository.

git remote add upstream https://github.com/smaranjitghose/DocLense.git

5. Check the remotes for this repository.

git remote -v

…

View on GitHub

Nutrihelp

An android application to predict risks of getting Diabetes like major health issues.

Dragsters / Nutrihelp

An android application to predict risks of getting Diabetes like major health issues.

Nutrihelp

An android application where you can get your personalized nutritional diet plan and health checkup recommendations using ML predictions

🌟 About

An app for all those who care about their health.

Track current diet plan
Get a personalized diet plan.
Predict chances of critical health issues like Heart attack, Diabetes, Cancer, etc.

Tech Used

Frontend	Flutter
Backend	Flask (python)
Database	MongoDB

Project Structure

__ Nutrihelp
|__ client (contains flutter app)
|__ server (contains flask backend)

💥 A guide for Contribution

Fork the repository
Take a look at the Existing Issues or create your own Issues!
Wait for the Issue to be assigned to you after which you can start working on it.
Create a Branch with the name of Issue that you are working upon.
Switch to that branch and start writing your code.
Commit and push your changes
Create a Pull Request which will be promptly reviewed and…

View on GitHub

Batua

A personal app to track and manage your expenses.

pratyushmp / Batua

A personal app to track and manage your expenses.

👝Batua👝

A Personal App to track and manage your expenses!

Batua is the best money manager and daily expense tracker to automatically and securely track your monthly spends. Stay within budget, pay bills on time and SAVE more money every month. Find out how much you spend on food, shopping, groceries, etc. and how much you are saving month on month.

Features:🔬

This App will help shopkeepers, vendors, and many other people to keep track of their daily expense.
It will help you save your money by managing your daily expenditure.

📷App Mock-ups📷

Tech Stack🧐

Google-services.json file

https://drive.google.com/file/d/1-BHo4po-p11s8qNos32L7R5Zo1NFmJVT/view?usp=sharing

Contributing Guidelines:📝

Checkout the Contributing.md file before getting started with your contributions.

Contributors:👨‍💻

Our hard working Project Maintainer👨‍🏫


Pratyush M

Valuable Contributors✨

BATUA is a part of these open source programs:🌐

View on GitHub

forestTreesTagging

This project has the vision to assist the officials for Forest trees census and tagging each tree with proper location (latitude and longitude), tree type, and other arguments. and further had the plan to apply data analysis over-collected data.

CodeFlowOrg / forestTreesTagging

This project has the vision to assist the officials for Forest trees census and tagging each tree with proper location (latitude and longitude), tree type, and other arguments. and further had the plan to apply data analysis over-collected data.

🌳Trees🌳
🔖Tagger🔖
App & Analysis Software

The vision of this project is to assist forest officials for tree census by tagging each tree with proper location (latitude and longitude), tree type, and other arguments. There is a future plan to apply data analysis over the collected data.

Focused Area:🧐

This project is based on:

Flutter-based app: In this app, the user can tag the tree by locating or going to the exact location and then feeding the latitude and longitude details along with the other parameters. Once the data is stored, it will generate a unique key and a QR code for the same, so that later on we can refer to that tree by that code itself.
A data analysis system with a Web App interface to the collected data and apply a machine learning model for prediction of different parameters.

Tech Stack:⚙️

Problem Statement:📋

Digital transformation of maintaining…

View on GitHub

Animated-Text-Kit

A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

aagarwal1012 / Animated-Text-Kit

🔔 A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Animated Text Kit

A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in Codemagic's Ebook, "Flutter libraries we love". Try out our live example app.

Flutter Package of the Week

Installing

1. Depend on it

Add this to your package's pubspec.yaml file:

dependencies:
  animated_text_kit: ^4.2.2

2. Install it

You can install packages from the command line:

with pub:

$ pub get

with Flutter:

$ flutter pub get

3. Import it

Now in your Dart code, you can use:

import 'package:animated_text_kit/animated_text_kit.dart';

Usage

AnimatedTextKit is a Stateful Widget that produces text animations. Include it in your build method like:

AnimatedTextKit(
  animatedTexts:

…

View on GitHub

Friday

Personal Class Manager Assistant.

avinashkranjan / Friday

🎓 Friday - Your Personal Class Manager Assistant, It'll never let you miss another assignment deadline or upcoming test. https://friday.avinashranjan.com

Friday

Friday - Your Personal Class Assistant

Friday is an innovative application designed to help you stay organized and never miss an assignment deadline or upcoming test again. With the shift to online education due to the pandemic, keeping track of assignments, exams, and other academic tasks can be overwhelming.

"Friday - Your Personal Class Assistant, It'll never let you miss another assignment deadline or any upcoming test."

Introduction 🚩

Since the pandemic, almost everything has been moved on to the virtual world and So has Education. All our classes have been moved online and with that, all our assignments, tests, exams, Viva are being held on an online platform as well, With so many assignment deadlines, upcoming exam dates, and being busy with our life we forget the deadlines and exam dates on most occasion. I don't know how many of you but it happens to me frequently…

View on GitHub

Libro

An App Built using flutter using which we can share books with people around.

infiniteoverflow / Libro

An App Built using flutter using which we can share books with people around us !!

📚Book-Donation-App📚

An App Built using flutter using which we can share books with people around us !!

Features:✨

A book Sharing App.
This app helps you find the books you want easily.

Tech Stack:⚙️

Contributing Guidelines:📝

Please read CONTRIBUTING.md for information on how to contribute to the project.

To follow our sprints and workflow install zenhub extension to access our board.

Google Services Files for running the app :

Drive Link : https://drive.google.com/drive/folders/161WwprL9P_mHqdln_S0Zfm2bVnQSI1Dc?usp=sharing

Tentative UI Design:🎨

This project is a part of Girlscript Summer of Code 21'

Valuable Contributors🤟

View on GitHub

Thats all :)

Help me improve this collection by sharing your open source projects or any cool ones that you know of!

If you’re a Flutter Developer, we have a community for you!

I post internship opportunities that I come across, articles and tutorials. Join the Discord community for free, using this link.

DEV Community: Aditya Thakur

A Comprehensive Guide to Flutter-WebRTC

WebRTC Flutter Demo

Add beautiful containers to your Flutter app

Installation

Example

Output

First internship as a Flutter Developer

Open Source projects in Flutter

What are some open source projects to contribute to in Flutter?

Upcharika

smaranjitghose / Upcharika

A unique flutter application aimed at helping people getting their vitals using Photoplethysmography and Computer Vision

Current Goals:

Our hard-working Project Maintainers👨‍🏫:

Our valuable Contributors👩‍💻👨‍💻 :

Documents related to the project:

References:

SheHeroes

shagun25 / SheHeroes

SheHeroes- A Women And Child Safety App

🅂🄷🄴🄷🄴🅁🄾🄴🅂 - Women Safety App

🗂 CONTENT:

🏷️ Inspiration

Relic Bazaar

himanshusharma89 / relic_bazaar

A Retro Theme-based e-commerce app for antiques. #Hack20

Motivation💭💭

DocLense

smaranjitghose / DocLense

An open-source document scanner!

Features🔬 :

📱App Screens📱

📷App Mock-ups📷

🎥App Demo🎥

Contribution Guidelines🏗

Nutrihelp

Dragsters / Nutrihelp

An android application to predict risks of getting Diabetes like major health issues.

Nutrihelp

🌟 About

Tech Used

Project Structure

💥 A guide for Contribution

Batua

pratyushmp / Batua

A personal app to track and manage your expenses.

👝Batua👝

A Personal App to track and manage your expenses!

Features:🔬

📷App Mock-ups📷

Tech Stack🧐

Google-services.json file

Contributing Guidelines:📝

Contributors:👨‍💻

Our hard working Project Maintainer👨‍🏫

Valuable Contributors✨

BATUA is a part of these open source programs:🌐

forestTreesTagging

CodeFlowOrg / forestTreesTagging

This project has the vision to assist the officials for Forest trees census and tagging each tree with proper location (latitude and longitude), tree type, and other arguments. and further had the plan to apply data analysis over-collected data.

🌳Trees🌳 🔖Tagger🔖 App & Analysis Software

Focused Area:🧐

This project is based on:

Tech Stack:⚙️

Problem Statement:📋

Animated-Text-Kit

aagarwal1012 / Animated-Text-Kit

🔔 A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Animated Text Kit

Table of contents

Flutter Package of the Week

Installing

1. Depend on it

2. Install it

3. Import it

Usage

Friday

avinashkranjan / Friday

🎓 Friday - Your Personal Class Manager Assistant, It'll never let you miss another assignment deadline or upcoming test. https://friday.avinashranjan.com

🌳Trees🌳
🔖Tagger🔖
App & Analysis Software