如何使用 Riverpod 包从 Flutter 中的 firebase 集合中获取所有文档?
How to fetch all documents from a firebase collection in Flutter using the Riverpod package?
我正在使用提供程序包,并且有一个提供程序从全局变量 idea 获取其初始值,该全局变量是 json 数据列表并且类型为 List
以下是它的代码,按预期工作。
final ideasListProvider = StateNotifierProvider<IdeaList>((ref) {
return IdeaList([for (var i in ideas) Idea.fromJson(i)]);
});
现在我想要实现的是替换变量 idea,而是使用我从 firebase 上的集合中获得的文档列表。
但我不确定如何从这里开始。
这是从 firestore 获取快照的第二个提供程序。
final firbaseIdeaProvider = StreamProvider.autoDispose((ref) {
return FirebaseFirestore.instance.collection('ideas').snapshots();
});
我现在该怎么办?
我的其余代码依赖于 ideasListProvider,因此我将不得不以某种方式向它提供来自 firebase 上的 ideas 集合的文档列表。
好消息,您走对了。首先,您要做的可能是将您的 Firestore 数据映射到您的数据模型。这可以通过创建从您的 firestore 数据流映射的新流来实现:
final firebaseIdeaProvider = StreamProvider.autoDispose<List<Idea>>((ref) {
final stream = FirebaseFirestore.instance.collection('ideas').snapshots();
return stream.map((snapshot) => snapshot.docs.map((doc) => Idea.fromJson(doc.data())).toList());
});
现在剩下的就是读取您的 StreamProvider。处理加载、错误和新数据状态的示例如下(hooks_riverpod):
class IdeasExample extends HookWidget {
const IdeasExample({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Ideas Example'),
),
body: useProvider(firebaseIdeaProvider).when(
loading: () => const Center(child: CircularProgressIndicator()),
error: (err, stack) => Center(child: Text(err.toString())),
data: (ideas) {
return ListView.builder(
itemCount: ideas.length,
itemBuilder: (_, index) {
return ListTile(
title: Text(ideas[index].toString()),
);
},
);
},
),
);
}
}
没有钩子:
class IdeasExample extends ConsumerWidget {
const IdeasExample({Key key}) : super(key: key);
@override
Widget build(BuildContext context, ScopedReader watch) {
return Scaffold(
appBar: AppBar(
title: Text('Ideas Example'),
),
body: watch(firebaseIdeaProvider).when(
loading: () => const Center(child: CircularProgressIndicator()),
error: (err, stack) => Center(child: Text(err.toString())),
data: (ideas) {
return ListView.builder(
itemCount: ideas.length,
itemBuilder: (_, index) {
return ListTile(
title: Text(ideas[index].toString()),
);
},
);
},
),
);
}
}
我正在使用提供程序包,并且有一个提供程序从全局变量 idea 获取其初始值,该全局变量是 json 数据列表并且类型为 List
以下是它的代码,按预期工作。
final ideasListProvider = StateNotifierProvider<IdeaList>((ref) {
return IdeaList([for (var i in ideas) Idea.fromJson(i)]);
});
现在我想要实现的是替换变量 idea,而是使用我从 firebase 上的集合中获得的文档列表。
但我不确定如何从这里开始。
这是从 firestore 获取快照的第二个提供程序。
final firbaseIdeaProvider = StreamProvider.autoDispose((ref) {
return FirebaseFirestore.instance.collection('ideas').snapshots();
});
我现在该怎么办? 我的其余代码依赖于 ideasListProvider,因此我将不得不以某种方式向它提供来自 firebase 上的 ideas 集合的文档列表。
好消息,您走对了。首先,您要做的可能是将您的 Firestore 数据映射到您的数据模型。这可以通过创建从您的 firestore 数据流映射的新流来实现:
final firebaseIdeaProvider = StreamProvider.autoDispose<List<Idea>>((ref) {
final stream = FirebaseFirestore.instance.collection('ideas').snapshots();
return stream.map((snapshot) => snapshot.docs.map((doc) => Idea.fromJson(doc.data())).toList());
});
现在剩下的就是读取您的 StreamProvider。处理加载、错误和新数据状态的示例如下(hooks_riverpod):
class IdeasExample extends HookWidget {
const IdeasExample({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Ideas Example'),
),
body: useProvider(firebaseIdeaProvider).when(
loading: () => const Center(child: CircularProgressIndicator()),
error: (err, stack) => Center(child: Text(err.toString())),
data: (ideas) {
return ListView.builder(
itemCount: ideas.length,
itemBuilder: (_, index) {
return ListTile(
title: Text(ideas[index].toString()),
);
},
);
},
),
);
}
}
没有钩子:
class IdeasExample extends ConsumerWidget {
const IdeasExample({Key key}) : super(key: key);
@override
Widget build(BuildContext context, ScopedReader watch) {
return Scaffold(
appBar: AppBar(
title: Text('Ideas Example'),
),
body: watch(firebaseIdeaProvider).when(
loading: () => const Center(child: CircularProgressIndicator()),
error: (err, stack) => Center(child: Text(err.toString())),
data: (ideas) {
return ListView.builder(
itemCount: ideas.length,
itemBuilder: (_, index) {
return ListTile(
title: Text(ideas[index].toString()),
);
},
);
},
),
);
}
}