diff --git a/web/docs/guides/with-flutter.mdx b/web/docs/guides/with-flutter.mdx index 93ab0e5acda..5718abc348a 100644 --- a/web/docs/guides/with-flutter.mdx +++ b/web/docs/guides/with-flutter.mdx @@ -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 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. - + @@ -115,11 +115,9 @@ create policy "Anyone can upload an avatar." +### 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. - + @@ -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. ``` ![Supabase console deep link setting](/img/deeplink-setting.png) @@ -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" @@ -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" @@ -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 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 extends SupabaseAuthState { @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 extends SupabaseAuthState { ### 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 { 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 { } ``` - ### 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 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. - Supabase User Management example ## Next steps