how to stream my data from supabase to the flutter app

Question

I'm trying to stream a tables data into my flutter app, but I keep getting some errors. I'm trying to do it as I would do it with Firebase but with no success :(

Can someone point out what is it that I'm doing wrong here?

My db:

My service:

import 'package:demo_challenge/constants/db_connect.dart';
import 'package:demo_challenge/models/challenge_model.dart';

class SupabaseService {
  Stream<ChallengeModel> getPosts() {
    final response = supabase
        .from('Table')
        .stream()
        .execute()
        .listen((event) => ChallengeModel.fromJson(event /* 1st error */));
    response.cancel();
    return response /* 2nd error */;
  }
}

My StreamBuilder:

import 'package:demo_challenge/models/challenge_model.dart';
import 'package:demo_challenge/services/supabase_servicel.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final SupabaseService _service = SupabaseService();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Demo Challenge'),
      ),
      body: StreamBuilder<ChallengeModel>(
          stream: _service.getPosts(),
          builder: (context, snapshot) {
            return Text(snapshot.data!.name);
          }),
    );
  }
}

Errors:

//1st error
The argument type 'List<Map<String, dynamic>>' can't be assigned to the parameter type 'Map<String, dynamic>'.

//2nd error
A value of type 'StreamSubscription<List<Map<String, dynamic>>>' can't be returned from the method 'getPosts' because it has a return type of 'Stream<ChallengeModel>'.

Smartiiez · Answer 1 · 2021-12-22T08:07:51.630

You got error because you try to return a Stream with the listening event (2st) and your Stream return a List of Challenges not a Map (1st).

Look this code :

import 'package:demo_challenge/models/challenge_model.dart';
import 'package:supabase_flutter/supabase_flutter.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  List<ChallengeModel> challengeModelList = [];
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Demo Challenge'),
      ),
      body: StreamBuilder<List<Map<String, dynamic>>>(
          stream: Supabase.instance.client
              .from('table')
              .stream()
              .execute(),
          builder: (BuildContext context, AsyncSnapshot<List<Map<String, dynamic>>> snapshot) {
            if (!snapshot.hasData || snapshot.hasError || snapshot.data!.isEmpty)
              return Container();
            snapshot.data!.forEach((data) {
              challengeModelList.add(ChallengeModel.fromJson(data));
            });
            return Text(challengeModel.first.name);
          }),
    );
  }
}
}

Your Stream type is List<Map<String, dynamic>> so your AsyncSnapshot return a List than you can parse with a forEach.

Each data here is a Map<String, dynamic>, you have to put into a list, here challengeModelList.

Before parsing the snapshot, be sure it's not null or empty.

In this example, this code return a Text widget with the name of the first Challenge.

how to stream my data from supabase to the flutter app

1 Answers1