flutter bloc

Recently, I’ve been working with streams and BLoCs in Flutter to retrieve and display data from an SQLite database. Admittedly, it took me a very long time to make sense of them. With that said, I’d like to go over all this in hopes you’ll walk away feeling confident in using them within your own apps. I’ll be going into as much depth as I possibly can and explaining everything as simply as possible.

最近，我一直在Flutter中使用流和BLoC来从SQLite数据库检索和显示数据。 诚然，我花了很长时间才理解它们。 话虽如此，我想复习所有这一切，希望您能自信地在自己的应用程序中使用它们。 我将尽可能深入，并尽可能简单地解释所有内容。

In this post, we’ll be making a simple app from start to finish that makes use of streams, BLoCs, and an SQLite database. This app will allow us to create, modify, and delete notes. If you haven’t done so yet, create a new barebones Flutter app using flutter create APPNAME. It'll be a lot easier to understand all this if you start fresh. Then, later on, implement what you learned into your existing apps.

在本文中，我们将从头到尾制作一个简单的应用程序，该应用程序将使用流，BLoC和SQLite数据库。 这个程序将允许我们创建，修改和删除注释。 如果尚未执行，请使用flutter create APPNAME创建一个新的Flutter应用程序。 如果您重新开始，那么了解这一切会容易得多。 然后，稍后，将您学到的知识应用到现有应用中。

The first order of business is creating a class to handle the creation of our tables and to query the database. To do this properly, we need to add sqflite and path_provider as dependencies in our pubspec.yaml file.

首先要创建一个类来处理表的创建和查询数据库。 为了正确执行此操作，我们需要在我们的pubspec.yaml文件中添加sqflite和path_provider作为依赖pubspec.yaml 。

In case it doesn’t run automatically, run flutter packages get to retrieve the packages. Once it finishes, create a data folder and a database.dart file within it. This class will create a singleton so we can access the database from other files, open the database, and run queries on that database. I've included comments to explain some of the code.

如果它没有自动运行，请运行flutter packages get以检索软件包。 完成后，在其中创建一个data文件夹和一个database.dart文件。 此类将创建一个单例，以便我们可以从其他文件访问数据库，打开数据库并在该数据库上运行查询。 我添加了注释来解释一些代码。

Create another folder, models, and add one file to it: note_model.dart. Here's a great tool to easily make models: https://app.quicktype.io/#l=dart.

创建另一个文件夹， models并向其中添加一个文件： note_model.dart 。 这是一个轻松制作模型的好工具： https : //app.quicktype.io/#l=dart 。

NOTE: Keep in mind that models do NOT have to copy the columns in the table. For example, if you have a user id stored in a table as a foreign key, the model probably shouldn’t contain that user id. Instead, the model should use that user id in order to retrieve an actual User object.

注意：请记住，模型不必复制表中的列。 例如，如果您有一个用户ID作为外键存储在表中，则该模型可能不应包含该用户ID。 相反，模型应使用该用户ID来检索实际的User对象。

With our note model created, we can add the final functions to our database file that’ll handle all note related queries.

创建便笺模型后，我们可以将最终功能添加到数据库文件中，以处理所有便笺相关查询。

Let’s get started with streams and BLoCs now. If this is your first time working with these, it can be quite daunting. I promise you though that streams and BLoCs are exceptionally simple once you get past the learning phase.

现在让我们开始使用流和BLoC。 如果这是您第一次使用这些工具，那可能会很艰巨。 我向您保证，一旦您超过了学习阶段，流和BLoC就会异常简单。

The first thing we need is a blocs folder within the data folder. This folder will contain all our BLoCs, as the name suggests. Let's create the files for each BLoC: bloc_provider.dart, notes_bloc.dart, and view_note_bloc.dart. One BLoC per page and one to provide the BLoCs to those pages.

我们需要的第一件事是data文件夹中的blocs文件夹。 顾名思义，此文件夹将包含我们所有的BLoC。 让我们为每个BLoC创建文件： bloc_provider.dart ， notes_bloc.dart和view_note_bloc.dart 。 每页一个BLoC，一个为这些页面提供BLoC。

The bloc_provider is in charge of easily providing our pages with the necessary BLoC and then disposing of it when necessary. Every time we want to use a BLoC, we'll be using the bloc_provider.

bloc_provider负责轻松地为我们的页面提供必要的BLoC，然后在必要时进行处理。 每次我们想要使用BLoC时，我们都会使用bloc_provider 。

Whenever we need a BLoC on one of our pages, we’ll utilize the BlocProvider like this:

每当我们在页面之一上需要BLoC时，我们都将像这样使用BlocProvider ：

Let’s create our notes BLoC which will handle retrieving all our notes and adding new notes to the database. Since our BLoCs are page specific, this BLoC will only be used on the notes page. I’ve commented the code to explain what’s going on.

让我们创建便笺BLoC，它将处理检索所有便笺并将新便笺添加到数据库的过程。 由于我们的BLoC特定于页面，因此该BLoC仅在注释页面上使用。 我已经注释了代码以解释正在发生的事情。

With the notes BLoC created, we have everything we need to create our notes page. This page will display all our notes, and allow us to add new ones. We’ll put the code for our notes page into main.dart. Once again, I've commented on all the necessary pieces of code to explain what's going on.

创建BLoC便笺后，我们拥有创建便笺页面所需的一切。 此页面将显示我们所有的注释，并允许我们添加新的注释。 我们将注释页面的代码放入main.dart 。 我再次评论了所有必要的代码段，以解释正在发生的事情。

Now we need a way to view, edit, save, and delete the notes. This is where the view note BLoC and the view note page come into play. We’ll start with view_note_bloc.dart.

现在，我们需要一种查看，编辑，保存和删除注释的方法。 这是视图注释BLoC和视图注释页面起作用的地方。 我们将从view_note_bloc.dart开始。

Now we can build the actual page to allow us to interact with our notes. The code for this page is going in view_note.dart.

现在，我们可以构建实际页面，以允许我们与笔记进行交互。 该页面的代码在view_note.dart 。

That’s all it takes to work with streams, BLoCs, and SQLite. Using them, we’ve created a super simple app that allows us to create, view, edit, and delete notes. I hope this walkthrough has made you more confident in working with streams. You’ll now be able to implement them into your own apps with ease. If you have any questions, please leave a comment as I’d love to answer them. Thanks for reading.

这就是使用流，BLoC和SQLite所需要的全部。 使用它们，我们创建了一个超级简单的应用程序，使我们可以创建，查看，编辑和删除便笺。 我希望本演练使您对使用流更加自信。 现在，您可以轻松地将它们实现到自己的应用程序中。 如有任何疑问，请留下评论，我很乐意回答。 谢谢阅读。

View the full code here: https://github.com/Erigitic/flutter-streams

在此处查看完整的代码： https ： //github.com/Erigitic/flutter-streams

翻译自: https://www.freecodecamp.org/news/using-streams-blocs-and-sqlite-in-flutter-2e59e1f7cdce/

flutter bloc