| id | title | description |
|---|---|---|
with-flutter |
Quickstart: Flutter |
Learn how to use Supabase in your Flutter App. |
import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem'
This example provides the steps to build a simple user management app (from scratch!) using Supabase and Flutter. It includes:
- Supabase Auth: users can sign in and sign up with email and password.
By the end of this guide you'll have an app which allows users to register and login with supabase:
Whenever you get stuck at any point, take a look at this repo.
Before we start building we're going to set up our Supabase account.
- Go to app.supabase.io.
- Click on "New Project".
- Enter your project details.
- Wait for the new database to launch.
To make the process easier, let's remove the email confirmation constraint on the supabase portal.
<Tabs defaultValue="UI" values={[ {label: 'UI', value: 'UI'}, ]}>
https://gist.github.com/48483dc580240ddebb06be9fad020f21
Now that you've setup your Supabase account, you are ready login and register your users.
We just need to get the URL and anon key from the API settings.
<Tabs defaultValue="UI" values={[ {label: 'UI', value: 'UI'} ]}>
https://gist.github.com/11cdb68378fb3d12315ef10ae9a7897e
Let's start building the Flutter app from scratch.
https://gist.github.com/a6b932e3d3092da6257af9831fe0de3b
Then open the supabase_flutter folder on your favorite editor.
Let's install some dependencies to help us:
- Supabase - Supabase client for Flutter
- get_it - Service locator to help us inject Supabase Client on our pages
- shared_preferences - To persist the user session on our app
https://gist.github.com/d354d65b6414a3ebf0d9562867458651
And check the pubspec.yaml file:
Let's open the main.dart file to setup the Supabase client as Singleton instance and configure the app routes:
https://gist.github.com/499ec293022264d58b5c1f2d0f8bd6c5
On the main() method we are creating a singleton instance of SupabaseClient, using the supabase_url and supabase_anon_key to link this project with our Supabase account. and in the MyApp method we are defining the routes off our app.
Open the register_view.dart file and place the following code:
https://gist.github.com/5c7fa28eeb3d2d21de3e64f491d2a5fe
In this code, we are defining tree TextFormField(), email, password and password confirm and a _register() method wich will be called on press of the Register button.
When the _register() method is called, an instance of SupabaseClient is called and the method .auth.signup is invoked with the e-mail and password fields provided.
If the result.data is different than null, we are redirected to the Login view and a Dialog is shown. If we have some problem on registration, like duplicated e-mail field, an error dialog is shown, with the register error message.
Open the login_view.dart file and place the following code:
https://gist.github.com/2e4ab8bfbcd6ee69da3a6aa8e4014914
In this code, we are defining two TextFormField(), email and password and a _login() method wich will be called on press of the Login button.
When the _login() method is called, an instance of SupabaseClient is called and the method .auth.signin is invoked with the e-mail and password fields provided.
If the result.data is different than null, we are using shared_preferences to set an String 'user' key with the value of the persistSessionString returned from the signin method. This key will be used on the SplashView (we will create this on the next steps) to check if the user is already logged in on the application and redirects user to the HomeView and renew the Supabase credentials (token) without need to login again.
This view is quite straightforward. There's only a Text() widget which shows the Logged User's Email and a Logout button.
https://gist.github.com/7f6afe40e12de468f07cac5828069f0a
On the build() method we are getting the current logged in user with final currentUser = GetIt.instance<SupabaseClient>().auth.user(); and using
the currentUser.email property to show the User e-mail on the screen.
The _logout() method is responsible to signOut the user from the Supabase server and clean the shared_preferences so the user will need to login again.
As i mentioned before, the Splash View will be the entrypoint route ('/') of our app. It will check if the user already has a session on the app. If there's a session, the user will be redirected to the Home View and their credentials will be renewed. If the session is not present, the user will be redirected to the Login View.
https://gist.github.com/4bfdb89a6093437ad225679963ef94ef
At this stage you have a fully functional application!
**Some design patterns could have been used to make the code better, but they would increase the difficulty level of this getting started .
- Got a question? Ask here.
- Sign in: app.supabase.io