Since its much-awaited launch, Flutter has caught a lot of attention, and we're excited about it too! It has been growing in popularity over the past few years because of the ease of use and the ability to develop for multiple platforms with a single code base.
In this article, we will show you how to create your own Flutter Mobile Messaging Application in combination with Firebase and Agora.io .

What we’re about to do and Why we’re doing it

Due to the recent scandal(s) of Meta - WhatsApp, my team and I have chosen to take the Signal route and build our own Mobile Chat Application. By doing so, we show that System and Network Engineers are certainly versatile, full-fledged Computer Scientists. For this project, our main focus shifted mostly towards UI and UX. The technologies we dove into are Figma, Flutter, Firebase and Agora.io .

To bring these together, a Mobile Messaging Application was developed to allow people to securely connect with each other . This was completely written using Flutter, a UI framework by Google. It enables us to develop an application with only one code base that can run on Android, IOS and Web. Desktop was recently added too. On top of that, the project was built on top of Firebase, a Backend as a Service (BaaS) by Google. In addition, Agora.io is used to make video/voice calls possible.

Flutter: What, How, … ?

What is Flutter, and how is it different? Flutter is designed to run on every device, so it works with:

• iOS and Android

• Web and Desktop (Mac, Windows, and Ubuntu) - Even support PWA

• Auto

• Raspberry Pi (POC stage)

Check out this video from Google, they give a great comparison between Native Development, Hybrid App Development, React Native Development, and Flutter App Development.

Let’s get started!

First of all we will start with setting up flutter, it is relatively straightforward to set up. Just follow the steps in the link below.

https://flutter.dev/docs/get-started/install

The flutter package also comes with Dart preinstalled which is the language used to build apps. Dart is an object-oriented, class-based, garbage-collected language with C-style syntax.

If you would like to develop apps for mobile as well you should definitely follow the steps to install Android Studio and configure it. After the installation, you will have to create an Android Emulator. The following link may help:

https://developer.android.com/studio/run/managing-avds

Once you are done with following the instructions on the website of flutter we can continue with creating a first project!

$ flutter create new_project

This command will create the basics of a new flutter project and a demo app with simple functionality in a folder named new_project. Open this folder in Android Studio or Visual Studio Code to start your journey.

If you are using Visual Studio Code, you will need to install some additional extensions.

Visual Studio Code will most likely notify you automatically that the Flutter and Dart extensions are required (Because who would want to program without some form of IntelliSense or debugging info).

We can now run our app for the first time.

Congratulations, you have your first app! When you press the button, the counter goes up… That’s it! Kind of disappointing, is it not? Time to change that, but first…

“How does this all work? What are all these files? I’m confused!”
No worries, we got you!

The most important file is in the lib folder, the main.dart file. This file is the start of everything and where you will expand upon.

Flutter uses widgets. To fully understand what they are and how to use them, following link may be of use:

https://docs.flutter.dev/resources/architectural-overview

In short, widgets are the building blocks of Flutter, almost everything is a widget. They are mainly divided into two types, namely stateless and stateful widgets.
Stateless Widgets are widgets whose state doesn't change, like a button or an image. This means that it doesn't change its state when an action is performed. And you guessed it, stateful widgets can keep a state, for example the currently selected tab of your navigation.

We can change this state by calling a function setState(), this function is also present in the Flutter demo project with some default explanation. You can find it in the main.dart file on line 54.

setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });

(P.S.: While you are there, it might be useful to read all the comments, it will help you greatly.)

Now we can divide the widgets again into visible and invisible widgets. The invisible widgets are used for layout, like a column and a row, a grid layout… and many more. These widgets define the location of the visible widgets like an image, text, buttons…

Following example will illustrate this further.
For example, we want to make a bar with a total of 3 icons and text underneath them to make it clear what they all are. Something like this

How do we go about this… To make it easier to explain we will start with a diagram visualization of the concept.

We will start with a container (an invisible widget to define layout) and place a row in it. In this row we will create a total of 3 columns, a widget in a widget is defined as a child. If the widget supports more than 1 it will be a list of children. The list of children will be rendered following the order you put them in. So in our example we have to put the icon and then the text because we want the text to be underneath the icon.

Container(
        child: Row(
          children: [
            Column(
              children: [
                Icon(Icons.call),
                Container(
                  child: Text('CALL'),
                )
              ],
            ),
            Column(
              children: [
                Icon(Icons.near_me),
                Container(
                  child: Text('ROUTE'),
                )
              ],
            ),
            Column(
              children: [
                Icon(Icons.share),
                Container(
                  child: Text('SHARE'),
                )
              ],
            )
          ],
        ),
      )

If you want to dive deeper into this you can follow this basic tutorial https://docs.flutter.dev/development/ui/layout .

And voilà, you have made your own bar with 3 icons. We can expand on this by for example changing the Icon widgets to IconButton widgets to add functionality to them when pressed. Every widget is self-explanatory and well documented, you just have to find the right combinations to make your own app.

What’s next?

We’re not quite finished. There are two important things on our TODO list:
Integrate Firebase for user authentication and database storage.
Integrate Agora.io for our Real-Time Communication Needs.

In part 2 we’ll be integrating Firebase for the Backend of the application.