DEV Community: Tadas Petra

Build a Video Call App with Gemini AI Summarization

Tadas Petra — Tue, 11 Jun 2024 13:18:58 +0000

AI is taking over the world. Resistance is futile. Now, we could either fight the inevitable or succumb to it. In this guide, we will walk through how to combine AI with Agora and build a video call app that uses AI to summarize the call you just had.

Prerequisites

Flutter
A developer account with Agora
Agora Speech-to-Text Server (Can use this example server)
Gemini API Key

Project Setup

Our starting point will be a simple video call app built with Agora. This guide assumes you have a fundamental understanding of how a simple video call works using Agora.

If you do not have a grasp on Agora Fundamentals, you can take a look at the Flutter quickstart guide within the documentation or you could dive deeper with the full Video Call with Agora Flutter course.

This guide will build upon a simple starter video call, which you can find here.

The starter code has a landing screen with only one button that invites you to join a call. This call happens on a single channel called test (it's a demo, okay). You have the remote users' video, your local video, and an end-call button within the call screen. We add and remove the users from the view using the event handlers.

Speech to Text

Agora has a product called Real Time Transcription that you can enable to start transcribing the call of a specific channel.

Real-Time Transcription is a RESTful API that uses an AI microservice to connect to your call and transcribe the spoken audio. This transcription is streamed directly into your video call using the onStreamMessage event. Optionally, it can also be written to a cloud provider, which we will do in this guide as well.

Backend

Real-Time Transcription should be implemented on your business server for a few reasons. With the backend controlling the microservices, you can ensure that only one instance of Real-Time Transcription runs within each channel. You also need to pass your token to the transcription service, so by doing it on the backend, you don't expose that token on the client side.

We will use this server as our backend. This server exposes two endpoints: one for starting the transcription and another for ending it.

Start Real Time Transcription



/start-transcribing/<--Channel Name-->

A successful response will contain the Task ID and the Builder Token, which you must save in your app since you will need to use it to stop the transcription.



{taskId: <--Task ID Value-->, builderToken: <--Builder Token Value-->}

Stop Real Time Transcription



/stop-transcribing/<--Channel Name-->/<--Task ID-->/<--Builder Token-->

Start Transcription within the Call

To make a network call from your Flutter application, you can use the http package. Ensure you use the same App ID on both the app and the backend server. Then, call your API to start the transcribing.

Within the call.dart file, you can add this startTranscription function:



Future<void> startTranscription({required String channelName}) async {
  final response = await post(
    Uri.parse('$serverUrl/start-transcribing/$channelName'),
  );

  if (response.statusCode == 200) {
    print('Transcription Started');
    taskId = jsonDecode(response.body)['taskId'];
    builderToken = jsonDecode(response.body)['builderToken'];
  } else {
    print('Couldn\'t start the transcription : ${response.statusCode}');
  }
}

We will call this function right after our join call method so that it starts as soon as the first user joins the channel. As part of a successful response, you will receive a Task ID and a Builder Token. Save these because you will need to use them to stop the transcription.

When the transcription starts successfully, it acts as a "bot" has joined the call. It's not a real user, but it has its own UID, defined within your backend server. If you are using the server I linked above, the UID is 101. You can exclude this from the remote user's list in the onUserJoined event.



onUserJoined: (RtcConnection connection, int remoteUid, int elapsed) {
  if (remoteUid == 101) return;

  setState(() {
    _remoteUsers.add(remoteUid);
  });
}

End Transcription

To end the transcription, we use a function similar to the starting function. This function will be called stopTranscription and requires us to pass the Task ID and the Builder Token to stop the Real-Time Transcription service.



Future<void> stopTranscription() async {
  final response = await post(
    Uri.parse('$serverUrl/stop-transcribing/$taskId/$builderToken'),
  );
  if (response.statusCode == 200) {
    print('Transcription Stopped');
  } else {
    print('Couldn\'t stop the transcription : ${response.statusCode}');
  }
}

We will call the stopTranscription method in our call screen's dispose method. This will stop the transcription before we leave the channel and release the engine resource.

Retrieve the Transcription

You can access the transcription during the video call by using the onStreamMessage event in the event handler.



onStreamMessage: (RtcConnection connection, int uid, int streamId,
    Uint8List message, int messageType, int messageSize) {
  print(message);
}

You will notice the code above prints out an array of numbers that only mean something to you if you are an all-knowing AI. These numbers are generated using Google's Protocol Buffers (also refered to as protobuf).

Protobufs encode data in a platform-agnostic way. This means that apps or software can retrieve this data and serialize it according to their language.

Decode the Transcription

We will use a Protocol Buffer to decode the message. In this case, we will serialize the random-looking numbers into an object called Message.

Start by creating a .proto file with the following content:



syntax = "proto3";

package call_summary;

message Message {
  int32 vendor = 1;
  int32 version = 2;
  int32 seqnum = 3;
  int32 uid = 4;
  int32 flag = 5;
  int64 time = 6;
  int32 lang = 7;
  int32 starttime = 8;
  int32 offtime = 9;
  repeated Word words = 10;
}
message Word {
  string text = 1;
  int32 start_ms = 2;
  int32 duration_ms = 3;
  bool is_final = 4;
  double confidence = 5;
}

Put this file in a new folder: lib/protobuf/file.proto. This is the input file for the generator to create our Message object.

To use protobuf, you must install the protobuf compiler on your computer. It's available via package managers for Mac (brew install protobuf) and Linux (apt install -y protobuf-compiler). For Windows or if you need a specific version, check the Prottobuf downloads page.

You must also install the protobuf dart package within your project using flutter pub add protobuf.

Now run the following command in your terminal. Four files should be generated in the same lib/protobuf folder.



protoc --proto_path= --dart_out=. lib/protobuf/file.proto

Now that the protobuf is set up, we can use the new Message object to retrieve our transcription in English. This object contains a words array with the transcribed sentences. Using the isFinal variable, we trigger a print statement whenever the sentence finishes.



onStreamMessage: (RtcConnection connection, int uid, int streamId,

    Uint8List message, int messageType, int messageSize) {

  Message text = Message.fromBuffer(message);

  if (text.words[0].isFinal) {

    print(text.words[0].text);

  }

},

Save the Transcription

We have covered the transcription part. Now, we need to get the transcribed text, store it, and then use it to prompt an AI to give us a summary. The Real-Time Transcription service sends the transcribed audio in chunks, so as audio chunks are processed, the serialized data is sent in bursts, each triggering the onStreamMessage event. The simplest way to store it is to concatenate a long string of responses. There are more sophisticated ways to do it, but it is good enough for this demo.

We can hold a string called transcription and add the text as it finalizes.



onStreamMessage: (RtcConnection connection, int uid, int streamId,

    Uint8List message, int messageType, int messageSize) {

  Message text = Message.fromBuffer(message);

  if (text.words[0].isFinal) {

    print(text.words[0].text);

    transcription += text.words[0].text;

  }

},

Get Summary

In the main.dart, we can connect to Gemini using our API key and prompt it to summarize the video call. When you receive this response, you can call setState and update the summary variable to see your changes reflected on the main page.

As I was testing this app, I noticed that the response liked to mention the transcript I passed. Because of this, I added some extra prompts so it does not mention the transcript.

Once we need to pass the transcript string to the retrieveSummary, we'll pass the function to call.dart and call it when the call ends.



late final GenerativeModel model;

@override

void initState() {

  super.initState();

  model = GenerativeModel(model: 'gemini-pro', apiKey: apiKey);

}

void retrieveSummary(String transcription) async {

  final content = [

    Content.text(

      'This is a transcript of a video call that occurred. Please summarize this call in a few sentences. Dont talk about the transcript just give the summary. This is the transcript: $transcription',

    ),

  ];

  final response = await model.generateContent(content);

  setState(() {

    summary = response.text ?? '';

  });

}

Done

With that, we have built an application that triggers a Real-Time Transcription service as soon as someone joins the channel. Then, this transcript is saved on the client side so it can prompt Gemini for a summary and share it with the user.

Congratulations, you are on the path to succumbing to the AI overlords.

You can find the complete code here. And dive into the Real-Time Transcription documentation to build upon this guide.

Thank you for reading!

Build a NextJS Video Call App

Tadas Petra — Thu, 04 Jan 2024 17:07:12 +0000

Video calling has become an essential feature in today's digital landscape. Whether it's for remote work, online education, or staying connected with loved ones, the ability to communicate face-to-face over the internet is crucial. As a developer, you might be looking for a reliable solution to integrate video calling into your NextJS application. Look no further! In this article, we will explore how to implement a video call feature using the Agora React SDK.

What We Will Use

Of course, we need the NextJS framework, since it is the topic of this article.

We will use Agora for the video call portion of the app. Specifically, we will use the agora-rtc-react package. This package is a React SDK for interfacing with Agora.

We will use Tailwind CSS for minor styling of the application.

Create an Agora Account

Navigate to the Project List tab under the Project Management tab. Create a project by clicking the blue Create button.

Retrieve the App ID, which we’ll use to authorize the app requests as we develop the application.

Initialize the NextJS Project

Create your NextJS project by using npx create-next-app@latest.
Add Tailwind CSS when prompted by the NextJS installer.
Add the Agora UI Kit by using npm install agora-rtc-react.
Add PUBLIC_AGORA_APP_ID = '<---Your App Id--->' to your .env file.

Structure of the Project



├── components
│   └── Call.tsx
├── app
|   └── Layout.tsx
│   └── page.tsx
│   └── channel
│       └── [channelName]
│           └── page.tsx
├── public
│   └── favicon.png
├── package.json
├── next.config.js
├── tsconfig.json
└── tailwing.config.cjs

Building a Form with NextJS

'use client'

The form we want to build is a very simple form, where we take the input from the user and route the user to the channel/<form input here> route of the website.

This needs to happen client side because you are receiving the input from the user, and based on that input send them to a new route. For that, we will use the useRouter hook from next/navigation. And to use it client side we have to add 'use client' at the top of our file.

Form UI

The next step is creating the UI for the form input. For this, we create a form element with an input element named "channel".

All the magic happens in the form's onSubmit method where we can access the data(e) from the submit action. Whenever a form is submitted, the default action is to reload the page, however, since we want to lead a user to a new page we want to handle this action manually. Using e.preventDefault() we can stop the default page refresh.

The next step is to reroute our app to the appropriate channel page. We first define a variable called target which asserts that we have a "channel" value in our form event.

And lastly using the router we imported from next/navigation we can route this page to /channel/<inputted channel name>



<div className="flex flex-col items-center">
  <h1
    className="mb-4 mt-20 text-4xl font-extrabold leading-none tracking-tight text-gray-900"
  >
    <span className="text-black">NextJS</span> x <span className="text-blue-500"
    >Agora</span
    >
  </h1>
  <form onSubmit={(e) => {
    e.preventDefault()
    const target = e.target as typeof e.target & {
      channel: { value: string }
    };
    router.push(`/channel/${target.channel.value}`)
  }}>
    <div className="md:flex md:items-center mt-6">
      <div>
        <label
          className="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4"
          htmlFor="inline-full-name"
        >
          Channel Name
        </label>
      </div>
      <div>
        <input
          className="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500"
          id="inline-full-name"
          type="text"
          name="channel"
          placeholder="Enter channel name"
          required
        />
      </div>
    </div>
    <div className="text-center">
      <button
        className="inline-flex items-center justify-center px-5 py-3 mt-5 text-base font-medium text-center text-white bg-blue-400 rounded-lg hover:bg-blue-500 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900"
      >Submit</button
      >
    </div>
  </form>
</div>

Our form should look like this:

Call Page

In the Call component that we will build with the agora-rtc-react package, we want to print the name of the channel we have joined.

The redirect we used in the previous section is dynamic, and it will be different depending on the channelName we entered. To handle this in Next, we need to create a channel folder and a [channelName] folder within, and a page.tsx file. The square brackets signify that the dynamic channel name in our URL will be passed as a parameter in this component.

So we retrieve the channel name from our params and display it in the top left of our screen above the video call component.



import Call from "@/components/Call";

export default function Page({ params }: { params: { channelName: string } }) {
    return (
        <main className="flex w-full flex-col">
            <p className="absolute z-10 mt-2 ml-12 text-2xl font-bold text-gray-900">
                {params.channelName!}
            </p>
            <Call appId={process.env.PUBLIC_AGORA_APP_ID!} channelName={params.channelName}></Call>
        </main>
    )
}

Add the Call Component

The Call component will contain two key parts:

Videos of all the participants
End call button

The more challenging part is displaying the videos of all the participants. To do that we need to create our Agora client and pass it to the AgoraRTCProvider, which initializes and gives us access to the Agora RTC service. Inside this, we can now display the videos component and an end-call button:



"use client" 

import AgoraRTC, {
  AgoraRTCProvider,
  LocalVideoTrack,
  RemoteUser,
  useJoin,
  useLocalCameraTrack,
  useLocalMicrophoneTrack,
  usePublish,
  useRTCClient,
  useRemoteAudioTracks,
  useRemoteUsers,
} from "agora-rtc-react";

const client = useRTCClient(AgoraRTC.createClient({ codec: "vp8", mode: "rtc" }));

  return (
    <AgoraRTCProvider client={client}>
      <Videos channelName={props.channelName} AppID={props.appId} />
      <div className="fixed z-10 bottom-0 left-0 right-0 flex justify-center pb-4">
        <a className="px-5 py-3 text-base font-medium text-center text-white bg-red-400 rounded-lg hover:bg-red-500 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900 w-40" href="/">End Call</a>
      </div>
    </AgoraRTCProvider>
  );
}

Videos

The Videos component will be the part of the site that displays the videos of all the participants. Many hooks are used to set up the call:

useLocalMicrophoneTrack() retrieves the current user's microphone.
useLocalCameraTrack() retrieves the current user's video input.
useRemoteUsers() retrieves all the user information for the remote users.
useRemoteAudioTracks() retrieves the audio for those users.
usePublish() publishes the current user's video and audio.
useJoin() joins the channel for the video call.



const { AppID, channelName } = props;
const { isLoading: isLoadingMic, localMicrophoneTrack } = useLocalMicrophoneTrack();
const { isLoading: isLoadingCam, localCameraTrack } = useLocalCameraTrack();
const remoteUsers  = useRemoteUsers();
const { audioTracks } = useRemoteAudioTracks(remoteUsers);

usePublish([localMicrophoneTrack, localCameraTrack]);
useJoin({
    appid: AppID,
    channel: channelName,
    token:  null ,
});

Then we need to make sure all the audio for the remote users is started:



audioTracks.map((track) => track.play());

Finally, we need to define our UI: first a loading state, while we wait for the local user's microphone and video to begin, and then a grid of all the users who are on the call:



const deviceLoading = isLoadingMic || isLoadingCam;
if (deviceLoading) return <div className="flex flex-col items-center pt-40">Loading devices...</div>;
const unit = 'minmax(0, 1fr) ';

return (
  <div className="flex flex-col justify-between w-full h-screen p-1">
    <div className={`grid  gap-1 flex-1`} style={{
      gridTemplateColumns:
        remoteUsers.length > 9
          ? unit.repeat(4)
          : remoteUsers.length > 4
            ? unit.repeat(3)
            : remoteUsers.length > 1
              ? unit.repeat(2)
              : unit
    }}>
      <LocalVideoTrack track={localCameraTrack} play={true} className="w-full h-full" />
      {remoteUsers.map((user) => (
        <RemoteUser user={user} />
      ))}

    </div>
  </div>
);

Our final video call should look like this:

Summary

With that, we have a complete video call experience. Here's how we built it:

Create our NextJS project with Tailwind.
Install the Agora SDK.
Create a form to input the channel name.
Redirect the site to a URL with the channel name.
Display the channel name with a video call.

The code for this project can be found here. You can find out more about Agora video calling here.

Thank you for reading!

Complete Guide to Flutter State Management

Tadas Petra — Thu, 05 Oct 2023 12:52:24 +0000

State management is absolutely crucial once you are building an app that has some complexity. It is a tough topic, but at the core, it's quite simple. I will try to break it down for you in the simplest way that I can. This is the complete guide to state management.

What is State?

If we break down the phrase State Management you can see that it is a way to manage your state. But what is State?

There are two types of data you can have in an application. You can either have regular data/information (that is hard coded and cannot change) or you can have state which is "fancy data" that can be updated.

The most common example of a state is user information. You might create a UserInfo state that can be used and updated within your application. For example, you might have a Hello, Tadas displayed on your home screen, and the Tadas part of the information would be retrieved from your UserInfo state. And if I wanted to change my name to T-Dog I could go into the settings page and update my UserInfo state there.

There are many more examples of the state within the application: News Feed, Follower Count, Todo Items, Countdown Timer, etc.

The simplest definition is that a state is just data that can be changed (within a widget).

What is Management?

State management is the topic of managing that state. What does it mean to manage it? And why is it important to do it?

Why?

Let's take the above example of having a UserInfo state that holds information about the current user. There are so many ways that the information here can be updated.

When the user creates an account.
In the settings page.
Whenever they are followed.

As well as many places where the information can be read.

Name on the home page.
Name on the profile page.
Profile picture on every page.
Follower count on the profile page.
Whether they are following a specific person on their profile page.

And there are many more examples. So what would happen if we didn't have any state management and we needed to build an app that could do all the above?

To see the information, you would need to pass the class containing all that information to every. single. screen. That sounds bad, but what's even worse? It can be updated in many places. So let's say the user decides to change their name to T-Dog. Without state management, it will only get updated on one screen, so you would need to set up some way to let every single other screen know that the name got updated.

This sounds like a complex mess. Thankfully we have state management.

A proper State Management solution solves two problems.

It centralizes all the data in one place, so there is a single source of truth.
Updates the UI whenever there have been changes in that data.

Set State

setState is the simplest form of state management. It can update your UI whenever you call it, but it is limited to a single widget by default.

State Management using Flutter only

If you've heard about the topic of state management, it's most likely come from people debating what package has the best state management solution. But you do not need to use a package to manage your state.

In fact, every state management package has been built using Flutter itself, so of course it is possible to do this with strictly Flutter code. Let's walk through an example of how you can implement your own state management solution, for the basic starter counter app.

Warning!

This will be kind of complicated, but it will teach you what is happening under the hood of most state management packages.
If you are using a package you don't really need to know this and can skip to the next section, but I would recommend reading through it.

Centralizing the Data

The most important thing is having one source of truth for all the data related to a specific function. Since we are making a counter application the main (and only feature in this case) is the actual counter. For bigger applications, you might have a collection of data about the user. So you would set up a UserInfo class to be the central location for everything related to the user's information. In this case, we will create a class called CounterState within a state.dart file.

class CounterState {
  CounterState({
    required this.counter,
  });

  final int counter;

  CounterState copyWith({
    int? counter,
  }) {
    return CounterState(
      counter: counter ?? this.counter,
    );
  }
}

We have added a copyWith method that allows you to update the value of the class. So let's say you have instantiated the CounterState with a value of 1.

Note

You can use a VSCode extension called Dart Data Class Generator to create this copyWith method for you.

CounterState _counterState = CounterState(counter: 1);

To update this value to 2 you would take the instantiated object and call the copyWith method.

_counterState.copyWith(counter: 2);

This might seem cumbersome given that it is only a counter that we are doing this with, but using this copyWith method is crucial when you have more than one piece of data. It allows you to to copy all the other data, and only change what you define within the copyWith method.

Providing the Data with an InheritedWidget

The state is now defined, but we need to be able to give access to this state to other parts of the application. To do this you need to use an InheritedWidget. You can find more information on InheritedWidget on the Flutter Docs, but the simple explanation is it allows widgets lower in the widget tree access to the data within the InheritedWidget.

First, you have to define the InheritedWidget. I will name it Provider in this case because we will be providing the data to other parts of the app.

You will see later why I named it this way.

class Provider extends InheritedWidget {
  const Provider(this.data, {Key? key, required Widget child}) : super(key: key, child: child);

  final CounterState data;

  static CounterState of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<Provider>()!.data;
  }

  @override
  bool updateShouldNotify(Provider oldWidget) {
    return data != oldWidget.data;
  }
}

The updateShouldNotify function lets you define when the InheritedWidget should update your application. You would most likely want to update the app whenever the data changes, however, you have the option to customize that. Either way, whenever your updateShouldNotify function returns true it lets all the widgets that are using your data state know that it should rebuild. In this case, we are going to let our app know about the changes every time whenever the previous data doesn't match the current data.

As I mentioned earlier, InheritedWidget lets the widgets that are found below it in the widget tree know that the data has been updated, and thus they get rebuilt. In this case, we want all the affected widgets to know that the data has been updated, so we will wrap the whole application with our InheritedWidget which we named Provider.

void main() {
 var _state = CounterState(counter: 1);
 runApp(Provider(_state, child: const MyApp()));
}

And now we have access to the current state of our application.

Text(
 Provider.of(context).counter.toString(),
),

Updating the State

This above solution is close, but we are missing a critical step, which is updating the state. We defined a constant _state variable that you can't really change. So we will need to create one more widget that holds the state. This widget will have 2 important roles:

Hold the state.
Be the only place where the state can get updated.

Why is that second point so important? Let's say you are working on a big application, that has counters all over the place. Let's say you decide that the counters should actually be incremented by 2 instead of 1. Now you would have to go through every place in the code that is updating counters and make sure that it gets incremented in the new and correct way. But having it all in one place means you can just update it in that one place and it gets reflected throughout the rest of the application.

Again, with a simple example like this, it might not seem like such a big deal, but when you have a giant application it becomes a lot more important.

The other big benefit is if you are running into a bug associated with some feature, it becomes a lot easier to figure out where the problem is since it can only be happening in one place.

So in this case we are going to create a class called AppStateHolder. Just like the name suggests it will hold the app state which in this case is a CounterState, and it will have functions that will be the interface for the rest of the application to update the CounterState using the copyWith method.

class AppStateHolder extends StatefulWidget {
 const AppStateHolder({required this.child, Key? key}) : super(key: key);

 final Widget child;

 static AppStateHolderState of(BuildContext context) {
 return context.findAncestorStateOfType<AppStateHolderState>()!;
 }

 @override
 AppStateHolderState createState() => AppStateHolderState();
}

class AppStateHolderState extends State<AppStateHolder> {
 CounterState _counterState = CounterState(counter: 0);

 void add() {
 int newCounter = _counterState.counter + 1;
 setState(() {
 _counterState = _counterState.copyWith(counter: newCounter);
 });
 }

 @override
 Widget build(BuildContext context) {
 return Provider(
 _counterState,
 child: widget.child,
 );
 }
}

This looks like a lot of boilerplate code, but really it's doing only those two things mentioned above. It holds the state and passes it to the rest of our app using the Provider, and now it also allows us to update that state using the add() function.

Using the State within your App

To finally put everything together need to change from wrapping our whole app with the Provider to wrapping it with AppStateHolder.

Note: This still internally wraps it with a Provider inside the AppStateHolder

void main() {
 runApp(const AppStateHolder(child: MyApp()));
}

Now we have access to a full state management solution for our counter application.

We can access the current counter state using Provider.of(context).counter, and we can update the state of the application using AppStateHolder.of(context).add().

As you can see from this example, it was a lot of setup just to get a stupid little counter to work. I feel like there could be some pre-written code to make it a bit easier...(Read the next section)

Example Code

The example code for this is located here

Why use a package?

Hopefully, it is pretty clear why from the previous section. But I want to make it clear, you by no means have to use one. If your app is simple enough, just using setState is enough. If you are working at a big enough organization it might even be worth it to build your own complete state management solution that you have full control of. But for me personally, using a package is the way to go.

Packages do something similar to what we did, but with more features and more robustness, while at the same time making it a lot less set up for the developer.

Options

I can only really recommend two options, and these recommendations are my own personal opinion.

Riverpod

Riverpod is my favorite option and the one I would recommend for most people to use. If you understood the example that we covered, you will notice some similarities between that and Riverpod. Riverpod uses Providers to provide data to the rest of your application. For holding state you should use a NotifierProvider which

Provides the state of your application.
Creates an interface to update that state using a Notifier.

You will notice this will look similar to what we created above, just with way less boilerplate.

If you want to dive deeper into how you would Riverpod with Firebase, which is the most popular database choice for Flutter apps, I have built a whole course just on that.

In my opinion, Riverpod is the least boilerplate, while also utilizing the core Flutter features properly.

Bloc

Bloc is another very popular solution within the Flutter community. It is known to scale well, and be a good solution to big projects.

Once again this is just my personal opinion, but I don't choose Bloc because there is a lot of boilerplate again. Although probably less than setting it up yourself, there is the Bloc paradigm that you have to learn. This could be seen as a positive because it forces you to follow good code practices, but I personally enjoy packages with less overhead.

Others

There are many other options, so feel free to explore, but these 2 are the big dogs in the Flutter community, and you can't go wrong with either.

To learn more flutter topics visit: https://hungrimind.com/flutter

Build a Video Call App with Astro and ReactJS

Tadas Petra — Fri, 22 Sep 2023 18:53:33 +0000

Astro is a framework that renders static HTML to your website with no JavaScript unless you explicitly ask for it and it is gaining popularity fast. But can you add video calls to your Astro website?

The answer is yes! This article will teach you exactly how to do it.

What We Will Use

Of course, we need the Astro framework, since it is the title of this article.

We will use Agora for the video call portion of the app. Specifically, we will use the agora-rtc-react package. This package is a React SDK for interfacing with Agora.

Currently, there is no native Astro package. But Astro was built to be used with almost any popular web framework. So the agora-rtc-react package will work just fine.

We will use Tailwind CSS for minor styling of the application.

Create an Agora Account

Navigate to the Project List tab under the Project Management tab. Create a project by clicking the blue Create button.

Retrieve the App ID, which we’ll use to authorize the app requests as we develop the application.

Initialize the Astro Project

Create your Astro project by using npm create astro@latest.
Add Tailwind CSS by using npm astro add tailwind.
Add React by using npm astro add react.
Add the Agora UI Kit by using npm install agora-rtc-react.
Add PUBLIC_AGORA_APP_ID = '<---Your App Id--->' to your .env file.

Structure of the Project

├── src
│   ├── components
│   │    └── Call.tsx
│   ├── layouts
│   │   └── Layout.astro
│   └── pages
│       ├── index.astro
│       └── channel
│           └── [channelName].astro
├── public
│   └── favicon.png
├── package.json
├── astro.config.js
├── tsconfig.json
└── tailwing.config.cjs

Building a Form with Astro

Astro SSG vs SSR

By default, Astro projects use a static site generator (SSG) that creates a static site which you cannot change. Astro provides a way to interface with various frameworks (React, Svelte, Vue, etc.) using a mechanism called islands. Forms need to be interactive, and we could use an island to get this done. However, you can create a form with Astro that ships with zero JavaScript.

To do that, we need to enable the server-side renderer (SSR) by adding output: 'server' to the astro.config.mjs file. This means that our pages will get rendered on the server. This brings the benefits of being able to access server-side data and to run some functions before the page loads.

Form UI

For the case of creating and submitting a form, we will load the page initially to display the form. Then whenever we submit the form, it will act much like an API endpoint.

Normally, when you submit a form the data is added to the URL, and you would have to parse it out. By changing the form's data transfer method to POST, it will send the form data as part of the Request body. For this application, the only data we need is the name of the channel the user is trying to join:

<div class="flex flex-col items-center">
    <h1
        class="mb-4 mt-20 text-4xl font-extrabold leading-none tracking-tight text-gray-900"
    >
        <span class="text-orange-500">Astro</span> x <span class="text-blue-500"
            >Agora</span
        >
    </h1>
    <form method="POST">
        <p>{error}</p>
        <div class="md:flex md:items-center mt-6">
            <div>
                <label
                    class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4"
                    for="inline-full-name"
                >
                    Channel Name
                </label>
            </div>
            <div>
                <input
                    class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500"
                    id="inline-full-name"
                    type="text"
                    name="channelName"
                />
            </div>
        </div>
        <div class="text-center">
            <button
                class="inline-flex items-center justify-center px-5 py-3 mt-5 text-base font-medium text-center text-white bg-blue-400 rounded-lg hover:bg-blue-500 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900"
                >Submit</button
            >
        </div>
    </form>
</div>

Our form should look like this:

Retrieve Form Data and Redirect to the Call Page

Once the form is submitted with the data in the Request, the page is reloaded and the data is sent to the server. This data can be retrieved server-side and acted on before the page is displayed. In this case, we will check for errors. If we find any, we will render the same page again to show the user the error. If there is no error, we will redirect the user to the page associated with the video call channel they entered:

let error: String = "";

if (Astro.request.method === "POST") {
    try {
        const data = await Astro.request.formData();
        const channelName = data.get("channelName");
        return Astro.redirect(`/channel/${channelName}`);
    } catch (error) {
        if (error instanceof Error) {
            error = error.message;
        }
    }
}

Call Page

In the Call component that we will build with the agora-rtc-react, we want to print the name of the channel we have joined.

The redirect we used in the previous section is dynamic, and it will be different depending on the channelName we entered. To handle this in Astro, we need to create a channel folder and in the folder define a file named [channelName].astro. The square brackets signify that the dynamic ${channelName} in our URL will be passed as a parameter in this component. We just need to retrieve the channel name and display it in our UI.

`client:only` directive

For our Call component we pass the channelName and the appId. But we also need to add a client:only="react" directive. This directive is needed for creating an Astro island. As mentioned, Astro generates static HTML code for the site, and the video call that we create needs to be interactive.

So without this directive Astro will try to render static HTML from this React component. However, by using client:only we skip the server-side rendering, and just let React do what React wants to do: render only on the client.

Since Astro supports many frameworks we also need to specify which framework it needs to use:

---
import Call from "../../components/Call.tsx";

const { channelName } = Astro.params;
---

<div class="static m-0 p-0">
    <p class="absolute z-10 mt-2 ml-12 text-2xl font-bold text-gray-900">
        {channelName!}
    </p>
    <Call
        client:only="react"
        channelName={channelName!}
        appId={import.meta.env.PUBLIC_AGORA_APP_ID}
    />
</div>

Add the Call Component

This last component is a pure React component. The Call component will contain three key components:

Videos of all the participants
Channel name
End call button

The channel name is a simple text at the top left of the screen. The call button is at the bottom middle of the screen. Whenever you click the button, it returns you to the previous screen, where you can join a different video call.

The interesting part is displaying the videos of all the participants. In order to do that we need to create an AgoraRTCProvider, which initializes and gives us access to the Agora RTC service. Inside this we can now display the video:

Videos

The Videos component will be the part of the site that displays the videos of all the participants. Many hooks are used to set up the call:

useLocalMicrophoneTrack() retrieves the current user's microphone.
useLocalCameraTrack() retrieves the current user's video input.
useRemoteUsers() retrieves all the user information for the remote users.
useRemoteAudioTracks() retrieves the audio for those users.
usePublish() publishes the current user's video and audio.
useJoin() joins the channel for the video call.

const { AppID, channelName } = props;
const { isLoading: isLoadingMic, localMicrophoneTrack } = useLocalMicrophoneTrack();
const { isLoading: isLoadingCam, localCameraTrack } = useLocalCameraTrack();
const remoteUsers  = useRemoteUsers();
const { audioTracks } = useRemoteAudioTracks(remoteUsers);

usePublish([localMicrophoneTrack, localCameraTrack]);
useJoin({
    appid: AppID,
    channel: channelName,
    token:  null ,
});

Then we need to make sure all the audio for the remote users is started:

audioTracks.map((track) => track.play());

Finally, we need to define our UI: first a loading state, while we wait for the local user's microphone and video to begin, and then a grid of all the users who are in the call:

const deviceLoading = isLoadingMic || isLoadingCam;
if (deviceLoading) return <div className="flex flex-col items-center pt-40">Loading devices...</div>;

const numUsers = remoteUsers.length + 1; 
let numCols = 1;
let numRows = 1;
switch (numUsers) {
case 1:
    numCols = 1;
    numRows = 1;
    break;
case 2:
    numCols = 2;
    numRows = 1;
    break;
case 3:
    numCols = 3;
    numRows = 1;
    break;
case 4:
    numCols = 2;
    numRows = 2;
    break;
default:
    break;
}

return (
<div className="flex flex-col justify-between w-full h-screen p-1">
    <div className={`grid grid-cols-${numCols} grid-rows-${numRows} gap-1 flex-1`}>
    <LocalVideoTrack track={localCameraTrack} play={true} className="w-full h-full" />
    {remoteUsers.map((user) => (
        <RemoteUser user={user} />
    ))}

    </div>
</div>
);

Our final video call should look like this:

Summary

With that, we have a complete video call experience. Here's how we built it:

Create our Astro project.
Install Tailwind CSS, React, and the Agora SDK.
Create a form to input the channel name.
Redirect the site to a URL with the channel name.
Display the channel name with a video call.

The code for this project can be found here. You can find out more about Agora video calling here.

Thank you for reading!

Build a Video Call App with Astro

Tadas Petra — Tue, 01 Aug 2023 20:06:48 +0000

A framework called Astro is gaining popularity, and so I decided to learn web development to give it a shot. I built a couple of sites with it, and then I thought: "I wonder if you can build video call apps with Astro."

The answer is yes! This article will teach you exactly how you can do it too.

What We Will Use

Of course, we need Astro, since it is the title of this article.

The second part of the title is about video calls. For that, we will use Agora. Specifically, we will use the agora-react-uikit package. This package is a React wrapper for the Agora UI Kit, which is a set of UI components that make it easy to build a video call app.

Currently, there is no native Astro package. But given that we can use almost any popular web framework in an Astro application, the agora-react-uikit will work just fine.

We will also use Tailwind CSS to do some minor styling of the application.

Create an Agora Account

Navigate to the Project List tab under the Project Management tab, and create a project by clicking the blue Create button.

Retrieve the App ID, which we’ll use to authorize the app requests as we develop the application.

Initialize the Astro Project

Create your Astro project using npm create astro@latest.
Add Tailwind CSS using npx astro add tailwind.
Add React using npx astro add react.
Add the Agora UI Kit using npm install agora-react-uikit.
Add PUBLIC_AGORA_APP_ID = '<---Your App Id--->' to your .env file.

Structure of the Project



├── src
│   ├── components
│   │    └── Call.tsx
│   ├── layouts
│   │   └── Layout.astro
│   └── pages
│       ├── index.astro
│       └── channel
│           └── [channelName].astro
├── public
│   └── favicon.png
├── package.json
├── astro.config.js
├── tsconfig.json
└── tailwing.config.cjs

Building a Form with Astro

Astro SSG vs SSR

By default Astro projects use a static site generator (SSG) that creates a static site which you cannot change. Astro provides a way to interface with different frameworks (React, Svelte, Vue, etc.) using a mechanism called islands. Forms need to be interactive, and we could definitely use an island to get this done. However it is possible to create a form with Astro that ships with zero JavaScript.

Form UI

For the case of creating and submitting a form, we will load the page initially to show the form. Then whenever we submit the form, it will act much like an API endpoint.

Normally, when you submit a form the data will be added to the URL, and you would have to parse it out. By changing the form's data transfer method to POST, it will send the form data as part of the Request body. For this application the only data we need is the name of the channel the user is trying to join:



<div class="flex flex-col items-center">
    <h1
        class="mb-4 mt-20 text-4xl font-extrabold leading-none tracking-tight text-gray-900"
    >
        <span class="text-orange-500">Astro</span> x <span class="text-blue-500"
            >Agora</span
        >
    </h1>
    <form method="POST">
        <p>{error}</p>
        <div class="md:flex md:items-center mt-6">
            <div>
                <label
                    class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4"
                    for="inline-full-name"
                >
                    Channel Name
                </label>
            </div>
            <div>
                <input
                    class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500"
                    id="inline-full-name"
                    type="text"
                    name="channelName"
                />
            </div>
        </div>
        <div class="text-center">
            <button
                class="inline-flex items-center justify-center px-5 py-3 mt-5 text-base font-medium text-center text-white bg-blue-400 rounded-lg hover:bg-blue-500 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900"
                >Submit</button
            >
        </div>
    </form>
</div>

Our form should look like this:

Retrieve Form Data and Redirect to Call Page

Once the form is submitted with the data in the Request, the page will be reloaded and the data will be sent to the server. This data can be retrieved server-side and acted on before the page is displayed. In this case, we will check for errors. If we find any, we will render the same page again to show the user the error. If there is no error, we will redirect the user to the page associated with the video call channel they entered:



let error: String = "";

if (Astro.request.method === "POST") {
    try {
        const data = await Astro.request.formData();
        const channelName = data.get("channelName");
        return Astro.redirect(`/channel/${channelName}`);
    } catch (error) {
        if (error instanceof Error) {
            error = error.message;
        }
    }
}

Call Page

Other than the call component that will be provided by the agora-react-uikit, the call page will be simple. We want to print out the name of the channel we have joined.

`client:only` directive

For our Call component we pass the channelName and appId. But we also need to add a client:only="react" directive. This directive is needed for creating an Astro island. As mentioned, Astro is generating static HTML code for the site, and the video call that we create needs to be interactive.

So without this directive Astro will try to render static HTML from this React component. However by using client:only we skip the server-side rendering, and just let React do what React wants to do: render only on the client.

Since Astro supports many frameworks we also need to specify which framework it needs to us:



---
import Call from "../../components/Call.tsx";

const { channelName } = Astro.params;
---

<div class="static m-0 p-0">
    <p class="absolute z-10 mt-2 ml-12 text-2xl font-bold text-gray-900">
        {channelName!}
    </p>
    <Call
        client:only="react"
        channelName={channelName!}
        appId={import.meta.env.PUBLIC_AGORA_APP_ID}
    />
</div>

Add Call Component

This last component is a pure React component. We have a state variable activeCall that we will use to toggle between the video call screen when true and a rejoin and back button when false.

To use the Agora UI Kit, we need to pass rtcProps containing the App ID and the channel name, in addition to the callbacks. In this case, we define only the EndCall callback, which will change the activeCall to false:



import AgoraUIKit from 'agora-react-uikit';
import { useState } from 'react';

interface AppInfo {
  channelName: string;   
  appId: string;
}

const Call = (props:AppInfo) => {
  const [activeCall, setActiveCall] = useState(true);
  const rtcProps = {
    appId: props.appId, // enter your agora appid here
    channel: props.channelName, // your agora channel
  };
  const callbacks = {
    EndCall: () => setActiveCall(false),
  };


  return activeCall ? (
    <div style={{display: 'flex', width: '100vw', height: '100vh'}}>

      <AgoraUIKit rtcProps={rtcProps} callbacks={callbacks} /> 
    </div>
  ) : (
    <div className='ml-12 flex flex-col'>
      <div className='pt-10'></div>
      <button className="px-5 py-3 mt-5 text-base font-medium text-center text-white bg-gray-400 rounded-lg hover:bg-gray-500 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900 w-40" onClick={() => setActiveCall(true)}>Rejoin Call</button>
      <a className=" px-5 py-3 mt-5 text-base font-medium text-center text-white bg-blue-400 rounded-lg hover:bg-blue-500 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900 w-40" href='/'>Back</a>
    </div>
  );
};

export default Call;

Our final video call should look like this:

Summary

With that, we have a complete video call experience. Here's how we built it:

Create our Astro project.
Install Tailwind CSS, React, and the Agora UI Kit.
Create a form to input the channel name.
Redirect the site to a URL with the channel name.
Display the channel name with a video call.

The code for this project can be found here. And you can find out more about Agora video calling here.

Thank you for reading!

Live Streaming to Multiple Platforms with Multiple Users

Tadas Petra — Fri, 08 Oct 2021 00:48:28 +0000

There are some pretty good solutions to have collaborative livestreams with other creators. But if you are like me, you probably think they are a little too expensive, and you probably wish there was more customizability. Thankfully, Agora exists and you can build your own services like this!

Prerequisites

An Agora Developer Account - Sign Up Here
Flutter SDK
Agora RTC package
Agora RTM package

Since this is such a big project the plan is to break it down and cover the most important concepts. If you want the full code, you can find it here:
https://github.com/tadaspetra/flutter-projects/tree/main/streamer

App Overview

Before getting into those 3 main points, I believe a general overview of what we are trying to accomplish and how we are going to do it would be beneficial. The goal of this application is simple: allow multiple users to join and stream their video to a streaming platform. (Using a host application that manage the users and what gets actually pushed to the streaming platform)

The flow of the application is made to be as simple as possible. You start off in the main screen where you need to enter which channel you are trying to join and your name. Then you have two options. You can join as a Director of the call, or a Participant within the call.

Director - Manages all the users and where and how the stream gets sent out.

Participant - Joins the call and has a simple call interface.

In this article we won't be covering the basics of Agora and how it works. If you aren't familiar with Agora here are a couple good places to start, then you can come back to this one.

Video Call: https://youtu.be/zVqs1EIpVxs

Livestreaming: https://youtu.be/kE0ehPMGgVc

Participant View

This article won't spend much time on the participant view. The logic here should be very similar to any other type of video call, except for 4 big differences.

When the user first joins they are in a lobby, so their camera and audio are off.
When the host brings them into the stage, their video and audio should turn on.
Video and Audio can be controlled by the host.
Instead of seeing everybody in the call, they will only see the people on stage.

To the person using the device, they shouldn't see much of a difference from any regular video call. The only extra thing is the "lobby screen" that they will have, before actually joining the call. If there are people on the stage, the current participant will be able to see them, even if they are not on the stage yet. They will be able to watch the output call that gets sent to the streaming platform, but without the custom transcoding. Now all these complex operations are done using Agora's RTM Messages

RTM Messaging

Since this is no simple video call application, it will require some way for the director to control the participants. For this we will use the agora_rtm package. This package allows you to send real time data between the everybody in the channel. The agora_rtc_engine package is actually built on top of agora_rtm. The difference is that RTM allows you to send any data, while RTC makes it easy to send video and audio data. For this application, only the director will be able to send out RTM messages, and the participants are only going to be receiving them. There are three types of functions we need to allow the director to have:

Mute or unmute audio.
Enable or disable video.
Send out list of active users.

To mute the user the director sends out a channel wide RTM message with the following format "mute uid", except instead of the word "uid" they send the specific uid of the user to be muted. Upon receiving this message the participant checks if this uid is their uid. If it is, then the user mutes themselves. This works the same way with unmuting and disabling and enabling video except using the keywords "unmute uid", "enable uid", and "disable uid".

The slightly trickier part is the active users. Normally if you're using agora, you would display all the broadcasters within that call. But in this case, some of them are in the lobby, and they should not be displayed to the viewers. To handle this we use RTM messages again to send all the users that should be displayed. The format is "activeUsers uid,uid,uid" except replace the word "uid" with the specific uid of the active users.

So far we have covered almost everything from the participant point of view. Now let's transition to the Director, which is where most of the magic happens.

Director Controller

The director in this app has a lot of functions and things to keep track of. To keep things organized we will use riverpod, a popular state management solution for Flutter.

If you have never used it, here is a good place to start: https://www.youtube.com/watch?v=8qzip8tVmqU

The DirectorController that we have defined here will be a StateNotifierProvider. This helps separate our business logic from the UI section of our application.

final directorController = StateNotifierProvider.autoDispose<DirectorController, DirectorModel>((ref) {
  return DirectorController(ref.read);
});

This controller will have functions that the rest of our code will be able to access, including joinCall(), leaveCall(), toggleUserAudio(), addUserToLobby(), promoteToActiveUser(), startStream(), and lots of other ones. This controller will also store all the data that we need to keep track of within our app.

As the participants are only receiving the RTM messages, the director will only be sending out RTM messages.

In order for the director to be able to send out RTM messages, you need to set up a client and a channel using RTM. This is very similar to what happens with RTC Engine behind the scenes. You need to create a client, log into the client, then create a channel and join the channel. Once this is done, you are ready to send out the RTM messages. The participants will need to do the same thing in order to receive messages on the onMessageReceived callback.

To actually send out the message you need to use the sendMessage function that is provided on that channel. To format the message correctly use this:

AgoraRtmMessage.fromText("unmute ${state.activeUsers.elementAt(index).uid}")

Use the same approach for all the other messages like "mute uid", "enable uid", "disable uid", and "activeUsers uid,uid,uid".

So those are the infrastructure details, of what enables us to actually be able to be manage users and streams. Let's get into the details of how the director part of this app actually works. The main three features that we are going to cover are:

Muting and Disabling Video of other users
Moving users between main stage and lobby
Transcoding Each Video and pushing it to Streaming Platforms

Muting and Disabling Video

Now given that we have the infrastructure with RTM messaging all set up, this section might sound trivial, but there are actually a lot of pieces for this that need to be accounted for and synced up.

Director App

Muting/Unmuting user's
Disabling/Enabling user's video
Current states of audio and video for each user
Update if user changes their own state

Participant App

Mute/Unmute yourself
Disable/Enable own video
Mute/Unmute from director
Disable/Enable video from director
Current State of audio and video

To do all this and have it synced up there are lots of different parts that control the audio. The best way to go about this is to look at the different scenarios.

Participant mutes/unmutes themselves When the participant decides to mute themselves they need to call muteLocalAudioStream(), then update their own button state to show that they are muted, and then on the director side remoteAudioStateChanged event should get triggered, which in should update the current state for that specific user.
Participant disables/enables video Same process as above, except call the function muteLocalVideoStream() and the event on the director side should be remoteVideoStateChanged.
Director mutes/unmutes user Director needs to send an RTM message with either "mute uid" or "unmute uid". Then the user with the matching uid will follow the same execution as if they were muting themselves, and then again the director should see the remoteAudioStateChanged event trigger, and they can update the local state.
Director disables/enables video Same process as muting, but instead the stream message will be "enable uid" or "disable uid"

Now let's add another layer of complexity to this.

Stage and Lobby

The idea here isn't too complex, but it comes with a couple caveats that need to be taken care of. The only person that will be able to see both lobby and stage is the director. The DirectorController will hold a separate list of active users and lobby users. A normal flow for a participant user would be to join the channel, and they will be directly added to the lobby. Then the director is in complete control and can move them to and from the stage as they please.

The flow for moving a person to and from the stage is very similar. First remove them from the previous list (lobby or active) and add them to the other list. Then update send out the new list of activeUsers to everybody using a RTM message

Not too bad, but here is where the complexity comes in. You don't want the lobby users to be able to talk over the users in the stage so they should be muted whilst in the lobby. And since they are in the lobby there is no need to take up extra bandwidth for their video either. Because of this we need to add a couple more scenarios for audio and video control.

Participant first joins channel Since they are added directly into the lobby, they need to be muted and video disabled immediately. Whenever a participant joins a channel, they automatically mute themselves.
Participant moved to Stage When they are moved to the main stage their video and audio need to be enabled, so that the audience can see them. This should follow the same logic as director unmuting or enabling video.
Participant moved to Lobby When they are moved to the lobby their video and audio need to be enabled, so that the audience can see them. This should follow the same logic as director muting or disabling video.

Transcoding

Once you have the activeUser list synced up with both the director section of the app, and the participant section of the app, the last step left is to broadcast it out to the streaming platforms. For this we will first transcode all the incoming videos to the desired layout, and then publish and unpublish our streams to the desired platforms using Real-Time Messaging Protocol (RTMP).

First we need to define what layout we want to have for our output video. In this case we will only support up to 8 people in a call. But you can extend the same concept to as many callers as you want. We also take into account that our stream will be a 1080p streams so have 1920x1080 pixels to work with. Give that information the layout will look like this:

To actually send out this information we need to create a list of TranscodingUser and set up each of the users layouts accordingly. Once they are in the list we create a LiveTranscoding object with the list, and tell the RTCEngine that this is what we want it to look like.

List<TranscodingUser> transcodingUsers = [];
if (state.activeUsers.isEmpty) {
} else if (state.activeUsers.length == 1) {
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(0).uid, 0, 0, width: 1920, height: 1080, zOrder: 1, alpha: 1));
} else if (state.activeUsers.length == 2) {
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(0).uid, 0, 0, width: 960, height: 1080));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(1).uid, 960, 0, width: 960, height: 1080));
} else if (state.activeUsers.length == 3) {
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(0).uid, 0, 0, width: 640, height: 1080));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(1).uid, 640, 0, width: 640, height: 1080));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(2).uid, 1280, 0, width: 640, height: 1080));
} else if (state.activeUsers.length == 4) {
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(0).uid, 0, 0, width: 960, height: 540));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(1).uid, 960, 0, width: 960, height: 540));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(2).uid, 0, 540, width: 960, height: 540));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(3).uid, 960, 540, width: 960, height: 540));
} else if (state.activeUsers.length == 5) {
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(0).uid, 0, 0, width: 640, height: 540));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(1).uid, 640, 0, width: 640, height: 540));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(2).uid, 1280, 0, width: 640, height: 540));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(3).uid, 0, 540, width: 960, height: 540));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(4).uid, 960, 540, width: 960, height: 540));
} else if (state.activeUsers.length == 6) {
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(0).uid, 0, 0, width: 640, height: 540));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(1).uid, 640, 0, width: 640, height: 540));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(2).uid, 1280, 0, width: 640, height: 540));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(3).uid, 0, 540, width: 640, height: 540));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(4).uid, 640, 540, width: 640, height: 540));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(5).uid, 1280, 540, width: 640, height: 540));
} else if (state.activeUsers.length == 7) {
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(0).uid, 0, 0, width: 480, height: 540));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(1).uid, 480, 0, width: 480, height: 540));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(2).uid, 960, 0, width: 480, height: 540));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(3).uid, 1440, 0, width: 480, height: 540));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(4).uid, 0, 540, width: 640, height: 540));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(5).uid, 640, 540, width: 640, height: 540));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(6).uid, 1280, 540, width: 640, height: 540));
} else if (state.activeUsers.length == 8) {
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(0).uid, 0, 0, width: 480, height: 540));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(1).uid, 480, 0, width: 480, height: 540));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(2).uid, 960, 0, width: 480, height: 540));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(3).uid, 1440, 0, width: 480, height: 540));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(4).uid, 0, 540, width: 480, height: 540));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(5).uid, 480, 540, width: 480, height: 540));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(6).uid, 960, 540, width: 480, height: 540));
  transcodingUsers.add(TranscodingUser(state.activeUsers.elementAt(7).uid, 1440, 540, width: 480, height: 540));
} else {
  throw ("too many members");
}

LiveTranscoding transcoding = LiveTranscoding(
  transcodingUsers,
  width: 1920,
  height: 1080,
);
state.engine!.setLiveTranscoding(transcoding);

Now we have the layout for our stream configured, we need to actually send it out. With this app we have the capabilities to send it out to multiple locations. For this you will need a URL where your stream should be pushed out to. For YouTube it is pretty straight forward. You will need the Stream Url + a backslash ("/") + the Stream Key which are all give in your livestreaming dashboard. For Twitch it is a similar concept, and you can read about it here: https://help.twitch.tv/s/article/guide-to-broadcast-health-and-using-twitch-inspector?language=en_US

Now that you have all your links, you can loop through all of them and call the addPublishUrl() on the RTCEngine with the transcodingEnabled parameter set to true. And it's done! Your stream should have appeared on the platforms.

Lastly, you will want to update the transcoding when someone is added or removed from the main stage, and end the stream. To update, you need to update the transcoding layout accordingly, and then setLiveTranscoding() again. And to remove a stream call the removePublishUrl().

Conclusion

If this app seems a bit complex, that's because it is. But there are full-blown companies that take months to build an MVP (Minimum Viable Product) for something like this. And even if they can build it, they don't have anywhere close to the infrastructure and reliability that the SD-RTN brings. This is a very complex application, but with Agora it becomes achievable.

You can find the code for this app here

Other Resources

To learn more about the Agora Flutter SDK and other use cases, see the developer guide here.

You can also have a look at the complete documentation for the functions discussed above and many more here.

And I invite you to join the Agora.io Developer Slack Community.

How to Grow Your Blog

Tadas Petra — Wed, 05 May 2021 13:16:32 +0000

Growing a blog in this day and age is no easy task. There is so much content online that getting noticed seems like an insurmountable task. But here are just a few approaches that will increase your chances.

Grow Social Presence

Much easier said than done. But with a big social presence you will have built a community of people that already enjoy the content you create. This means you already have a community that will enjoy your blog, and will be more likely to share it with others.

Now you see the value in social presence, but how do you build this. I'll be honest, this isn't going to be the article that is going to teach you. There is so much involved in this, and so many different ways to do it, but I hope to at least point you in the right direction.

For me there are 2 key points I focus on, and I believe are the core concepts behind my "success"

Consistently putting out content
Getting 1% better every time

Creating content is at the core of most social media growth. If you create content that people enjoy, they will follow along to see more of that content. But to achieve real growth you have to be consistent. Prove to your audience that if they follow you, they WILL see more of that content. Then every time you put out some content, it's like a lottery ticket with the algorithms and get a lot of views. Then if you put out content consistently it's like another ticket to the algorithm lottery.

You can also increase your odds with the lottery ticket. The better the content is, the higher your chances of winning the prize. It's difficult to go from poor quality to great quality instantaneously, but if you try to improve one aspect on every iteration, and you stay consistent, you will see huge improvements over time.

Write Great Blogs

We mentioned "creating content" to grow your social presence in the last section, and I purposely made that vague. Blogs definitely fall into that section. If you want to have a successful blog, growing your social presence through blogging content is probably the best approach.

Same rules apply as I mentioned above. Consistency and consistent improvement will bring you results. Here are just some of the aspects of your blog that you can/should improve as you write more.

SEO
Clickable titles
Great supporting images
Article structure
Story-telling

There is a lot more to blogging than just these, but the deeper you go into the topic, the more you will discover, and the more you will learn about what you can improve. Just make sure to spend time learning about how to improve, and practicing that.

Cross-posting

This is the easiest step that you can take. Each platform has it's own algorithms, and will spread your content differently. By sharing it to all the platforms, you will increase the odds of your article to gain traction. It's like getting extra lottery tickets, for free. (not completely free as it takes some work, but a lot less work than writing a whole blog)

But there is one important thing to remember when doing this. It can destroy your SEO if you don't add a canonical URL to the blog. If google see's the same exact article posted in multiple places, it will rank it a lot lower in their search algorithm. There is a really easy fix for this, and that is adding a canonical URL to the articles. This URL will point to the "main" article. So choose your platform of choice and add the link to that article on all the cross-posted articles.

This can be a bit annoying and tedious to do for every article, but there is a handy tool at krossa.io that not only makes cross-posting easy, but has a beautiful UI for writing your blogs. On top of that each platform is slightly different, but using krossa you can be confident that it will look the same across all platforms.

Conclusion

There are obviously a lot more than just these 3 tips to grow your blog, but these are the ones that have had the biggest returns for me. I recommend you give them a shot and let me know how it goes for you and what your biggest struggles are on Twitter @tadaspetra

How to Learn Flutter in 2021

Tadas Petra — Mon, 01 Feb 2021 14:12:18 +0000

Flutter is about to have a really big year this year! With the event on March 3rd, 2021 coming up, as well as the community growing bigger and bigger, the upside of Flutter is looking enormous.

But this means that there will be a lot of new people starting out with Flutter as well. And starting out something new is tough no matter what it is. Hopefully this is a one stop shop for you on how you should learn, along with some resources that worked for me.

By the way if you would rather watch the video version of this article, here it is.
If you prefer reading, keep going 😊

(Video for this)[https://www.youtube.com/watch?v=CKY-Nh6YZeY&feature=emb_title]

Fundamentals

In my opinion, the biggest problem with flutter is how easy it is to create apps. It's so easy that people can create a working application without knowing much about what they are doing.
Before you start diving into Flutter I would really recommend you have at least a bit of Object Oriented Programming knowledge. And the more you have the better. There are a lot of resources to learn and understand these topics with Dart. But if you are coming from another language like C++ or JavaScript, Dart will be very easy to pick up. I think I spent only a couple days getting used to the syntax and was able to dive right into Flutter framework.

Learning Resources

Flutter Documentation

The documentation is always my first step to learning anything involving flutter. Flutter team has a clear focus on providing high quality documentation, and it is the first step I take whenever I run into issues.
Flutter Docs

Codelabs

The very initial stages of learning Flutter I followed the google codelabs. You know you can trust these because these are curated by the flutter team, so they are definitely high quality.
Codelabs

YouTube

Youtube is of course my favorite resource. This is where I do most of my learning. It has helped so much that I decided to do my part and help contribute, but here are just some channels that I use!
My Channel
Robert Brunhage
Fun With Flutter
Resocoder
MTechViral
Fireship
FilledStacks
FlutterExplained
Official Flutter Channel

freeCodeCamp

Free code camp is one of the biggest resources for learning coding online. I am sure they will have more and more coding content. There are a couple video courses for Flutter, including mine :)

freeCodeCamp Course

Bootcamps

One of the top bootcamps for starting flutter is by Angela Yu. I haven't personally taken it, but I have heard amazing things about it! It is also 4.7 stars with 90,000 students so I am sure it is amazing. It also covers lots of OOP topics like Encapsulation, Inheritance, and Polymorphism.

Angela Yu's Course

Awesome Flutter

This is an amazing GitHub repository that leads you to an enormous amount of resources for learning Flutter.

Awesome Flutter

Get involved in the Community

This is an indirect way of learning Flutter, but I think being part of the community helps you grow as a developer as well, as helps you make friends who might potentially help you when you run into problems. The developer community is pretty big on Twitter. Here I created a list of some of my favorite Flutter developers on Twitter.
https://twitter.com/i/lists/1273736213665636359

Also feel free to join me and other flutter developers on discord

Learn by Building

Now for the key point, these are all just resources for learning. In my opinion the best way to learn is by actually building software. Once you have fundamentals down, just go ahead and build apps, and when you run into issues take a look or go through these resources and see if you can figure them out. You can learn a lot more by doing than just by watching or reading.

Some apps that you can practice learning are

Todo App
Chat App
E-Commerce App
Social Network App

If you are able to build these apps and have them function well, you are going to be well on your way to becoming a quality developer. Then focus on making your code more efficient, and improving in different aspects, and you will be a pro in no time.
Happy Coding Everybody! Let's make 2021 an amazing year for Flutter
If you want more content from me you can find me @tadaspetra on all platforms, but mainly on Youtube 😊
Tadas Petra

How to Start a Youtube Channel with 0 Online Presence

Tadas Petra — Mon, 07 Dec 2020 14:04:57 +0000

January 15th, 2020 was the day I decided to put my cringey first video out in public. A day later I checked back and it got 4 views. Now almost 11 months later the channel has amassed almost 10,000 subscribers and over 40,000 monthly views. Here's how I did it, and how I believe others can do it too.

Before we start, I know "almost 10,000 subscribers" is a bit of a stretch. As I'm typing it I am at 8,725 subscribers, but the 10,000 makes a much catchier introduction. Either way at this rate, I should be able to get to 10,000 before my 1-year mark.

Also I know there are a lot of other YouTubers that have gotten a lot more then 10,000 subscribers in their first year, but I believe my story might still help those people, since it didn't include any "viral" videos. This whole article will basically come down to hard work, and consistency.

Creating Your Channel

There are a lot of people that stress over the details at the beginning. I am going to tell you right now, your channel name, and banner are not very important if you are just starting out. There is a lot of learning to do, and a lot of figuring out what your channel is going to be and what route you are going to take before worrying about those details.

My advice, just start with your name if you are serious about doing this longterm. If you don't want people finding it at first, pick a different name, but do NOT spend days thinking about it. After you start the channel, create a banner, fill in the bio and all the information youtube asks you to fill out, and move on.

This should not take more then a couple hours or a day. I promise you it will not be very important at the beginning. I have changed my youtube name 3 times. I am currently on my 4th channel name, and I changed that when I was at 8,000 subscribers. (I think this is the last time I will change it. It is just my name now).

The Biggest Obstacle

The biggest obstacle for anybody starting out, that hasn't done this before, is releasing that first video. The first video will be the hardest video you will ever make. Not only are there so many things to learn, like recording software, camera, editing software, uploading to youtube, thumbnail, etc, but unless you have done film before, it will be cringey. BUT THAT'S OKAY

Go to any of the top YouTube channels and go to their first video. Some of them might have deleted it, but those that haven't, you will see that their first video is just as cringey as the one you made. Knowing your first video will not be your best video should not stop you at all. Think about any skill you have learned. The first code you wrote was probably embarrassing, the first time you rode a bike you probably looked like a drunk person trying to get home after a night out. Nobody masters a skill on the first try, but know you will get better. And if you really don't like it after you have put out a lot more videos you can delete it (but don't do this until after you are monetized, because the watch hours on that video won't count towards your monetization requirements).

The Second Biggest Obstacle

If you have gotten over the first obstacle, you are ready for the second one. If you can get over this second one, you WILL be successful. The second obstacle is consistency. I would recommend anybody first starting, out to pick a release schedule that you are going to stick to. If you have a full time job, I think once a week or once every two weeks depending how detailed your videos are is a good schedule. When I started I did 2x a week with a full time job. After 6 months or so, I had to step down to 1 a week.

But the obstacle of consistency is not just with the amount of videos you release. It is consistently getting better every video. There are so many aspects of video that can get better, just try your best to improve one thing for every video. You can improve things like thumbnail design, title, description, lighting, your cuts, introduction, microphone, camera, etc.

As long as you are consistently improving and releasing videos you will see the quality of your work getting better and better, and as the quality gets better, the more people will want to watch, and thus your channel will grow.

Marketing

Now if you are releasing consistent videos that are getting better and better, that should be enough in the long run. But getting those first initial viewers that get the ball rolling for your channel is a bit hard to get. They can come naturally but marketing and promoting your channel will definitely help you get there faster.

The best marketing in my opinion is social media marketing. This is a free but difficult one to do. The title of the article says starting with 0 online presence, but that's not how you should continue once you start. On YouTube it is harder to interact with people in you niche, other then comments. Growing an audience on other platforms like Twitter or Instagram will definitely help your YouTube channel as well. On those mediums you can actually interact with your followers and get to meet some other great people. And once your audience is growing on there you can share your videos too!

But since we don't have an online presence at the start, we need to look for other options. My two favorite is Reddit and Facebook groups. The key here is to find subreddits and groups that match your content. For example, most of my videos are about Flutter framework. On reddit there is r/FlutterDev and Facebook has groups like "Let's Flutter with Dart". There is also other options like the Flutter Discord server and many more. Main thing to keep in mind is to not spam your video everywhere. Don't be annoying. Only post it in places where people might actually find it interesting and useful.

Put it all together

Those three overgeneralized tips are pretty much all you need.

Get Started
Stay Consistent
Market Yourself

There are a lot of different niches, and lots of different types of videos. Try to be unique and offer something to your viewers. Then follow these 3 and I am sure you can replicate what I have done as well.

I will be writing more articles that have more details about growing a YouTube channel. Follow me on Twitter so you don't miss those: https://twitter.com/tadaspetra

And also if you are curious about my channel here it is: https://www.youtube.com/tadaspetra

Thank you for your time and have a wonderful day!

Coding Fundamentals Are Underrated

Tadas Petra — Tue, 01 Dec 2020 14:57:31 +0000

With all the new technologies and frameworks, it is becoming easier and easier to create apps that "work". I put the work in quotes, because even though the app might function, it will most likely not scale and will probably have some big bugs as well. Without good coding fundamentals, you will almost certainly have a tough time building maintainable and scalable code.

What is a Coding Fundamental?

A fundamental is an adjective that describes forming a necessary base or core. By this it means to have a good understanding of the core of what coding is. Frameworks like React and Flutter are just complex combinations of the fundamental underlying code. But even though a lot of the underlying code is abstracted, understanding what is actually going on will still help you tons.

How To Learn?

Coding Fundamentals can range from anything like naming variables to software architecture and everything in between. You can learn these fundamentals in any language, and they will translate to any other language. My two favorite languages to learn these are C and C++. With C you will really get to understand what exactly is happening in your code. It is a low level language so you have to be more direct about how you access memory, inputs, and many other things. Then it is definitely important to move on to some Object Oriented Programming, since this is what most higher level languages follow. If you start with C it will be a bit easier to transition to C++. BUT these are just my favorites, you can learn fundamentals using any language.

How Fundamentals will Help?

Like I said at the beginning, having good code fundamentals will help you make your code scalable and maintainable. Let me demonstrate that to you using the two previous examples: naming variables and architecture.

Naming variables might sound like trivial task. But if you have worked on any big project you definitely know how important they are. With a small app you don't need to overthink this, and it is okay to have "x" or "y" as a variable name. But when your software has 100s or 1000s of variables and multiple people working on the same software they become super important. At that point it becomes critical for your code to be readable. There is a reason why google has a whole website dedicated to coding conventions and a big section is naming.

Google C++ Naming Conventions

Software Architecture is one of the most important coding fundamentals, if not THE most important. Software Architecture is the layout of you code, and how it is separate into different Objects, Files, Functions, etc. This is such an important topic that most bigger teams have people dedicated only to that topic! With good software architecture, a team can work on separate parts of the code simultaneously and not impede on anybody else. It will also keep things organized and the developers will still be able to understand what is going on no matter how big the codebase gets.

Personal Experience

I have been uploading videos to YouTube for 10 months now with a strong concentration on Flutter. Although I love the Flutter framework and I think it will keep growing over the years, I believe it has made the barrier to programming a lot smaller as well. This is great for experienced people, because now they can build apps quicker and easier. But there are a lot of people that are just starting programming, and they might be starting with Flutter. All that is fine, but I can definitely see people lacking their coding fundamentals. The most common questions I get are not necessarily questions about Flutter. They are questions that would be covered by knowing the fundamentals.

Because of this, I have decided to start another series on my channel covering the code fundamentals, where I will start from the very basics of programming and move my way into more difficult topics. My goal is to hopefully have a complete reference of everything related to code, and can guide people to the specific videos if they are missing the fundamentals.

If you want to follow along, this playlist will be featured at the top of my channel, and will be updated weekly!

What is Programming?

Thank you for your time! If you have any feedback or want to connect with me:
Youtube

Twitter

Twitch

Insta

My Website (work in progress): tadaspetra.com

And if you enjoy my work and would like to support me:
Patreon

Quitting My Job With Only $150 Monthly Side Income

Tadas Petra — Fri, 20 Nov 2020 01:26:30 +0000

Why I left

Since I was in highschool, I never wanted to work a 9-5 job. I have been the person that likes to have control of what I am doing, and with the things that I build.

What I don't like about 9-5

A 9-5 forces you to stay there even when you have finished your work.
You rely on your boss and people above you to make you be successful.
The amount of work you put in doesn't directly correlate with what you get.
You don't have control of the companies future
There are a lot of corporate politics that you have to maneuver
You are not allowed to speak your mind freely, and really voice your opinions

Those are just some of the reasons, but there are a lot more. That is why I have always wanted to figure out a way to make money without working a 9-5. However then came university and internships, and one thing led to another, and I found myself at my last semester of university. During that last semester I started taking things a lot more seriously. I would wake up at 3am before going to class to learn web development, but nothing worked out so I ended up taking a job.

Now as far as a 9-5 job went, the job I had was as good as it gets. My boss was the best boss I could have ever asked for. He taught me more then I could ever image. He helped me quickly grow into a leader, but the passion to create something of my own and work on my own terms never disappeared.

How I left

Like I said, I have been trying to find a way to make money since the last semester of university. I have tried to create multiple startups which included trying to build a social networks site, then an app, then various other apps. But none of them had much success. Then at the beginning of 2020 I had realized while learning all these technologies I had learned a lot through all the failures and struggles. I decided it would be a good idea to put all this knowledge online.

Starting a youtube channel was always something I wanted to do. I actually started multiple channels when I was a kid, playing minecraft or some other games. But I never kept up and just deleted them after some time. This time I started one with a purpose. At first I didn't tell anybody that I started it, not even my girlfriend. But then I got my first 50 subscribers and I let her know, then it kept growing and growing. And now at over 7,500 subscribers it has grown bigger than I have ever imagined.

Now I know what you're thinking 7,500 subscribers is not nearly enough to be making adequate money and thus quitting your job. I fully agree with you. But like I said, this has been something I have wanted to do since highschool. So I have been saving up money this whole time I have been working, and just waiting for an opportunity to give it my all. There is a little of bit of promise I believe, and with my savings I have given myself a year of hardwork to make this promise a reality.

I have also been saving all my vacation days for this year, for a long trip. Instead I will now use this vacation for the month of December as a grace period to give it my all. And then my last official day of work will be January 15th, which will mark exactly 1 year since I uploaded my first video.

Whats the plan

As the title says I have a cashflow of around $150 a month. Obviously this is not even close to enough to cover rent for me. Like I said I have about a year of savings to give myself a real shot at increasing that number. Here are the following things I will be trying to do to get to that:

Keep growing my youtube channel - I have a lot of ideas that I think will not only help the channel grow, but help a lot of people learn a lot about programming.
Other ways to monetize related to YouTube - there are a lot of ways to monetize a channel other then youtube ads. For example sponsored videos, creating articles for the videos, affiliate links, patreon, etc.
Creating a Start Up - There is an app I have been working on for quite some time now. The goal is to finish it up early 2021 and release it. I am working on with one other person and the feedback we have gotten is very positive thus far.

There are a couple other methods I have been thinking about, but those are the main 3 that I believe have the most potential.

Conclusion

I know this is a big risk, but it is also the most excited I have been in my life. By the end of 2021 we will all know whether I have made the best decision of my life, or the biggest mistake of my life. Stay tuned for more on this journey by following along:

Youtube: https://www.youtube.com/tadaspetra

Twitter: https://twitter.com/tadaspetra

Twitch: https://www.twitch.tv/tadaspetra

Insta: https://www.instagram.com/tadaspetra/

My Website (work in progress): https://tadaspetra.com

And if you enjoy my work and would like to support me:

Patreon: https://www.patreon.com/tadaspetra

Flutter Basics | Layouts

Tadas Petra — Sun, 26 Jul 2020 21:37:08 +0000

One of the reasons flutter is growing so much and becoming one of the biggest development frameworks out there is because of how easy it is to generate beautiful looking layouts. With only a handful of widgets, you can create complete and functional UI for your app.

Video Layout Tutorial

Scaffold & AppBar

The scaffold is the very base widget of every screen that you will have on your app. You can think of it as the base building block of your screen. In order to put widgets on the screen there has to be something to put it on. Think of it like a bulletin board. In order to stick things onto it, you need the actual board. That's the Scaffold widgets role. The AppBar is just as it sounds. It is a bar that is at the top of the page usually containing a heading for the page that you are on.

Container

Containers are the most basic of building blocks that flutter has to offer. If you put a Container around any widget, it will not change how that widget looks at all. However, if you add in some properties that the Container provides, you can change the look of the widget completely. With Containers, you can change padding, add color, add borders, etc…
Center
Center widgets are a bit boring. It is very similar to a container, except with a lot less properties. Its' main function is just to center the content.

Row & Column

The Row and Column widgets are what you will most likely use for the core layout of most apps. Most app development frameworks and even any frameworks that work with a UI utilize rows and columns for their layouts in some way. Just like on a graph paper or excel, you can place your widgets in the correct row and column to achieve the look that you want to get. With flutter you are able to nest the rows and columns to have more and more accuracy and control of your layout.

ListView

ListView is pretty much a list of Row widgets stacked on top of each other. Except it has two main function that make it insanely useful:
It has scrolling enabled, so you can add as many items to that list and they will just scroll down on your screen. (It also adds padding at the edges of the ListView so it always looks nice)
It only loads the state and all the widgets elements as they become visible while you're scrolling. If you have a ListView of 1,000,000 widgets your app will behave without a single hiccup. It also destroys the states and widget elements as they go out of the view so you can scroll down to the millionth widget without any performance issues.

Stack

Stack widget is just as it sounds. You can stack things on top of one another. Whether it's some text over an image or how instagram creates a little heart over the picture when you like it.

Those are all the basic and very powerful widgets that flutter provides for us. Make sure to look at all the properties when using them, because there is a lot more things they can do that I haven't covered.

Thanks for Reading and Stay Creative!

Follow me on Twitter: @tadaspetra

DEV Community: Tadas Petra

Build a Video Call App with Gemini AI Summarization

Prerequisites

Project Setup

Speech to Text

Backend

Start Real Time Transcription

Stop Real Time Transcription

Start Transcription within the Call

End Transcription

Retrieve the Transcription

Decode the Transcription

Save the Transcription

Get Summary

Done

Build a NextJS Video Call App

What We Will Use

Create an Agora Account

Initialize the NextJS Project

Structure of the Project

Building a Form with NextJS

'use client'

Form UI

Call Page

Add the Call Component

Videos

Summary

Complete Guide to Flutter State Management

What is State?

What is Management?

Why?

Set State

State Management using Flutter only

Warning!

Centralizing the Data

Note

Providing the Data with an InheritedWidget

Updating the State

Using the State within your App

Example Code

Why use a package?

Options

Riverpod

Bloc

Others

Build a Video Call App with Astro and ReactJS

What We Will Use

Create an Agora Account

Initialize the Astro Project

Structure of the Project

Building a Form with Astro

Astro SSG vs SSR

Form UI

Retrieve Form Data and Redirect to the Call Page

Call Page

client:only directive

Add the Call Component

Videos

Summary

Build a Video Call App with Astro

What We Will Use

Create an Agora Account

Initialize the Astro Project

Structure of the Project

Building a Form with Astro

Astro SSG vs SSR

Form UI

Retrieve Form Data and Redirect to Call Page

Call Page

client:only directive

Add Call Component

Summary

Live Streaming to Multiple Platforms with Multiple Users

Prerequisites

App Overview

Participant View

RTM Messaging

Director Controller

Muting and Disabling Video

Director App

`client:only` directive

`client:only` directive