Fetching data from Supabase in flutter

Question

Anyone can help me with this, I'm trying to fetch data from a table in Supabase but it's showing error on the app screen.

I want to build an app that reads the data from Supabase without any authentication, only reading and displaying the data from the table, here I'm just testing before I start building my app.

a screenshot from the main page in the app

My code in main.dart

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

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

  await Supabase.initialize(
    url: '[https://bougcsiwnimbmnmvwjlb.supabase.co]',
    anonKey: '[eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlhdCI6MTY0Mzc5NzQyOCwiZXhwIjoxOTU5MzczNDI4fQ.Ac5s-ZOyUV-2rRoP_GUuPvdt7tGNocCSq-LU-ZtBVqQ]',
  );
  runApp(const MyApp());
}


class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.red,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}


class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}


// SuPabase
class _MyHomePageState extends State<MyHomePage> {

  Future<void> _getProfile(String name) async {
    late final _usernameController ;

  @override
  Future<Widget> build(BuildContext context) async {
    final response = await Supabase.instance.client
        .from('channels')
        .select()
        .single()
        .execute();
    if (response.error != null && response.status != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text(response.error!.message)));
    }
    if (response.data != null) {
      _usernameController = response.data!['name'] as String;
    }
    return Scaffold(
      appBar: AppBar(title: const Text('Profile')),
      body: ListView(
        padding: const EdgeInsets.symmetric(vertical: 18, horizontal: 12),
        children: [
          Text(_usernameController,
          ),
        ],
      ),
    );
  }
}

  @override
  Widget build(BuildContext context) {
    throw UnimplementedError();
  }
}

I really appetite if anyone can help in this.

Answer 1

I think I can spot few spots that you might want to fix.

First, you want to remove the [] around your Supabase URL and Supabase anon key like this.

await Supabase.initialize(
    url: 'https://bougcsiwnimbmnmvwjlb.supabase.co',
    anonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlhdCI6MTY0Mzc5NzQyOCwiZXhwIjoxOTU5MzczNDI4fQ.Ac5s-ZOyUV-2rRoP_GUuPvdt7tGNocCSq-LU-ZtBVqQ',
  );

Also, it seemed like you had some mismatch of brackets in your widget definition. I think this is along the line of what you wanted to do:

class _MyHomePageState extends State<MyHomePage> {
  String? name;
  Future<void> _getProfile() async {
    final response = await Supabase.instance.client
        .from('channels')
        .select()
        .single()
        .execute();
    if (response.error != null && response.status != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text(response.error!.message)));
    }
    if (response.data != null) {
      setState(() {
        name = response.data!['name'] as String;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Profile')),
      body: ListView(
        padding: const EdgeInsets.symmetric(vertical: 18, horizontal: 12),
        children: [
          name == null ? const Text('loading') : Text(name!),
        ],
      ),
    );
  }

  @override
  void initState() {
    _getProfile();
    super.initState();
  }
}