如何将我的数据从 supabase 流式传输到颤振应用程序答案

【问题标题】：how to stream my data from supabase to the flutter app如何将我的数据从 supabase 流式传输到颤振应用程序
【发布时间】：2022-01-20 10:44:30
【问题描述】：

我正在尝试将表格数据流式传输到我的颤振应用程序中，但我不断收到一些错误。我正在尝试像使用 Firebase 那样做，但没有成功:(

有人能指出我在这里做错了什么吗？

我的数据库：

我的服务：

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 */;
  }
}

我的 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);
          }),
    );
  }
}

错误：

//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>'.

【问题讨论】：

标签： flutter dart supabase flutter-streambuilder supabase-database

【解决方案1】：

您遇到错误是因为您尝试返回带有监听事件的流（第 2 次），而您的流返回挑战列表而不是地图（第 1 次）。

看看这段代码：

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);
          }),
    );
  }
}
}

您的 Stream 类型是 List>，因此您的 AsyncSnapshot 返回的 List 比您可以使用 forEach 解析的要多。

这里的每一个数据都是一个Map，你要放到一个列表中，这里是challengeModelList。

在解析快照之前，请确保它不为 null 或为空。

在此示例中，此代码返回一个带有第一个挑战名称的 Text 小部件。

【讨论】：