Hook up Todos Example Application to Firestore

[johanwitters]

I'm switching to flutter to build android apps and I need to make a decision on using a library to support me in doing so. I was pulling my hair out from not finding good examples for rxdart and stumbled upon flutter_bloc. I love you documentation. However, after following a number of your tutorials I'm stuck. I really though I had made my decision, until just now: I'm stuck and I have no idea on best practices to connect bloc with firestore, which is ultimately what I need to do. It's pretty unfortunate but without it, I will have to go back and try my luck with rxdart. I really thought I was almost there. I could obviously continue in my trial-and-error attempt. I noticed you have a small bloc for stream example "ticker". I guess I could try, but I actually don't know if this has ever been done before. So, I can't afford the risk of investing hours / days to connect it against firestore to find out it's not possible with flutter_bloc. Unless you have a pointer?

[felangel]

Hi @johanwitters 👋 Thanks for opening an issue and for considering flutter_bloc!

There are several members of the community who are currently building applications that use Firestore and flutter_bloc so if you are able to join the gitter I can connect you with them.

In addition, if you have a specific example app that you think would be useful, I can try to prioritize building it and writing a tutorial 👍

[johanwitters]

Hi,

thanks for your quick response. I'd love to see the todos flutter_bloc app connected to firestore.

https://medium.com/flutter-community/flutter-todos-tutorial-with-flutter-bloc-d9dd833f9df3

[felangel]

Sounds good! I'll try to adapt it this sometime this week 👍

[johanwitters]

Oh brilliant. Thanks!

[warriorCoder]

I can attest to the fact that flutter_bloc and firebase work well together. In fact, I was able to take my firebase driven app and convert it into a local db app using Sembast in a matter of hrs, mostly due to abstracting the data layer away with the repository pattern and having bloc pull the data from the repository that's pass into it.

[johanwitters]

Hi @warriorCoder

Hooking up an application, like one written with flutter_bloc is possible. I don't see anybody able to prove it wouldn't. But my question is: how? And that how-question is important to understand how optimal it would be / is...

Looking at the example from the todos tutorial. I could see it being fairly easy to swap out the file-based implementation of the interface / abstract class TodosRepository.

abstract class TodosRepository { Future<List> loadTodos(); Future saveTodos(List todos); }

Obviously, one could download the TodoEntity and upload the entire set of TodoEntity from anywhere, including firestore.

However... I this interface isn't the optimal interface for a (potentially) stream based storage layer. A better interface would be the one I've (also) found on the archtecture examples repository, which is the ReactiveTodosRepository.

abstract class ReactiveTodosRepository { Future addNewTodo(TodoEntity todo); Future deleteTodo(List idList); Stream<List> todos(); Future updateTodo(TodoEntity todo); }

Ones we would swap out the TodosRepository and swap in the ReactiveTodosRepository, then the question is, how is that going to work? Most of the questions I have that are raised when I do this are best-practice-questions, although there's some questions questioning the feasibility, or better "how optimal would that work?"... I could try to figure out how to do this. But I prefer the master to guide me, rather than to figure it out myself. I might after trial and errors, performance tests come with a suboptimal solution / not in line with best practice...

1. How does the bloc (TodosBloc here) subscribe to changes in ReactiveTodosRepository::todos?

2. How does the mapping between TodoEntity and Todo happen? Inside the bloc, in the repository or in the presentation layer. I imagine best to put it in the bloc, but I've seen other examples where people have put it elsewhere. Why?

3. In the widget, using fltuter_bloc, I'll need to use the BlocBuilder to connect to the bloc. Using streams of data, rather than lists . Looking at rxdart, I can see people use the StreamBuilder to hook up the widget with the bloc data. That's fine I guess, however, when one would do this with flutter_bloc, you'd break the conventions: to respect the framework, one should hook up the widget with a blocbuilder, I believe. But then I can see, one would use a ListView to build up the ui. That's probably not what we want. I'm not sure you want to pull the entire database to your ui. I believe the StreamBuilder has probably some optimisations in terms of which part of the stream to react to. This also poses the question: if I do not use the StreamBuilder, then I feel possibly to eventually miss out on changes the StreamBuilder builders would implement. So, what would the experienced flutter_bloc people recommend here?

4. I've also noticed that most people even use the same model for the database layer as the model for the ui. In this case the TodoEntity and Todos would be one and the same. I can see why people do this: hooking up the ui with a stream, which is basically coming all the way from the storage layer, is possibly the easiest thing to do (if it's not just the only way). However, that's far from great. Actually poor is the word.

Those are a couple of questions I have at this stage. But I'm sure, if I would dig deeper, I would come across some more questions. Having example code, preferably the todos example, hook it up with firestore would just tell. It would tell me, as well as plenty others. Especially because I believe flutter_bloc is exceptionally well documented, and the code is superior - in my opinion - when compared to what I've seen in other frameworks.

[warriorCoder]

@johanwitters From what I've seen, flutter_bloc and supporting libraries aside is that the examples on how to do something aren't necessarily best practices. You can see this in the Todo bunch of applications that Brian Egan started.

I hope you find something and I'm sure Felix's example will be a great jumping off point.

[rajababu3]

@felangel Any update on this?

[felangel]

@rajababu3 I've been really busy with getting flutter_bloc v0.19.0 released and updating all the documentation but I should be able to do this sometime this week. Sorry for the delay!

[rajababu3]

@felangel Thank you will be waiting for it.

[felangel]

Flutter Firestone Todos 🎉

Tutorial Big thanks to @warriorCoder 🙏

[akshay-sha]

Seems like this example has been removed. Since it says 404. Any chance, I can get a link to any example using flutter_bloc with firestore?

[maximveksler]

Could be a nice reference, @felangel would you happen to have context on the removal cause?