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 a 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:/usr/src/code/appwrite:rw \
    --entrypoint="install" \
    appwrite/appwrite:1.1.1

Windows

CMD

docker run -it --rm ^
    --volume //var/run/docker.sock:/var/run/docker.sock ^
    --volume "%cd%"/appwrite:/usr/src/code/appwrite:rw ^
    --entrypoint="install" ^
    appwrite/appwrite:1.1.1

PowerShell

docker run -it --rm ,
    --volume /var/run/docker.sock:/var/run/docker.sock ,
    --volume ${pwd}/appwrite:/usr/src/code/appwrite:rw ,
    --entrypoint="install" ,
    appwrite/appwrite:1.1.1

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

When the Installation is completed, run up your 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 log in

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 a new Project 🚀

Click on Create Project. It’s your wish to generate the project ID or set a custom one. Just keep in mind to change it wherever necessary

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 it's 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: ^8.1.0
 flutter_riverpod: ^2.1.1

Don’t forget to flutter pub get 😉

To know more about Riverpod

flutter_riverpod | Flutter Package

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 check that out.

Getting back to our 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_2.CallbackActivity" >
      <intent-filter android:label="flutter_web_auth_2">
        <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 to 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 for each of the different platforms. Since I am going to make an app for android I will switch over to Android Tab. You are free to use any platform you want to develop. To check it out here’s the link

Register your Flutter App(Android)

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

Your App name can be the same as your project name or it can be different too. But your Package Name must be the same as 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

lottie | Flutter Package

introduction_screen | Flutter Package

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

Firebase Authentication using Flutter and Riverpod

I have explained a bit more about Riverpod here.

Moving On, there are lots of providers I have created that you do not know about it yet. Let’s Discuss it but before that let’s implement Authentication class 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 into appwrite docs Account section and you will find everything.

And That’s it we made Authentication Class, we made some beautiful UI’s. Now the only thing left is to 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 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 using Database API in the next part

Till Then Stay tuned 😉

EDIT 2:

• This blog is now in accordance with appwrite 1.0.0 +. Check out the changelogs here
• Bumped and updated all the dependencies

EDIT:

• This blog is now in accordance with appwrite 0.14.2 . To know what features have changed check here.
• Riverpod is now in the stable version. Migrated to a stable version and fixed all the breaking changes.

Read the Second Part Here