How to connect Supabase to Flutter?

 

Step 1: Set up Supabase Account and Project

 

1. Visit Supabase and create an account if you haven't already.
2. After logging in, click on "New Project" to create a new project.
3. Enter the required project details, like your organization name, database password, etc., and then click "Create New Project".
4. Once your project is created, you will be taken to the project dashboard. Here, you can find the API URL and API Key under the "Settings" > "API" tab. These will be required for connecting to your Flutter app.

 

Step 2: Initialize a Flutter Project

 

Open your terminal and run the following commands to create a new Flutter project:

flutter create my_supabase_app
cd my_supabase_app

 

Step 3: Add Supabase Dependencies

 

1. Open the pubspec.yaml file in the root of your Flutter project.
2. Add the supabase_flutter dependency under the dependencies section:

dependencies:
  flutter:
    sdk: flutter
  supabase_flutter: latest_version

1. Run the following command to install the new dependencies:

flutter pub get

 

Step 4: Initialize Supabase in Flutter

 

1. Open the lib/main.dart file.
2. Import the Supabase package:

import 'package:supabase_flutter/supabase_flutter.dart';

1. Initialize Supabase using the API URL and API Key obtained in Step 1:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Supabase.initialize(
    url: 'YOUR_SUPABASE_URL',
    anonKey: 'YOUR_SUPABASE_ANON_KEY',
  );
  runApp(MyApp());
}

 

Step 5: Create a Simple UI for Testing

 

1. Still within the lib/main.dart file, create a simple UI to interact with Supabase:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Supabase Flutter Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('Supabase Flutter Demo')),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final client = Supabase.instance.client;

  Future<void> _fetchData() async {
    final response = await client.from('your_table_name').select().execute();
    print(response.data);
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: _fetchData,
        child: Text('Fetch Data'),
      ),
    );
  }
}

 

Step 6: Run Your Flutter App

 

1. Use the terminal to navigate to the root of your Flutter project and run:

flutter run

1. You should see the app launch with a simple button. When clicked, it fetches data from the specified Supabase table and prints it to the console.

 

Step 7: Customize and Extend

 

Now that you have a basic setup running, you can customize and extend your Flutter app to perform various operations on your Supabase database, such as inserting, updating, or deleting data.