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