[SOLVED] Connecting Flutter to a Self-hosted Supabase in Docker

Connecting Flutter to a Self-hosted Supabase in Docker

As a beginner in Flutter and Supabase, I am trying to run the code found in the Supabase document here. I think my Supabase account is set-up correctly since I can accessed the Supabase dashboard http://localhost:8000 with the modifications in the .env and I have created and inserted the sample data. Here is the code, with a modification in the table since I used a schema supatest for the table:

import 'package:flutter/material.dart';
import 'package:supabase_flutter/supabase_flutter.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Supabase.initialize(
    url: 'http://localhost:8000',
    anonKey:
        'KEY_REDACTED_BUT_IT_IS_THE_SAME_IN_DOTENV',
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Countries',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _future = Supabase.instance.client.from('supatest.countries').select();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<List<Map<String, dynamic>>>(
        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']),
              );
            }),
          );
        },
      ),
    );
  }
}

However, when I tried to run it, the CircularProgressIndicator just keeps spinning. When using the dev tool of the browser, the error was: Failed to load resource: the server responded with a status of 404 (Not Found). Drilling down to the URL which caused the error http://localhost:8000/rest/v1/supatest.countries?select=%2A, the page was displaying 'Kong Error No API key found in request.' What was wrong with the code or did I miss some configuration? The anonKey is correct, it is the same with the one found in the .env.

Additional information: pubspec.yaml

...
dependencies:
  flutter:
    sdk: flutter
  supabase_flutter: ^2.3.2

Solution

The answer can be found in dshukertjr's comment. I had declared a schema and been using it to create and query the tables. Apparently, this needs additional configuration. Instead, I created the tables using the (default) public schema and it worked!