mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
Merge pull request #2801 from dshukertjr/chore/flutter-update
chore: Update to use the latest version of supabase_flutter
This commit is contained in:
1 file changed
+41
-40
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: with-flutter
|
||||
title: "Quickstart: Flutter"
|
||||
title: 'Quickstart: Flutter'
|
||||
description: Learn how to use Supabase in your Flutter App.
|
||||
---
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import Tabs from '@theme/Tabs'
|
||||
import TabItem from '@theme/TabItem'
|
||||
|
||||
## Intro
|
||||
## Intro
|
||||
|
||||
This example provides the steps to build a simple user management app (from scratch!) using Supabase and Flutter. It includes:
|
||||
|
||||
@@ -22,24 +22,24 @@ By the end of this guide you'll have an app which allows users to login and upda
|
||||
<img height="500px" src="/img/supabase-flutter-demo.png" alt="Supabase User Management example" />
|
||||
|
||||
### Github
|
||||
|
||||
Whenever you get stuck at any point, take a look at [this repo](https://github.com/supasquad/supabase-flutter-quickstart).
|
||||
|
||||
## Project set up
|
||||
|
||||
Before we start building we're going to set up our Database and API. This is as simple as starting a new Project in Supabase
|
||||
Before we start building we're going to set up our Database and API. This is as simple as starting a new Project in Supabase
|
||||
and then creating a "schema" inside the database.
|
||||
|
||||
### Create a project
|
||||
### Create a project
|
||||
|
||||
1. Go to [app.supabase.io](https://app.supabase.io).
|
||||
1. Click on "New Project".
|
||||
1. Enter your project details.
|
||||
1. Wait for the new database to launch.
|
||||
|
||||
|
||||
### Set up the database schema
|
||||
|
||||
Now we are going to set up the database schema. We can use the "User Management Starter" quickstart in the SQL Editor,
|
||||
Now we are going to set up the database schema. We can use the "User Management Starter" quickstart in the SQL Editor,
|
||||
or you can just copy/paste the SQL from below and run it yourself.
|
||||
|
||||
<Tabs
|
||||
@@ -57,7 +57,7 @@ values={[
|
||||
```
|
||||
|
||||
<video width="99%" muted playsInline controls="true">
|
||||
<source src="/videos/sql-user-management-starter.mp4" type="video/mp4" muted playsInline />
|
||||
<source src="/videos/sql-user-management-starter.mp4" type="video/mp4" muted playsInline />
|
||||
</video>
|
||||
|
||||
</TabItem>
|
||||
@@ -115,11 +115,9 @@ create policy "Anyone can upload an avatar."
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
### Get the API Keys
|
||||
|
||||
### Get the API Keys
|
||||
|
||||
|
||||
Now that you've created some database tables, you are ready to insert data using the auto-generated API.
|
||||
Now that you've created some database tables, you are ready to insert data using the auto-generated API.
|
||||
We just need to get the URL and `anon` key from the API settings.
|
||||
|
||||
<Tabs
|
||||
@@ -137,7 +135,7 @@ values={[
|
||||
```
|
||||
|
||||
<video width="99%" muted playsInline controls="true">
|
||||
<source src="/videos/api/api-url-and-key.mp4" type="video/mp4" muted playsInline />
|
||||
<source src="/videos/api/api-url-and-key.mp4" type="video/mp4" muted playsInline />
|
||||
</video>
|
||||
|
||||
</TabItem>
|
||||
@@ -149,7 +147,7 @@ Let's start building the Flutter app from scratch.
|
||||
|
||||
### Initialize a Flutter app
|
||||
|
||||
We can use [`flutter create`](https://flutter.dev/docs/get-started/test-drive) to initialize
|
||||
We can use [`flutter create`](https://flutter.dev/docs/get-started/test-drive) to initialize
|
||||
an app called `supabase_quickstart`:
|
||||
|
||||
```bash
|
||||
@@ -161,20 +159,20 @@ Then let's install the only additional dependency: [supabase-flutter](https://gi
|
||||
Open the app and copy and paste the following inside `pubspec.yaml` under `dependencies`.
|
||||
|
||||
```yaml
|
||||
supabase_flutter: ^0.0.6
|
||||
supabase_flutter: ^0.1.0
|
||||
```
|
||||
|
||||
Run `flutter pub get` to install the dependencies.
|
||||
Run `flutter pub get` to install the dependencies.
|
||||
|
||||
### Setup deep links
|
||||
|
||||
Now that we have the dependencies installed let's setup deep links so users who have logged in via magic link or OAuth can come back to the app.
|
||||
Now that we have the dependencies installed let's setup deep links so users who have logged in via magic link or OAuth can come back to the app.
|
||||
|
||||
```sh
|
||||
1. Go to the "Authentication" section.
|
||||
2. Click "Settings" in the sidebar.
|
||||
3. Type `io.supabase.flutterquickstart://login-callback/` in the Additional Redirect URLs input field.
|
||||
4. Hit save.
|
||||
3. Type `io.supabase.flutterquickstart://login-callback/` in the Additional Redirect URLs input field.
|
||||
4. Hit save.
|
||||
```
|
||||
|
||||
|
||||
@@ -182,6 +180,7 @@ Now that we have the dependencies installed let's setup deep links so users who
|
||||
That is it on Supabase's end and the rest are platform specific settings:
|
||||
|
||||
For Android, add an intent-filter to enable deep linking:
|
||||
|
||||
```xml title="android/app/src/main/AndroidManifest.xml"
|
||||
<manifest ...>
|
||||
<!-- ... other tags -->
|
||||
@@ -206,6 +205,7 @@ For Android, add an intent-filter to enable deep linking:
|
||||
```
|
||||
|
||||
For iOS add CFBundleURLTypes to enable deep linking:
|
||||
|
||||
```xml title="ios/Runner/Info.plist"
|
||||
<!-- ... other tags -->
|
||||
<plist>
|
||||
@@ -231,22 +231,21 @@ For iOS add CFBundleURLTypes to enable deep linking:
|
||||
|
||||
For web:
|
||||
|
||||
There are no additional configurations.
|
||||
There are no additional configurations.
|
||||
|
||||
### Main function
|
||||
|
||||
Now that we have deep links ready let's initialize the Supabase client inside our `main` function with the API credentials that you copied [earlier](#get-the-api-keys).
|
||||
These variables will be exposed on the app, and that's completely fine since we have
|
||||
These variables will be exposed on the app, and that's completely fine since we have
|
||||
[Row Level Security](/docs/guides/auth#row-level-security) enabled on our Database.
|
||||
|
||||
```dart title="lib/main.dart"
|
||||
void main() {
|
||||
Future<void> main() async {
|
||||
WidgetsFlutterBinding.ensureInitialized();
|
||||
|
||||
Supabase.initialize(
|
||||
await Supabase.initialize(
|
||||
url: '[YOUR_SUPABASE_URL]',
|
||||
anonKey: '[YOUR_SUPABASE_ANNON_KEY]',
|
||||
authCallbackUrlHostname: 'login-callback',
|
||||
anonKey: '[YOUR_SUPABASE_ANON_KEY]',
|
||||
);
|
||||
runApp(MyApp());
|
||||
}
|
||||
@@ -254,8 +253,8 @@ void main() {
|
||||
|
||||
### Set up AuthState
|
||||
|
||||
In order to handle deep links for Android and iOS, let's create a class that will do just that.
|
||||
`supabase_flutter` plugin comes with `SupabaseAuthState` class where we can inherit from to react to various deep link events.
|
||||
In order to handle deep links for Android and iOS, let's create a class that will do just that.
|
||||
`supabase_flutter` plugin comes with `SupabaseAuthState` class where we can inherit from to react to various deep link events.
|
||||
|
||||
```dart title="lib/components/auth_state.dart"
|
||||
import 'package:flutter/material.dart';
|
||||
@@ -265,12 +264,16 @@ import 'package:supabase_flutter/supabase_flutter.dart';
|
||||
class AuthState<T extends StatefulWidget> extends SupabaseAuthState<T> {
|
||||
@override
|
||||
void onUnauthenticated() {
|
||||
Navigator.of(context).pushNamedAndRemoveUntil('/login', (route) => false);
|
||||
if (mounted) {
|
||||
Navigator.of(context).pushNamedAndRemoveUntil('/login', (route) => false);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void onAuthenticated(Session session) {
|
||||
Navigator.of(context).pushNamedAndRemoveUntil('/account', (route) => false);
|
||||
if (mounted) {
|
||||
Navigator.of(context).pushNamedAndRemoveUntil('/account', (route) => false);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
@@ -285,9 +288,9 @@ class AuthState<T extends StatefulWidget> extends SupabaseAuthState<T> {
|
||||
|
||||
### Set up AuthRequiredState
|
||||
|
||||
We might want to show certain pages to the users only if they are signed in.
|
||||
For that we can create a handy `AuthRequiredState` class that we can inherit from for pages where the users need to be authenticated.
|
||||
`AuthRequiredState` will inherit `SupabaseAuthRequiredState` which is provided by `supabase_flutter` package.
|
||||
We might want to show certain pages to the users only if they are signed in.
|
||||
For that we can create a handy `AuthRequiredState` class that we can inherit from for pages where the users need to be authenticated.
|
||||
`AuthRequiredState` will inherit `SupabaseAuthRequiredState` which is provided by `supabase_flutter` package.
|
||||
|
||||
```dart title="lib/components/auth_required_state.dart"
|
||||
import 'package:flutter/material.dart';
|
||||
@@ -314,7 +317,7 @@ final supabase = Supabase.instance.client;
|
||||
### Set up Splash Screen
|
||||
|
||||
Let's create a splash screen that will be shown to users right after they open the app.
|
||||
This splash screen inherits `AuthState` to redirect users to the appropriate pages depending on their authentication state.
|
||||
This splash screen inherits `AuthState` to redirect users to the appropriate pages depending on their authentication state.
|
||||
|
||||
```dart title="lib/pages/splash_page.dart"
|
||||
import 'package:flutter/material.dart';
|
||||
@@ -347,7 +350,7 @@ class _SplashPageState extends AuthState<SplashPage> {
|
||||
|
||||
Let's create a Flutter widget to manage logins and sign ups.
|
||||
We'll use Magic Links, so users can sign in with their email without using passwords.
|
||||
This page will also inherit `AuthState` as it will handle user login.
|
||||
This page will also inherit `AuthState` as it will handle user login.
|
||||
|
||||
```dart title="lib/pages/login_page.dart"
|
||||
import 'package:flutter/foundation.dart';
|
||||
@@ -564,7 +567,6 @@ class _AccountPageState extends AuthRequiredState<AccountPage> {
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Launch!
|
||||
|
||||
Now that we have all the components in place, let's update `lib/main.dart`:
|
||||
@@ -576,12 +578,12 @@ import 'package:supabase_flutter_guide/pages/account_page.dart';
|
||||
import 'package:supabase_flutter_guide/pages/login_page.dart';
|
||||
import 'package:supabase_flutter_guide/pages/splash_page.dart';
|
||||
|
||||
void main() {
|
||||
Future<void> main() async {
|
||||
WidgetsFlutterBinding.ensureInitialized();
|
||||
|
||||
Supabase.initialize(
|
||||
await Supabase.initialize(
|
||||
url: '[YOUR_SUPABASE_URL]',
|
||||
anonKey: '[YOUR_SUPABASE_ANNON_KEY]',
|
||||
anonKey: '[YOUR_SUPABASE_ANON_KEY]',
|
||||
);
|
||||
runApp(MyApp());
|
||||
}
|
||||
@@ -626,7 +628,6 @@ flutter run -d web-server --web-hostname localhost --web-port 3000
|
||||
|
||||
And then open the browser to [localhost:3000](http://localhost:3000) and you should see the completed app.
|
||||
|
||||
|
||||
<img height="500px" src="/img/supabase-flutter-demo.png" alt="Supabase User Management example" />
|
||||
|
||||
## Next steps
|
||||
|
||||
Reference in new issue
Block a user