Forem: PrateekSharma1712

Dependency Injection(4) - Complete Movie App

PrateekSharma1712 — Sun, 11 Oct 2020 07:24:31 +0000

Dependency Injection

Welcome back,

We are building a Movie App with the best coding practices and tools out there. In previous articles, Datasources and Repositories & UseCase, we've created many classes and instantiated them directly in main.dart.

In this article, we'll see what is Dependency Injection(DI), why we need DI and how can we introduce DI in Flutter application.

What is Dependency Injection?

Before we understand DI, let's see what is a Dependency first. In very simple terms, when a class A needs class B to perform its operations, then class A is dependent on class B and class B acts as a dependency for class A.

Let's see what is dependency and what is dependant in our code so far. Look at the below code:

ApiClient apiClient = ApiClient(Client());
MovieRemoteDataSource dataSource = MovieRemoteDataSourceImpl(apiClient);
MovieRepository movieRepository = MovieRepositoryImpl(dataSource);
GetTrending getTrending = GetTrending(movieRepository);

Here are the dependencies and dependants:

ApiClient depends on Client
MovieRemoteDataSource depends on ApiClient
MovieRepository depends on MovieRemoteDataSource
GetTrending depends on MovieRepository

For every usecase call, you'll have to instantiate all its dependencies like above. This is an overhead and a waste of productive hours for any developer. Not only this is a waste of time, but it might also lead to creating some objects multiple times at multiple places which can lead to consume more memory.

How good it will be if we can rely on some separate dependency provider to provide us with the correct type of dependency whenever required? This dependency provider will also maintain lazy initializations as well as single instances throughout the application.

There are many plugins in Flutter created by the open source contributors for the exact same purpose. We'll use the get_it plugin in this series.

GET_IT

Open pubspec.yaml, add the below dependency and run flutter pub get command

get_it: ^4.0.2

In the di folder, create a new file get_it.dart

Import get_it library, and get the static instance of GetIt in a variable:

import 'package:get_it/get_it.dart';

final getItInstance = GetIt.I;

For the rest of the code in the application, we'll now use getItInstance. In our second article/video, we made network calls, so let's start with that first.

Add the below code in the get_it.dart to initialize Client from http:

getItInstance.registerLazySingleton<Client>(() => Client());

<Client> tells GetIt, what type of object to register.
() is the factory function, that returns the type Client
=> Client() actually initialises the data source. This is the way, we tell GetIt what to initialize.
registerLazySingleton will initialize the instance of Client when it is first used in the app.

ApiClient depends on Client, so let's add that too in get_it.dart:

getItInstance.registerLazySingleton<ApiClient>(() => ApiClient(getItInstance()));

getInstance() in ApiClient(getItInstance()) resolves the dependency for ApiClient.

As, we've asked GetIt to initialize Client for us, so we rely on getItInstance() to provide Client to ApiClient instance.

MovieRemoteDataSource depends on ApiClient, so let's add that in get_it.dart:

getItInstance.registerLazySingleton<MovieRemoteDataSource>(
  () => MovieRemoteDataSourceImpl(getItInstance()));

Till now, I've shown only the registerLazySingleton() method of GetIt, but there are other methods too. We'll see them in the coming articles. Since, the Client, ApiClient, and MovieRemoteDataSource are used throughout the application, so they should have only one instance throughout the application.

Remaining Instances

Let's declare Repository and UseCases. Open get_it.dart and declare:

//1
getItInstance.registerLazySingleton<GetTrending>(() => GetTrending(getItInstance()));
getItInstance.registerLazySingleton<GetPopular>(() => GetPopular(getItInstance()));
getItInstance.registerLazySingleton<GetPlayingNow>(() => GetPlayingNow(getItInstance()));
getItInstance.registerLazySingleton<GetComingSoon>(() => GetComingSoon(getItInstance()));

//2
getItInstance.registerLazySingleton<MovieRepository>(() => MovieRepositoryImpl(getItInstance()));

All UseCases are dependent on MovieRepository, that will be resolved by GetIt.
MovieRepository depends on MovieRemoteDataSource, that will be resolved by GetIt.

We're done with adding all the objects in get_it.dart, let's use them in main.dart.
Open main.dart and instead of a lot of initialisations we did in the previous articles, this time only use GetTrending from getItInstance now:

//1
import 'package:pedantic/pedantic.dart';
//2
import 'di/get_it.dart' as getIt;
//3
unawaited(getIt.init());
//4
GetTrending getTrending = getItInstance<GetTrending>();

With the help of Pedantic package, you can use unawaited that will allow the app to not wait for GetIt initialisation to happen before launching its first frame.
Import get_it file that we created.
Use unawaited and call the init() method to initialize GetIt
Give the type of instance you need, like we need <GetTrending> here.

Now run the app and again there is no difference in the output. You'll see list of trending movies in the console.

GetIt injects the dependency required for us. This was all about using GetIt for Dependency Injection. See you in the next part of the series.

This post was originally published on Medium.

If you loved anything in the article, don’t forget to follow me 🙏🏻. You can reach out to me and follow me on Twitter, GitHub, YouTube.

Repositories and Usecases (3) - Complete Movie App

PrateekSharma1712 — Sat, 03 Oct 2020 16:45:19 +0000

Hello, Glad that you're here.

We are building a Movie App with best coding practices and tools out there. In previous article, datasource doc, I have explained how to create data source and how to make API calls.

In this article, I will show how you can create repositories and usecases to separate data layer with UI layer by introducing domain layer, with the help of abstraction.

This is a companion article for the video tutorial:

Problem

You have seen in previous article, that we were calling data source from main.dart, which is your UI layer. In a long run, this is not right and certainly needs a layer in between. Also, what this does is, it tighly couples the UI layer with API responses, which can change over the time and you'll end up making changes to data layer as well as UI layer.

Solution

We will create repositories in domain layer and they will make decisions to fetch data either from remote data source or local data source. We will also create usecases, basically one usecase for one API or one feature. We'll also create common error classes which will be returned from repository layer and used by UI layer. I'll show you how you can use dartz package to reduce some of the boilerplate code while dealing with common error messages and also clean up some logic written in the repository.

Well, a lot being said, let's get into action.

Create Abstract Repository

In domain/repositories folder, create a file movie_repository.dart

Create an abstract class MovieRespository

abstract class MovieRepository {
  Future<List<MovieEntity>> getTrending();
}

This class will have one method to return Future of List of Movies.

Implement The Repository

In data/repositories folder, create a file movie_repository_impl.dart

Create a class MovieRepositoryImpl that extends MovieRepository

class MovieRepositoryImpl extends MovieRepository {
  //1
  final MovieRemoteDataSource remoteDataSource;

  //2
  MovieRepositoryImpl(this.remoteDataSource);

  //3
  @override
  Future<List<MovieModel>> getTrending() async {
    //4
    try {
      //5
      final movies = await remoteDataSource.getTrending();
      return movies;
    } on Exception {
      return null;
    }
  }
}

You'll need remote data source to make the API calls that we discussed in the previous article. Additionally, you can have local data source as well, that will fetch data from local DB.
A constructor with the remote data source as its parameter.
Since, you've extended this class from abstract class, you will implement the methods here. Notice, you can change the MovieEntity to MovieModel in the implementation, to separate the layers. Also, add async in the function definition.
In try/catch block, you'll make API call to handle any error that is thrown by the API.
Fetch the trending movies and return them.

Call the Repository Method

Open main.dart and create instance of MovieRepository and call the getTrending method. You already have ApiClient and MovieRemoteDataSource.

MovieRepository movieRepository = MovieRepositoryImpl(dataSource);
movieRepository.getTrending();

Run the app. This will work as it worked before when we used data source. But, doing so will not be scalabale. Your UI will have to decide which repository to call to perform certain action. And sometimes, it can be 2-3 calls to perform certain actions, so UI will have to decide to make those calls.

And, UI will always have too many widgets to deal with, so putting this logic in UI is not good. Thatswhy, we'll have usecases to simplify code at UI layer.

UseCase

As I mentioned in the Pilot article, usecases are the features that the app will work on. Like, fetching popular movies, trending movies, movie details, etc. UseCases are simple classes that directly pass the input parameters to fetch details to the repository. UseCase will directly interact with the blocs.

In domain/usecases, create a file get_trending.dart

Create a class GetTrending.

class GetTrending {
  //1
  final MovieRepository repository;

  //2
  GetTrending(this.repository);

  //3 
  Future<List<MovieEntity>> call() async {
    //4
    return await repository.getTrending();
  }
}

This class will accept MovieRepository as final variable
Create constructor, that will have MovieRepository.
call method is already present in all dart objects. So, creating a method with call name, allows you to call this method just with the instance of the class. We'll see this in just a moment.
You'll call getTrending method from repository here. This returns the list of movies.

Open main.dart and this time instead of calling getTrending() from repository, instantiate GetTrending class with movieRepository as its parameter. Then, simply call the instance of GetTrending:

GetTrending getTrending = GetTrending(movieRepository);
getTrending();

When you run, there is absolutely no difference in the output.

Error Handling - Problem

What will happen when instead of proper list of movies, the API call has returned with error. As you recall from the call in MovieRepositoryImpl, I returned null in case of exception. There are two problems with this approach:

To show on UI based on null, you'll have to check null values wherever you call the usecase. This will be tedious when the app grows.
Also, there will be only two possibilities of usecase to return, either List<MovieEntity> or null. With null, you can only show one generic message to the UI, so how you'll show different messages to UI based on the type of error from API.

if (movies != null) {
  /// show UI widget to display list of movies
} else {
  /// show generic error message
  /// or
  /// do nothing
}

Error Handling - Solution

Use dartz plugin. This plugin is awesome and at first it is hard to understand, but there is a very simple underlying concept.

Return Left when error, Right when success. Left and Right are object/data holders.

Let's add dartz dependency in pubspec.yaml

dartz: ^0.9.1

Run pub get command to update the dependencies.

flutter pub get

Now, update MovieRepository. Open movie_repository.dart.
Change the dependency of getTrending method to return Either type, with left as AppError and right as List of MovieEntity.

Future<Either<AppError, List<MovieEntity>>> getTrending();

AppError is a class that just holds a error message.

In domain/entities folder, create a file app_error.dart

Create a class AppError and extend it with Equatable

class AppError extends Equatable {
  //1
  final String message;

  const AppError(this.message);

  //2
  @override
  List<Object> get props => [message];
}

Declare field with String type, that will hold any error message.
Override props method to hold message, if required to compare at later stage.

Let's get back to repositories. We've updated the declaration of getTrending() in abstract class, so by this time implementation of MovieRepository has errors. Let's correct them by updating the signature.

@override
//1
Future<Either<AppError, List<MovieModel>>> getTrending() async {
  try {
    final movies = await remoteDataSource.getTrending();
    //2
    return Right(movies);
  } on Exception {
    //3
    return Left(AppError('Something went wrong'));
  }
}

Update the method signature same as MovieRepository's and again change MovieEntity to MovieModel to maintain level of abstraction.
When API has returned with success, wrap the response with Right, in this case wrap movies in Right.
In case of Exception, you can return AppError with wrapping with Left.

Last thing before we run this is, update the UseCase as well.
You only have to change the signature of the GetTrending's call method.

Future<Either<AppError, List<MovieEntity>>> call() async {
  return await repository.getTrending();
}

Open main.dart and read the response of getTrending(). As you'll read the response of a Future returning method, you need to right await. Also, add async to the main function.

void main() async {
  ApiClient apiClient = ApiClient(Client());
  MovieRemoteDataSource dataSource = MovieRemoteDataSourceImpl(apiClient);
  MovieRepository movieRepository = MovieRepositoryImpl(dataSource);
  GetTrending getTrending = GetTrending(movieRepository);
  //1
  final Either<AppError, List<MovieEntity>> eitherResponse = await getTrending();
  //2
  eitherResponse.fold(
    (l) {
      //3
      print('error');
      print(l);
    },
    (r) {
      //4
      print('list of movies');
      print(r);
    },
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      //5
      home: Container(),
    );
  }
}

Create a final variable to hold the response of GetTrending's call method.
Use fold operator to get either of left or right value. Only, one will be returned at a time.
When its an error, left will be called and print the message.
When its a success, right will be called and prints the movies.
Since, dartz plugin also contains State class, you'll have error using it with in a file having stateful widget. This is not a problem, because you'll call usecases from Blocs only.

More UseCases

As in our last part, we had created 3 more methods in the data source, let's create usecases for all of them and methods to repositories as well.

Open movie_repository.dart and add 3 more methods for popular, playing now and coming soon movies:

Future<Either<AppError, List<MovieEntity>>> getPopular();
Future<Either<AppError, List<MovieEntity>>> getPlayingNow();
Future<Either<AppError, List<MovieEntity>>> getComingSoon();

Open movie_repository_impl.dart and override the 3 methods:

@override
Future<Either<AppError, List<MovieEntity>>> getComingSoon() async {
  try {
    final movies = await remoteDataSource.getComingSoon();
    return Right(movies);
  } on Exception {
    return Left(AppError('Something went wrong'));
  }
}

@override
Future<Either<AppError, List<MovieEntity>>> getPlayingNow() async {
  try {
    final movies = await remoteDataSource.getPlayingNow();
    return Right(movies);
  } on Exception {
    return Left(AppError('Something went wrong'));
  }
}

@override
Future<Either<AppError, List<MovieEntity>>> getPopular() async {
  try {
    final movies = await remoteDataSource.getPopular();
    return Right(movies);
  } on Exception {
    return Left(AppError('Something went wrong'));
  }
}

The other 3 methods are carbon copy of the getTrending(), only change will be what method they will invoke from the data source. And, in this case, it's no brainer, because names of the methods in data source and repository are same.

You can change what message to return in case of error in each of the methods.

Duplicate the GetTrending UseCase 3 times and name them GetPopular, GetPlayingNow and GetComingSoon.
In call() call the respective methods from repository:

For GetPopular call getPopular()

For GetPlayingNow call getPlayingNow()

For GetComingSoon call getComingSoon()

Caveat

Imagine you're the sole developer in this project and you know everything about how to create UseCase and what does the call() method in usecase does. But, months later or years later, another couple of developers join you and they want to create UseCase. Will they remember to make call() method in the usecase. Probably not. They could end up creating a method with different name and start calling the method instead in the Blocs. This will bring 2 different set of ways for implementing exact same thing. This is not good for code consistency in a long term.

UseCase Abstract Class

In domain/usecases folder, create a file usecase.dart.

Create an abstract class UseCase

//1
abstract class UseCase<Type, Params> {
  //2
  Future<Either<AppError, Type>> call(Params params);
}

UseCase class takes 2 generics - Type that says what will be the success response type and Params that says what are the parameters to make API calls.
You can relate this signature, as it is same as GetTrending's. Except that, now it is generic for any returned object and any type of parameters.

This type of code is very important in bigger projects for maintainability.

It is difficult to future proof code with assumptions, so it might be hard for you to completely understand the things right now. Let me explain with the help of examples.

Till now we've created 4 usecases all returning List<MovieEntity>. In future, you'll return MovieDetail, List<CastEntity>, etc. So, specifying in the UseCase definition itself, what it will return will be good.

Till now we've called APIs without any extra parameter other than TMDb API Key. In future, you'll search movies by query text and call movie detail api with Movie ID, then you'll require the Params as well.

For calling APIs with Params, you'll create separate classes to hold Params for APIs that require query parameters. For those API's that don't require query parameters, we'll create NoParams class.

In domain/entities folder, create a file no_params.dart.

Create a class NoParams extending Equatable:

class NoParams extends Equatable {

@override
  List<Object> get props => [];
}

Update Usecases

Extend all the usecases with UseCase class

//1
class GetTrending extends UseCase<List<MovieEntity>, NoParams> {
  final MovieRepository repository;

  GetTrending(this.repository);

  //2
  @override
  //3
  Future<Either<AppError, List<MovieEntity>>> call(NoParams noParams) async {
    return await repository.getTrending();
  }
}

Define the Type that GetTrending will return and Parameters that it takes(if any)
Add @override annotation as now it is declared in parent UseCase class.
call() now takes in NoParams, as explained before, this will change based on type of API call being made.

Repeat these steps for the other 3 usecases. Absolutely, no brainer in that.

You can try running after making these changes, absolutely nothing will change as far as output is concerned. But, you need to now change the getTrending() in main.dart to getTrending(NoParams()):

final Either<AppError, List<MovieEntity>> eitherResponse = await getTrending(NoParams());

This was all about creating repository and usecases.
This post was originally published on Medium.

If you loved anything in the article, don’t forget to follow me 🙏🏻. You can reach out to me and follow me on Twitter, GitHub, YouTube.

DataSources (2) - Complete Movie App

PrateekSharma1712 — Mon, 28 Sep 2020 11:28:12 +0000

Hello, Glad that you're here.

We are building a Movie App with the best coding practices and tools out there. In the previous video, I have explained how our folder structure is going to be and we will use Clean architecture concepts.

This is a companion article for the video tutorial:

Create TMDb API Key

Since we are using TMDb API to fetch the movies, let's first create TMDb API Key. Open https://www.themoviedb.org/login and register or login on the website.

Once logged in, you can go to settings by visiting https://www.themoviedb.org/settings/account. From the left-side menu, open the API section and copy the value under API Key (v3 auth). Also, read the URL of Example API Request because you'll need the base URL while making the API calls.

Open project and create a file api_constants.dart in data/core folder and place the below code:

class ApiConstants { 
  //1
  ApiConstants._();

  //2
  static const String BASE_URL = "https://api.themoviedb.org/3/";
  //3
  static const String API_KEY = "f33521953035af3fc3162fe1ac22e60c";
  //4
  static const String BASE_IMAGE_URL = "https://image.tmdb.org/t/p/w500";
}

Since this class should not be instantiated from outside, you should declare its constructor as private.
This URL will always be prepended before specific URLs.
You'll also put the API key in this file. I recommend, that you create your own because I may turn it down after this series.
The image paths that you get from TMDb API are in this format zuW6fOiusv4X9nnW3paHGfXcSll.jpg. In order to load images you've to prepend the BASE_IMAGE_URL.

TMDb API Response

Head on to https://developers.themoviedb.org/3/ and select TRENDING from the left menu. On the right side, you can see the details. You can explore more on this, but 2 things that are very important are media_type and time_window. As this is a movie app, the media type will be a movie and you can select a time window as day. Open the Try It Out tab and select movie as media_type, day as time_window, and put the API key in the API field. Now, you can press the SEND REQUEST button and you'll see the request and response. You can read the whole URL and verify the BASE_URL.

Let's copy this response and create a dart model from it. Open https://javiercbk.github.io/json_to_dart/ and paste the response in the text box. Name the class as MoviesResultModel.

Create a dart file movies_result_model.dart in data/models folder and paste the code generated from jsonToDart. Have a look at the fields that are created. The class generated has a list of movies. As I will not be showing you pagination, so you can delete fields related to pagination like page, totalPages and totalResults. To further simplify code, you can take the Results class out of this file and create a separate file named movie_model.dart in data/models. Here are the two classes that you'll have:

class MoviesResultModel {
  final List<MovieModel> movies;

  MoviesResultModel({this.page, this.movies});

  factory MoviesResultModel.fromJson(Map<String, dynamic> json) {
    List tempMovies = new List<MovieModel>();
    if (json['results'] != null) {
      json['results'].forEach((v) {
        tempMovies.add(MovieModel.fromJson(v));
      });
    }

    return MoviesResultModel(movies: tempMovies);
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.movies != null) {
      data['results'] = this.movies.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class MovieModel extends MovieEntity {
  int id;
  bool video;
  int voteCount;
  double voteAverage;
  String title;
  String releaseDate;
  String originalLanguage;
  String originalTitle;
  List<int> genreIds;
  String backdropPath;
  bool adult;
  String overview;
  String posterPath;
  double popularity;
  String mediaType;

  const MovieModel({
    this.popularity,
    this.voteCount,
    this.video,
    this.posterPath,
    this.id,
    this.adult,
    this.backdropPath,
    this.originalLanguage,
    this.originalTitle,
    this.genreIds,
    this.title,
    this.voteAverage,
    this.overview,
    this.releaseDate,
    this.mediaType,
  });

  Results.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    video = json['video'];
    voteCount = json['vote_count'];
    voteAverage = json['vote_average'];
    title = json['title'];
    releaseDate = json['release_date'];
    originalLanguage = json['original_language'];
    originalTitle = json['original_title'];
    genreIds = json['genre_ids'].cast<int>();
    backdropPath = json['backdrop_path'];
    adult = json['adult'];
    overview = json['overview'];
    posterPath = json['poster_path'];
    popularity = json['popularity'];
    mediaType = json['media_type'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['popularity'] = this.popularity;
    data['vote_count'] = this.voteCount;
    data['video'] = this.video;
    data['poster_path'] = this.posterPath;
    data['id'] = this.id;
    data['adult'] = this.adult;
    data['backdrop_path'] = this.backdropPath;
    data['original_language'] = this.originalLanguage;
    data['original_title'] = this.originalTitle;
    data['genre_ids'] = this.genreIds;
    data['title'] = this.title;
    data['vote_average'] = this.voteAverage;
    data['overview'] = this.overview;
    data['release_date'] = this.releaseDate;
    data['media_type'] = this.mediaType;
    return data;
  }
}

Add 2 dependencies - http and equatable

equatable: ^1.2.0
http: ^0.12.1

In dart, comparison of objects is easier when you use an equatable plugin. HTTP plugin is used to make network calls.

Now, think of the fields you'll need in the application because no way you're using all of the fields together at a time on screen. The fields that will be required will be mostly id, posterPath, backdropPath, title, voteAverage, releaseDate, overview. Some fields are still extra but you'll have to use them later in the series when we do favorite movies.

Now, In domain/entities folder create MovieEntity class and declare the above fields as final. Extend this class with Equatable. Override props method with id and title fields. Also override stringify method, so that you can see the id and title when you print the object.

Your MovieEntity class should look like this:

import 'package:equatable/equatable.dart';
import 'package:flutter/foundation.dart';

class MovieEntity extends Equatable {
  final String posterPath;
  final int id;
  final String backdropPath;
  final String title;
  final num voteAverage;
  final String releaseDate;
  final String overview;

  const MovieEntity({
    @required this.posterPath,
    @required this.id,
    @required this.backdropPath,
    @required this.title,
    @required this.voteAverage,
    @required this.releaseDate,
    this.overview,
  }) : assert(id != null, 'Movie id must not be null');

  @override
  List<Object> get props => [id, title];

  @override
  bool get stringify => true;
}

To properly tie MovieModel and MovieEntity and execute Clean architecture, extend MovieModel with MovieEntity. This will help in separating out Domain and Data Layer.

Now that MovieModel is extending MovieEntity, there are some changes that have to be done to MovieModel.

Make all the fields as final.
Update fromJson method to factory method and instead of assigning values directly return MovieModel object with new values.
Use a super constructor to assign the values to MovieEntity. This way whenever you convert MovieModel to MovieEntity instance you can get the required fields with correct non-null values.

Here is how the updated MovieModel will look.

import '../../domain/entities/movie_entity.dart';

class MovieModel extends MovieEntity {
  final double popularity;
  final int voteCount;
  final bool video;
  final String posterPath;
  final int id;
  final bool adult;
  final String backdropPath;
  final String originalLanguage;
  final String originalTitle;
  final List<int> genreIds;
  final String title;
  final num voteAverage;
  final String overview;
  final String releaseDate;
  final String mediaType;

  const MovieModel({
    this.popularity,
    this.voteCount,
    this.video,
    this.posterPath,
    this.id,
    this.adult,
    this.backdropPath,
    this.originalLanguage,
    this.originalTitle,
    this.genreIds,
    this.title,
    this.voteAverage,
    this.overview,
    this.releaseDate,
    this.mediaType,
  }) : super(
          id: id,
          title: title,
          backdropPath: backdropPath,
          posterPath: posterPath,
          releaseDate: releaseDate,
          voteAverage: voteAverage,
          overview: overview,
        );

  factory MovieModel.fromJson(Map<String, dynamic> json) {
    return MovieModel(
      popularity: json['popularity'],
      voteCount: json['vote_count'],
      video: json['video'],
      posterPath: json['poster_path'],
      id: json['id'],
      adult: json['adult'],
      backdropPath: json['backdrop_path'],
      originalLanguage: json['original_language'],
      originalTitle: json['original_title'],
      genreIds: json['genre_ids'].cast<int>(),
      title: json['title'],
      voteAverage: json['vote_average'],
      overview: json['overview'],
      releaseDate: json['release_date'],
      mediaType: json['media_type'],
    );
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['popularity'] = this.popularity ;
    data['vote_count'] = this.voteCount;
    data['video'] = this.video;
    data['poster_path'] = this.posterPath;
    data['id'] = this.id;
    data['adult'] = this.adult;
    data['backdrop_path'] = this.backdropPath;
    data['original_language'] = this.originalLanguage;
    data['original_title'] = this.originalTitle;
    data['genre_ids'] = this.genreIds;
    data['title'] = this.title;
    data['vote_average'] = this.voteAverage;
    data['overview'] = this.overview;
    data['release_date'] = this.releaseDate;
    data['media_type'] = this.mediaType;
    return data;
  }
}

When you're declaring any field as double in models, be completely sure that it'll always be returned as double. If it is returned as an int, convert library fails to parse it. Either you can declare this as num or use toDouble function with safe operators.
json['popularity']?.toDouble() ?? 0.0
This will parse int to double if int is returned from API. As well as, if it is returned as null, 0.0 will be the default value of popularity.

Additionally, you can assign more default values to all the model fields.

Create DataSource

Let's focus on making network calls now to fill up the models and entities.

Create a file movie_remote_data_source.dart in data/data_sources folder.

Create an abstract class MovieRemoteDataSource with one function as of now. This method will call TMDb API for trending movies by day.

abstract class MovieRemoteDataSource {
  Future<List<MovieModel>> getTrending();
}

In the same file add the implementation of the abstract class

class MovieRemoteDataSourceImpl extends MovieRemoteDataSource {
  @override
  Future<List<MovieModel>> getTrending() async {
    //TODO: Fetch Trending Movies
  }
}

Declare a final field _client at the top and create a constructor of MovieRemoteDataSource with an instance of Client from http package.

class MovieRemoteDataSourceImpl extends MovieRemoteDataSource {
  final Client _client;

  MovieRemoteDataSourceImpl(this._client);
}

GetTrending Movies

Now, we will use _client to make get API call for trending movies.

@override
Future<List<MovieModel>> getTrending() async {
  final response = await _client.get(
    //1
    '${ApiConstants.BASE_URL}trending/movie/day?api_key=${ApiConstants.API_KEY}',
    //2
    headers: {
      'Content-Type': 'application/json',
    },
  );

  //3
  if (response.statusCode == 200) {
    //4
    final responseBody =  json.decode(response.body);
    //5
    final movies = MoviesResultModel.fromJson(responseBody).movies;
    print(movies);
    //6
    return movies;
  } else {
    //7
    throw Exception(response.reasonPhrase);
  }
}

Create the get URL Path - https://api.themoviedb.org/3/trending/movie/day?api_key=f33521953035af3fc3162fe1ac22e60c.
Keep headers as json because TMDb API will result in JSON format.
Check whether the service has given a success response.
Parse the JSON response and get the body. The body will have the exact JSON that we copied and pasted in the json2Dart tool to create models.
You'll now use the fromJson factory method to parse the JSON response to the model. Notice, we only require a list of movies, hence after parsing you'll only get movies from the MovieResultModel
Finally, return the movies.
In case the service has responded with error results, you'll throw an exception from the data layer itself.

Call the GetTrending Function

Till the time I don't create UI, I can show you that our network calls are working fine and giving us desired results by directly calling from main.dart.

Open main.dart and before calling runApp(MyApp()) you can call getTrending() function by below snippet:

//1
MovieRemoteDataSource dataSource = MovieRemoteDataSourceImpl(Client());
//2
dataSource.getTrending();

Instantiate DataSource and pass the Client from http package.
Call the function. Once you run the app, in the console you can see the movies list with each movie's id and title, because in props we passed id and title.

GetPopular Movies

Let's add one more API call quickly. Create another function getPopular which will call different API to fetch popular movies. Add getPopular() in abstract class as below:

abstract class MovieRemoteDataSource {
  Future<List<MovieModel>> getTrending();
  Future<List<MovieModel>> getPopular();
}

Implement getPopular() method as below. Fortunately, there is only URL Path change, which is now movie/popular.

@override
Future<List<MovieModel>> getPopular() async {
  final response = await _client.get(
    '${ApiConstants.BASE_URL}movie/popular?api_key=${ApiConstants.API_KEY}',
    headers: {
      'Content-Type': 'application/json',
    },
  );

  if (response.statusCode == 200) {
    final responseBody =  json.decode(response.body);
    final movies = MoviesResultModel.fromJson(responseBody).movies;
    print(movies);
    return movies;
  } else {
    throw Exception(response.reasonPhrase);
  }
}

You can run this method as well, in the same manner as you called getTrending() from main.dart.

Core API Client

Even though till now we have added 2 methods only, but already you might have seen repeated code. So, let's move out common code to a separate file.

Create api_client.dart in data/core.

In ApiClient class add Client as its only final field and also create the constructor with it.

class ApiClient {
  final Client _client;

  ApiClient(this._client);
}

Create a get method with dynamic as return type, because this can return any type of model.

dynamic get(String path) async {
  final response = await _client.get(
    '${ApiConstants.BASE_URL}$path?api_key=${ApiConstants.API_KEY}',
    headers: {
      'Content-Type': 'application/json',
    },
  );

  if (response.statusCode == 200) {
    return json.decode(response.body);
  } else {
    throw Exception(response.reasonPhrase);
  }
}

We've moved most of the code to this method and now we can update the data source implementation with very simple code. You'll now use ApiClient instead of the Client.

class MovieRemoteDataSourceImpl extends MovieRemoteDataSource {
  //1
  final ApiClient _client;

  MovieRemoteDataSourceImpl(this._client);

  @override
  Future<List<MovieModel>> getTrending() async {
    //2
    final response = await _client.get('trending/movie/day');
    return MoviesResultModel.fromJson(response).movies;
  }

  @override
  Future<List<MovieModel>> getPopular() async {
    //3
    final response = await _client.get('movie/popular');
    return MoviesResultModel.fromJson(response).movies;
  }

}

Instead of Client, use ApiClient now.
Call the get method from ApiClient with the path required to fetch trending movies.
Call the get method from ApiClient with the path required to fetch popular movies.

This was all about making network calls.

This post was originally published on Medium

If you loved anything in the article, don’t forget to follow me 🙏🏻. You can reach out to me and follow me on Twitter, GitHub, YouTube.

Pilot Episode (1) - Complete Movie App

PrateekSharma1712 — Mon, 28 Sep 2020 08:35:11 +0000

Hey, Glad that you’re here.

I am bringing a series of videos and articles for you to teach you how to build an Industry Standard Flutter Application from scratch. I am also putting up companion articles.

In this series, you’ll learn basic as well as advanced topics in Flutter. At the end of this series, you’ll have successfully built an industry-standard application with very good UI and a scalable code-base with some excellent coding practices.

You’ll use some of the basic and most commonly used Widgets and Plugins, as well as you’ll also work on some useful animations, complex widgets, and state management techniques, preferably BLoC.

Over the series of articles and videos, I’ll show you how to implement the clean architecture, bloc, API calls, error handling, hive storage, dependency injection, language management, and many more important things needed to create an application.

You’ll create a responsive mobile application that doesn’t pixel out on various mobiles of different densities and resolutions. Since, the design that I have in hand is for Mobile Portrait, hence this app will not support landscape and web versions. That means, this app can run on landscape mode and browser but will render its components in a bad way.

Having said that, if you need to learn the landscape and web version of this application, do let me know and I will try to create a design that works on landscape and web.

So, Let’s get started.

What are we building?

It would be too verbose here to explain each and everything in the article, it would be much easier for you to see the final outcome yourself. Please visit the video and come back again.

How are we building?

Developing apps in Flutter gives you free hand to choose the architecture and libraries. With so many options in your hand, you’ll often donate a lot of your time in selecting a specific architecture. The most popular and trustworthy architecture is Clean architecture, where you’ve separate layers for Presentation, Domain, and Data.

That’s why I will also teach you how to build applications using Clean architecture.

Let’s create some folders and files. First, you’ll go to the terminal and run the command

This will create an empty Flutter project with the lib folder.

Presentation Layer

We all love making UI in Flutter, and it wouldn’t be wrong to say that one of the primary reasons people have switched to Flutter is the ease with which you can create cool and flexible UIs. While it is easy to write Flutter widgets, it is even easier to put business logic and taking critical decisions in your widgets.

The presentation Layer mainly consists of Widgets. Many widgets combine together to create a screen. A screen in Clean architecture is considered as Journey. For example, when the user moves to Movie Detail Screen, he/she is supposed to be in Movie Detail Journey.

Create presentation folder in lib directory. Inside presentation folder, create journeys, widgets, blocs and themes folders.

Journeys will contain user journeys like Home Screen, Movie Detail, Watch Trailers Screen, Favorite Movies Screen, Navigation Drawer, Loading Screen. Each of these journeys will surely have a screen dart file and small widgets that will be used in making the screen.

Widgets folder in the presentation folder will consist of small UI building blocks which will be used throughout your application across the different screen like Button, Logo, App Bar, and so on. You’ll see more as we go in these series.

Blocs will be the heart of your UI, where you’ll make decisions about what and when to show in the UI. For example, till the time movie details are fetched from API, UI will show a loader and once details are fetched from the API, you’ll see the movie details on the screen. More on that, when we go in-depth of each of these things.

All the themes, be it Text styles, colors, button themes, dialog themes will go in the Themes folder. So, there will be one place to maintain all theme-related information.

Data Layer

Create data folder in lib directory. Inside data folder, create data_sources, repositories, models, tables and core folders.

Data Layer is exposed to outside world, whose sole responsibility is to bring data from Rest APIs, Local Database, or Firebase, basically, any service that gives data to your application.

Based on the application features, different APIs, and local database that it has to fetch data from, you can have as many DataSources as required. Each of them will only interact with repositories.

Repositories will make the decision whether to fetch data from a remote data source or local data source, behaving as a single source of truth for the UI. UI should not know where the data is fetched. In Data Layer, repositories will be implementations of repository abstract classes from the domain layer. More on that, in the Domain Layer section.

Models and Tables are again extensions of the entities present in the Domain Layer. Models are mapped directly with the API response and Tables are directly mapped with the Database response. You’ll learn more about them when we start actual coding.

You’ll create a Core folder as well, to segregate the common code of fetching and parsing remote data.

Domain Layer

Now, you’ve one layer for UI interaction and other for API interaction. The domain layer acts as a communication channel between the Data Layer and Presentation Layer.

Create domain folder in lib directory. Inside domain folder, create entities, repositories, usecases folders.

Entities represent data that will be required by the UI. These entities will be extended by Models and Tables in Data Layer, to maintain a level of abstraction.

Repositories in the domain layer are abstract classes which only tell what data has to fetch. But, the decision of how and from where data has to fetched, is made by the repository implementations in the Data layer.

UseCases consists of the features that the app will work on. Like, fetching popular movies, trending movies, movie details, etc. UseCases are simple classes that directly pass the input parameters required to fetch details to the repository. UseCase will directly interact with the blocs. You’ll understand more when we actually start coding.

DI

Create di folder in lib directory.

Here you can keep the injectors that will be used throughout the application by any of the layers.

Common

Create common folder in lib directory.

Similarly, here you’ll put the constants, extension files, and other utility code. The files in common will also be used throughout the application.
This is it for this article. See you in the next part of this series.

This post was originally published on Medium

If you loved anything in the article, don’t forget to follow me 🙏🏻. You can reach out to me and follow me on Twitter, GitHub, YouTube.