diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index 3673a8da679..7abe1bea978 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -42,13 +42,14 @@ export const gettingstarted = {
items: [
{ name: 'Features', url: '/guides/getting-started/features', items: [] },
{ name: 'Architecture', url: '/guides/getting-started/architecture', items: [] },
- // {
- // name: 'Quickstarts',
- // items: [
- // { name: 'NextJS', url: '/guides/getting-started/quickstarts/nextjs', items: [] },
- // { name: 'ReactJS', url: '/guides/getting-started/quickstarts/reactjs', items: [] },
- // ],
- // },
+ {
+ name: 'Framework Quickstarts',
+ items: [
+ { name: 'ReactJS', url: '/guides/getting-started/quickstarts/reactjs', items: [] },
+ { name: 'NextJS', url: '/guides/getting-started/quickstarts/nextjs', items: [] },
+ { name: 'Flutter', url: '/guides/getting-started/quickstarts/flutter', items: [] },
+ ],
+ },
{
name: 'Web app tutorials',
items: [
diff --git a/apps/docs/pages/guides/getting-started/quickstarts/flutter.mdx b/apps/docs/pages/guides/getting-started/quickstarts/flutter.mdx
new file mode 100644
index 00000000000..339eb20dd2f
--- /dev/null
+++ b/apps/docs/pages/guides/getting-started/quickstarts/flutter.mdx
@@ -0,0 +1,196 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+import StepHikeCompact from '~/components/StepHikeCompact'
+
+export const meta = {
+ title: 'Use Supabase with Flutter',
+ subtitle:
+ 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Flutter app.',
+ breadcrumb: 'Framework Quickstarts',
+}
+
+
+
+
+
+
+ [Create a new project](https://app.supabase.com) in the Supabase Dashboard.
+
+ After your project is ready, create a table in your Supabase database using the [SQL Editor](https://app.supabase.com/project/_/sql) in the Dashboard. Use the following SQL statement to create a `countries` table with some sample data.
+
+
+
+
+
+ ```sql SQL_EDITOR
+ -- Create the table
+ CREATE TABLE countries (
+ id SERIAL PRIMARY KEY,
+ name VARCHAR(255) NOT NULL
+ );
+ -- Insert some sample data into the table
+ INSERT INTO countries (name) VALUES ('United States');
+ INSERT INTO countries (name) VALUES ('Canada');
+ INSERT INTO countries (name) VALUES ('Mexico');
+ ````
+
+
+
+
+
+
+
+
+
+ Create a Flutter app using the `flutter create` command. You can skip this step if you already have a working app.
+
+
+
+
+
+ ```bash Terminal
+ flutter create my_app
+ ```
+
+
+
+
+
+
+
+
+
+ The fastest way to get started is to use the [`supabase_flutter`](https://pub.dev/packages/supabase_flutter) client library which provides a convenient interface for working with Supabase from a Flutter app.
+
+ Open the `pubspec.yaml` file inside your Flutter app and add `supabase_flutter` as a dependency.
+
+
+
+
+
+ ```yaml pubspec.yaml
+ supabase_flutter: ^1.2.2
+ ```
+
+
+
+
+
+
+
+
+
+ Open `lib/main.dart` and edit the main function to initialize Supabase using your [project URL and public API (anon) key](https://app.supabase.com/project/_/settings/api).
+
+
+
+
+
+ ```dart lib/main.dart
+ import 'package:supabase_flutter/supabase_flutter.dart';
+
+ Future main() async {
+ WidgetsFlutterBinding.ensureInitialized();
+
+ await Supabase.initialize(
+ url: 'YOUR_SUPABASE_URL',
+ anonKey: 'YOUR_SUPABASE_ANON_KEY',
+ );
+ runApp(MyApp());
+ }
+ ```
+
+
+
+
+
+
+
+
+
+ Use a `FutureBuilder` to fetch the data when the home page loads and display the query result in a `ListView`.
+
+ Replace the default `MyApp` and `MyHomePage` classes with the following code.
+
+
+
+
+
+ ```dart lib/main.dart
+ class MyApp extends StatelessWidget {
+ const MyApp({Key? key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ return const MaterialApp(
+ title: 'Countries',
+ home: HomePage(),
+ );
+ }
+ }
+
+ class HomePage extends StatefulWidget {
+ const HomePage({super.key});
+
+ @override
+ State createState() => _HomePageState();
+ }
+
+ class _HomePageState extends State {
+ final _future = Supabase.instance.client
+ .from('countries')
+ .select>>();
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: FutureBuilder>>(
+ future: _future,
+ builder: (context, snapshot) {
+ if (!snapshot.hasData) {
+ return const Center(child: CircularProgressIndicator());
+ }
+ final countries = snapshot.data!;
+ return ListView.builder(
+ itemCount: countries.length,
+ itemBuilder: ((context, index) {
+ final country = countries[index];
+ return ListTile(
+ title: Text(country['name']),
+ );
+ }),
+ );
+ },
+ ),
+ );
+ }
+ }
+ ```
+
+
+
+
+
+
+
+
+ Run your app on a platform of your choosing! By default an app should launch in your web browser.
+
+ Note that `supabase_flutter` is compatible with web, iOS, Android, macOS, and Windows apps.
+
+
+
+
+
+ ```bash Terminal
+ flutter run
+ ```
+
+
+
+
+
+
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/getting-started/quickstarts/nextjs.mdx b/apps/docs/pages/guides/getting-started/quickstarts/nextjs.mdx
index 25e4b066c09..67d258c8575 100644
--- a/apps/docs/pages/guides/getting-started/quickstarts/nextjs.mdx
+++ b/apps/docs/pages/guides/getting-started/quickstarts/nextjs.mdx
@@ -3,7 +3,8 @@ import StepHikeCompact from '~/components/StepHikeCompact'
export const meta = {
title: 'Use Supabase with NextJS',
- subtitle: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a NextJS app.',
+ subtitle:
+ 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a NextJS app.',
breadcrumb: 'Framework Quickstarts',
}
@@ -58,7 +59,7 @@ export const meta = {
The fastest way to get started is to use the `supabase-js` client library which provides a convenient interface for working with Supabase from a NextJS app.
-
+
Navigate to the NextJS app and install `supabase-js`.
@@ -95,8 +96,8 @@ export const meta = {
- Use a `getInitialProps` method to fetch the data when the page loads and display the query result as a simple list.
-
+ Use the `getServerSideProps` method to fetch the data server-side and display the query result as a simple list.
+
Replace the existing function in your index file in the `pages` directory with the following code.
@@ -116,11 +117,13 @@ export const meta = {
);
}
- Page.getInitialProps = async () => {
- const { data, error } = await supabase.from('countries').select()
+ export async function getServerSideProps() {
+ let { data } = await supabase.from('countries').select()
return {
- countries: data
+ props: {
+ countries: data
+ },
}
}
diff --git a/apps/docs/pages/guides/getting-started/quickstarts/reactjs.mdx b/apps/docs/pages/guides/getting-started/quickstarts/reactjs.mdx
index da4f7431bb3..ea117046949 100644
--- a/apps/docs/pages/guides/getting-started/quickstarts/reactjs.mdx
+++ b/apps/docs/pages/guides/getting-started/quickstarts/reactjs.mdx
@@ -3,7 +3,8 @@ import StepHikeCompact from '~/components/StepHikeCompact'
export const meta = {
title: 'Use Supabase with React',
- subtitle: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a React app.',
+ subtitle:
+ 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a React app.',
breadcrumb: 'Framework Quickstarts',
}
@@ -58,7 +59,7 @@ export const meta = {
The fastest way to get started is to use the `supabase-js` client library which provides a convenient interface for working with Supabase from a React app.
-
+
Navigate to the React app and install `supabase-js`.
@@ -73,11 +74,11 @@ export const meta = {
-
+
In `index.js`, create a Supabase client using your [Project URL and public API (anon) key](https://app.supabase.com/project/_/settings/api).
-
+
Add a `getCountries` function to fetch the data and log the query result to the browser console.
@@ -90,7 +91,7 @@ export const meta = {
const supabase = createClient('https://.supabase.co', '')
async function getCountries() {
- const countries = await supabase.from('countries').select('*')
+ const countries = await supabase.from('countries').select()
console.log(countries)
}
@@ -101,7 +102,7 @@ export const meta = {
-
+
Start the app, go to http://localhost:3000 in a browser, and open the browser console and you should see the list of countries.
diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx
index 17bc30954ec..5de1c11462e 100644
--- a/apps/docs/pages/index.mdx
+++ b/apps/docs/pages/index.mdx
@@ -11,16 +11,15 @@ export const meta = {
Supabase is an open source Firebase alternative providing all the backend features you need to
- build a product. [Learn more](/docs/guides/getting-started/architecture) about Supabase, start
- with the [tutorials](/docs/guides/getting-started#tutorials), or dive straight into the different
- products and APIs.
+ build a product. [Learn more](/docs/guides/getting-started/architecture) about Supabase, follow a
+ quickstart for an overview, or dive straight into the different products and APIs.