Building No Signal App using Flutter and Appwrite

Let’s do Something creative and make a next level Flutter App. We are going to make No Signal — A chatting app inspired by Signal. We are going to use Appwrite as backend, Riverpod as State management solution and of course Flutter for creating beautiful apps.

Before Starting,

Appwrite ! What is Appwrite?

Features of Appwrite(Screenshot taken from appwrite.io)

Appwrite is a self-hosted solution that provides developers with a set of easy-to-use and integrate REST APIs to manage their core backend needs.

And the Best Part — It’s Open Source

So without a delay Let’s get Started

But Before that let’s set up Appwrite

The easiest way to start running your Appwrite server is by running our docker-compose file. Before running the installation command make sure you have Docker installed on your machine

UNIX

docker run -it --rm \
--volume /var/run/docker.sock:/var/run/docker.sock \
--volume "$(pwd)"/appwrite:/install/appwrite:rw \
-e version=0.6.2 \
appwrite/install

Windows

CMD

docker run -it --rm ^
--volume //var/run/docker.sock:/var/run/docker.sock ^
--volume "%cd%"/appwrite:/install/appwrite:rw ^
-e version=0.6.2 ^
appwrite/install

PowerShell

docker run -it --rm ,
--volume /var/run/docker.sock:/var/run/docker.sock ,
--volume ${pwd}/appwrite:/install/appwrite:rw ,
-e version=0.6.2 ,
appwrite/install

NOTE: If you are using WSL, write the UNIX command in your wsl terminal

When the Installation is completed, run up you Local host. For me it’s http://localhost:5000 . You can set your own custom endpoint too, but that’s something for later to talk about.

Login Page Appwrite

If you see something like this , CONGO 🎉 , you have installed Appwrite on your local machine successfully.

Now go ahead and create an account now and Login

You will see something like this. Well not exactly like this — for starters you would have light mode, no projects and will prompt you to create one but the overall layout will be like this.

Let’s go Ahead and create new Project 🚀

Click on Create Project

Of course, you are free to choose your own project name. For memes I am creating No Signal.

After creating a new Project, this is how the dashboard will look like. Beautiful isn’t it 😉

Now just leave it here for a second and let’s create a new Flutter Project then we will come back here again

I have seen a lot of people creating a new flutter project using Terminal. Following the same tradition let’s make one

Shoot up the Terminal and run the following commands

flutter create no_signal
cd no_signal
code .

This will create a new Flutter project and will open your default Code Editor. In my case its VSCode✨.

Let’s do a few more things before moving to Appwrite Dashboard.

It’s time to add Dependencies. Go to your pubspec.yaml file and add the following dependencies.

dependencies:
appwrite: ^2.0.2
flutter_riverpod: ^0.14.0+3

Don’t forget to flutter pub get 😉

To know more about Riverpod

Fun Fact 🎈

Not only Flutter Appwrite SDK. In fact, all the appwrite SDK for different platforms are made using this SDK generator.

It’s Still in beta but so Powerful. Every time I see that repo, it makes me go wow.

I would recommend everyone to check that out.

.

.

.

.

.

Getting back to main Goal

There are some lines you need to add in your android/app/src/main/AndroidManifest.xml

<manifest ...>
...
<application ...>
...
<!-- Add this inside the `<application>` tag, along side the existing `<activity>` tags -->
<activity android:name="com.linusu.flutter_web_auth.CallbackActivity" >
<intent-filter android:label="flutter_web_auth">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="appwrite-callback-[PROJECT_ID]" />
</intent-filter>
</activity>
</application>
</manifest>

These must be added in order to capture the Appwrite OAuth callback URL.

Now Back to Appwrite Dashboard

We need to add a platform in our project. In this case it’s Flutter. So click on Add Platform. What you will see is this screen

Register your Flutter App(IOS)

Now we are given 5 choices each of different platform. Since I am going to make app for android I will switch over to Android Tab. You are free to use any platform you want to develop in. To check it out here’s the link

Register your Flutter App(Android)

It doesn’t expects much just two things. Your App name and Package Name. Package name can be found under android/app/build.gradle

Your App name can be same as your project name or it can be different too. But your Package Name must be same the applicationId given in your build.gradle file

Congratulations🎉. You have completed the first step of setting up Appwrite and integrating with Flutter

Let’s work on some UI now

I thought of giving a brief introduction about the app and so made these screens. Don’t worry these are super easy to make. Here I have used a package called Introduction Screen and Lottie for adding lottie assets

Just add the dependencies in your Pubspec.yaml as shown and run flutter pub get

Add them beneath the existing dependencies

dependencies:
appwrite: ^2.0.2 // don't add it again
flutter_riverpod: ^0.14.0+3 // same for here. only for demonstration purposes
introduction_screen: ^2.1.0
lottie: ^1.2.1

Let’s look at the Welcome Screen now

It was some pretty self explanatory stuffs but still tried to add some comments for better understanding.

Lemme show you my custom theme file

Now we have worked on Introduction Screen, how about Login UI now. We will be making something like this

In this upcoming gist I would be implementing Riverpod too. Follow the comments and I am sure you won’t get stuck.

It’s quite long but have patient and the most important thing, don’t get overwhelmed. Read it at your own pace and you will find it easy.

This completes the UI part. If you want a little more explanation about how Riverpod authentication work, read this article by me

I have explained a bit more about Riverpod here.

Moving On, there are lot’s of providers I have created which you do not know about it yet. Let’s Discuss about it but before that let’s implement Authentication model and communicate with appwrite

Just go through those comments and I am sure you would be able to understand all of it. If you want to know more about any methods, hop in to appwrite docs Account section and you will find everything.

And That’s it we made Authentication Model, we made some beautiful UI’s. Now only thing left is create Providers and connect everything.

Also Thanks for reading till here, I know this blog got a little bit long so I am gonna keep it till Authentication. In the next blog I would be implementing some more UI’s and Implementing the Chat Model

Let’s check out what does User Model actually is and what appwrite actually provides to us

User Model

Let’s Look at some Providers now

For simplicity I have created 2 files — Client Provider and Auth Provider so to keep things in a better place

Client Provider

Don’t worry it’s just a one liner code. My Comments just made this file look big😄

Auth Provider

Finally Let’s look at Main.dart file now

And That’s it We have finally implemented Authentication successfully in our App.

Let’s see how it works

Working App (Authentication)

And That’s it for now. Thanks for reading till the end. Hope you learned something unique. I will be implementing Chat Model in the next Blog.

Till Then Stay tuned 😉

There’s something magical about coding. Whatever I want, it just comes true