The lyrics fetched from the Genius are displayed on the Webview, and those added by a user are shown on the custom screen with an option to edit them. And since I will only describe some specific BLoC components, you can see how I have implemented the Data Source and Repository layer there.
#Flutter bloc update
I have also decided to allow a user to create, update and delete their lyrics to test how the BLoC pattern will work with multiple data sources. It should enable the user to search for lyrics from the Genius API. I have created a simple app for fetching song lyrics. After receiving a response, the BLoC should show the SuccessState when the login has been completed successfully, or ErrorState when the user has entered the wrong credentials, or a different error has occurred. Every BLoC has its initial state, which is defined upon creation.įor example, if we wanted to implement a login screen, we would need to pass LoginEvent with login details when the user clicks on the appropriate button. States that show how the UI should react to change of data. The BLoC pattern reliess on two main components, presented below.Įvents that are passed from UI, which contains information about a specific action that has to be handled by the BLoC. So now, when we know all the basic structures, we should understand how these layers communicate with each other. These are classes that provide the data for the application, from all the data sources, including the database, network, shared preferences, etc. It is responsible for fetching pieces of information from single or multiple data sources and processing it for the UI classes.ĭata sources. The BLoC listens to events passed from it, and after receiving a response, it emits an appropriate state. These are the classes that act as a layer between data and UI components. Since in Flutter all parts of the User Interface are Widgets, we can say that all of them belong in this layer.īLoC. It holds all the application's components that are visible to the user and could be interacted with. In the BLoC pattern, we can distinguish four main layers of application: UI. I will describe briefly all BLoC components, but if you want to dive deeper, the documentation is the best place to go. It is well-written, with tons of examples that could be applied to most use-cases. I would also recommend the official documentation of these libraries. If you want to start creating apps with the BLoC architecture I would strongly recommend two libraries that make working with it much easier: bloc and flutter_bloc. It is created based on Streams and Reactive Programming.
It was created by Google and introduced at Google I/O 2018. I have tested some of them in simple projects, and the one I immediately fell in love with was BLoC.īLoC stands for Business Logic Controller. I saw that a lot of things have changed, and a lot of new architecture patterns came into play. Since my skills in web development ended on writing "Hello World" in HTML, I decided to give Flutter another chance. So it was either Flutter or React Native. So I abandoned my Flutter projects and waited for what the time will bring.Recently, I had to create a multiplatform application. It was hard for me to easily structure my app, and I had to create custom logic for good communication between components. It was very unstable when I started working with it, and what put me off was the lack of architecture patterns. My first experience with Flutter was not great.