Architect in project Flutter use BLOC pattern P2

Tram Ho

In today’s article, I will solve some of the problems that the architecture of the previous post include:

  1. Solving of current problems.
  2. Single Instance and Scoped Instance (BLoC access)
  3. Navagation.
  4. RxDart’s Transformers.

1. Solving of current problems.

In the previous post, the first error is that I create a dispose () method in the MoviesBloc class, which is in effect close or dispose all streams to avoid memory leaks. but it’s not called anywhere, this could cause a memory leak. Another error is that I am making a network call inside the build method.

The MovieList class in the code is currently using StatelessWidget, and the build function will be called whenever it is added to the Widget tree. Because I put the function bloc.fetchAllMovies () (see code part 1 ) inside the build function, so it was called many times. Why do I say that because the MovieList class is a class inherited from StatelessWidget, but you already know a StatelessWidget class will call the build function again when that class depends on the class that contains it, if the parent class Update UI then the class MovieList will perform callback of build function. The MovieList class does not have initState and dispose functions like the StatefulWidget class. The initState method calls only once when resource is allocated and the dispose method calls disposing that allocated the resource. Now I will switch the MovieList class inheriting from StatefulWidget. In class movie_list.dart replace the following code:

In the above code I call bloc.fetchAllMovies () in initState method and bloc.dispose () in dispose method of MovieListState class.

Note : Never make network calls or handle db in the build method and make sure you dispose or close the stream.

2. New feature implementation

I will perform more movile detail feature when users click on a movie, you watch the following video:

3. Plan your app flow

Before adding a screen, it is best to write in advance on paper to visualize how your flow is going. For example :

I will explain the flow of the picture above:

  1. Movie List Screen: will display the list of movies in grid list format.
  2. Movie List Bloc: this is the bridge to get data from the repository and transmit it to the Movie List Screen.
  3. Movie Detail Screen: This is the screen where you will see details of the movie.
  4. Repository: This is the center from which the data stream is controlled by the controller.
  5. API provider: Implement the call api.

2. Single Instance and Scoped Instance

On the Movie List Screen screen you can get bloc in 2 ways Single Instance, Scoped Instance. Single Instance can be accessed anywhere on the app while Scoped Instance has limited access, it is only accessible on the screen it is linked to.

Looking at the diagram, Bloc can only access the screen and 2 widgets below the screen. We can use InheritedWidget to keep Bloc in it. InheritedWidget will wrap Screen widget, allowing Screen and the widget under it to be accessible. Single Instance is a way to access Bloc for small apps but working with large apps using Scoped Instance is a great way.

3. Adding the detail screen

Add detail screen for the app. When the user clicks on a movie, the detail screen will display and show information about the film. Create file movie_detail.dart, add the following code:

You may have this class’s constructor need to add some parameters. I will add logic to bring the list screen to the detail screen.

1. Navigation

In Flutter if you want to switch from one screen to another you use Navigator . Implement the navigation logic inside the movie_list.dart file. When you tap a movie, the detail screen will open and the detail screen will show data transferred from the movie list screen to the detail screen.

Now, at the movie detail screen, show the intro from the API:

In the above api we replace the <movie_id> and your_api_key. The response of the api returned is:

For the response above we need to create POJO class. Create trailer_model .dart file in package model.

In the movie_api_provider.dart file, please page the following code:

Update the following code to the file ** repository.dart **:

Now let’s deploy Scoped Instance BLoC. Create file movie_detail_bloc.dart in blocs package, create file movie_detail_bloc_provider.dart also in blocs package. The code of movie_detail_bloc_provider.dart file:

The class is extensible from the InheritedWidget class and provides block access through the context. This context is wrapped in InheritedWidget. Add the code movie_detail_bloc.dart:

I will explain to you a little bit: To get the data trailer from the server we will send the movile id and get the list of trailers. To implement the above idea I will use RxDart – Transformers . I will introduce this part in the lesson.

References :

Share the news now

Source : Viblo