DEV Community 👩‍💻👨‍💻

njoee
njoee

Posted on • Updated on

Flutter How To Use Injectable

hi, before we start, this article are continue from preivous post regarding flutter mvvm using provider, injectable, and freeze

MVVM Part 1
MVVM Part 2
The Code Project Is Here...

this article will focused on how to implement the injectable step by step...

now.. Injectable, are the Dependency Injection component that allow us to register an object to Dependency Injection through Annotation, instead of registering dependency with bellow approach

getIt.registerSingleton<TaskRepositoryImpl>(TaskRepositoryImpl());
getIt.registerLazySingleton<MainScreenViewModel>(() =>MainScreenViewModel());
Enter fullscreen mode Exit fullscreen mode

we can simply put annotation on each class declaration of TaskRepositoryImpl and MainScreenViewModel like this

@singleton 
class TaskRepositoryImpl implements ITaskRepository{
  final String baseUrl = "run.mocky.io";

  ... 
}

@injectable
class MainScreenViewModel extends BaseViewModel {
  List<TaskModel>? _tasksData;

  final ITaskRepository _taskRepository = getIt<TaskRepositoryImpl>();

  ...
}
Enter fullscreen mode Exit fullscreen mode

now in our case of WhatToDoApp
Remember This image? How ViewModel use Repository To Manage Many Model
we'd like to have a singleton Repository and late assign of ViewModel layer... so we declare the TaskRepository this way :

@singleton 
class TaskRepositoryImpl implements ITaskRepository{
  final String baseUrl = "run.mocky.io";

  ... 
}
Enter fullscreen mode Exit fullscreen mode

and when we need to use it in the viewmodel we can use it this way

@injectable
class MainScreenViewModel extends BaseViewModel {
  List<TaskModel>? _tasksData;

//=== THIS WAY ===//
  final ITaskRepository _taskRepository = getIt<TaskRepositoryImpl>();

  ...
}
Enter fullscreen mode Exit fullscreen mode

easy right?

no in order to implement this style, we need to import a couple things into our pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  injectable: ^1.5.3
  get_it: ^7.2.0
dev_dependencies:
  # add the generator to your dev_dependencies
  injectable_generator: ^1.5.4
  # add build runner if not already added
  build_runner: ^2.2.0
Enter fullscreen mode Exit fullscreen mode

remember, everytime we declare class with @Injectable or @Singleton annotation, the injectable component actually will generating file that contain a registration to GetIt like bellow:

_i1.GetIt $initGetIt(_i1.GetIt get,
    {String? environment, _i2.EnvironmentFilter? environmentFilter}) {
  final gh = _i2.GetItHelper(get, environment, environmentFilter);
  gh.factory<_i3.MainScreenViewModel>(() => _i3.MainScreenViewModel());
  gh.singleton<_i4.TaskRepositoryImpl>(_i4.TaskRepositoryImpl());
  return get;
Enter fullscreen mode Exit fullscreen mode

in order for injectable generating file content like above, you have to create some new file in my case it called Setup.dart
and the content is like this..

import 'package:get_it/get_it.dart';
import 'package:injectable/injectable.dart';
import 'package:what_to_do_app/Setup.config.dart';


final getIt = GetIt.instance;  

@InjectableInit(  
  initializerName: r'$initGetIt', // default  
  preferRelativeImports: true, // default  
  asExtension: false, // default  
)  

@InjectableInit(generateForDir: ['test'])  
void configureDependencies() => $initGetIt(getIt);  
Enter fullscreen mode Exit fullscreen mode

after we declare the Setup.dart above, we can run command

flutter packages pub run build_runner build --delete-conflicting-outputs
Enter fullscreen mode Exit fullscreen mode

then it will generating file called Setup.config.dart. then that's it.. your Dependency Injection are now ready to serve you.. CHEERS!!!..

Ref:
Injectable
GetIt

Top comments (0)

🌚 Life is too short to browse without dark mode