![]() ![]() We did implement registration, but that was only to distinguish different users. One thing that was missing from this chat application is authorization. We saw how easily it is to create a chat application when you combine amazing tools like Flutter and Supabase. You can install it on another device or simulator to chat with each other in real time. If you kept your flutter run running, you should now see a fully functional application on your device or simulator. With that, we are done creating our application. You can run the following SQL in your SQL editor of your Supabase dashboard. messages - contains the contents of each message along with who sent it.Įach message is associated with one profile to represent who posted the message.In order to create the chat app, we will create 2 tables. Once your project is ready, we can dive into setting up our project! Once your project is ready, we can dive into setting up our project! Setting up tables in Supabase Spinning up a brand new Supabase project could take a few minutes. Once you have entered everything, you can press the “Create new Project” button. ![]() You can leave the pricing plan for free as Supabase has a very generous free plan that will be way more than enough for our chat app. We won't use this password in this app, but if you ever need it, you can always override it later to whatever you want it to be. For the database password, go ahead and hit the “Generate a password” button to generate a random password. You will be entering a few things here like the name of the project. You can go ahead and create a new project by pressing the “New Project” button at the top. Proceed with the sign up process and once you are done, you will be taken to a list of projects. You will be prompted to sign in using your Github account with a big green button, so let's go ahead and press it. If you do not have a Supabase account yet, do not worry, you can get started for free. Note that you will have to terminate flutter run and re-run it again after this package installation. Run flutter pub get to install the packages. This will be used to display the timestamps of each chat bubble. timeago is a simple library that takes a DateTime and returns nice strings displaying how long ago the time was. Supabase_flutter will provide us easy access to our Postgres database hosted on Supabase. We will start out by creating an empty Flutter project. Setting up the scene Create a blank Flutter application We will access Supabase through the supabase_flutter package, which provides an intuitive way of reading and writing data to the database. ![]() We have Flutter on the frontend, Supabase on the backend and that is it! Since Supabase provides nice APIs to access the Postgres database, we don't need to create our own. Because we are using Flutter, the app can run on iOS, Android, or on the web. Once they are in, they can read and send messages to a shared room across all users of the application. Users can sign up/ sign in using email and password. The application we are creating today is a simple real time chat application. You can find the complete version of this app in this Github repository. If not, you can go to the official Flutter page to start the installation. This article also assumes that you have installed Flutter already on your machine. It is also perfect for chat apps like the one we are about to create, because we can subscribe to real time changes on the database. Supabase is a suitable backend for this app, because it provides a nice set of APIs on Postgres database that we can easily call by using the SDK. Supabase is a back end as a service that provides auth, database, storage and functions to easily create a scalable application. We will be using Supabase to store the chat information. In order to build this chat app, we will need a database to store all of the chat information. In the second part, I will show you how to implement Authentication and Authorization (with RLS) to the chat app. The exchange of messages will happen in real time, meaning that you do not have to refresh the page to load new messages. In the first part, I will show you how to build a chat application, where users can sign up and talk to other users in a single chat room. During the series, you will learn how to build cross-platform apps without worrying about the backend. This is the first of a series of Flutter Tutorials. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |