3 Popular Methods to Implement Dependency Injection in Flutter

In Flutter, DI is crucial for managing dependencies efficiently, especially as applications grow in complexity. It allows for the injection of mock dependencies during testing, ensuring focused and reliable tests. DI promotes the reuse of services and components, reducing redundancy and enhancing modularity. By using DI, developers can create scalable, maintainable, and testable applications more effectively.

This guide will equip you with the knowledge to implement DI in Flutter, leading to better-structured and more manageable projects.

>> Read more about Flutter coding:

• How to Use Flutter Bloc for State Management in Flutter Apps?
• The In-depth Guide for Mastering Navigation in Flutter
• Step-by-Step Tutorial to Master Flutter TextField Validation

Comparison: With and Without Dependency Injection

Dependency Injection (DI) is a design pattern that separates the creation of an object's dependencies from its behavior, allowing dependencies to be provided externally. This approach passes the required dependencies into a class through its constructor, properties, or methods.

Here is some quick comparison when our Flutter project uses and doesn’t use Dependency Injection:

3 Methods to Implement Dependency Injection in Flutter

Dependency Injection is a crucial pattern for managing dependencies in Flutter applications, ensuring that your code is more maintainable, testable, and scalable. Flutter offers several popular DI methods and packages that facilitate this pattern, each with its own set of features and use cases. Among the most widely used are Provider, GetIt, and Riverpod.

In the following sections, we will provide an overview of these DI methods, explaining their functionalities and how they can be integrated into your Flutter projects to improve code quality and development efficiency.

Using the Provider Package

The Provider package is a popular and powerful tool for dependency injection and state management in Flutter. It simplifies the process of passing data down the widget tree and allows for efficient and easy state management. Provider is built on top of the InheritedWidget and offers a clean and simple syntax to manage dependencies and state across your Flutter application.

• Step 1: Setting Up Provider

To use the Provider package, add it to your *pubspec.yaml* file:

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.1.2

Or use the Flutter CLI to add the latest package version:

flutter pub add provider

• Step 2: Creating Mock Services

Now let’s create two simple mock services class (ApiService and LoggingService) to represent the services that need to inject to our project:

class ApiService {
  String fetchData() {
    return "Data fetched from API";
  }
}

class LoggingService {
  void log(String message) {
    print("Log: $message");
  }
}

• Step 3: Injecting Services with MultiProvider

This ApiService will return a simple String and the LoggingService will print a message we provide. So, we can focus on implementing Dependency Injection with Provider for our project.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'services/api_service.dart';
import 'services/logging_service.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        Provider<ApiService>(create: (_) => ApiService()),
        Provider<LoggingService>(create: (_) => LoggingService()),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final apiService = Provider.of<ApiService>(context);
    final loggingService = Provider.of<LoggingService>(context);

    // Log a message using the LoggingService
    loggingService.log("Fetching data from API");

    return Scaffold(
      appBar: AppBar(
        title: Text("Using Provider with Two Services"),
      ),
      body: Center(
        child: Text(apiService.fetchData()),
      ),
    );
  }
}

 In this example, both ApiService and LoggingService are injected into the widget tree using the Provider package. The MyHomePage widget then consumes both services, fetching data from ApiService and logging a message using LoggingService. This approach demonstrates how to manage multiple dependencies efficiently with the Provider package in a Flutter application.

Using the GetIt Package

Alongside Provider, which mainly focuses on reducing boilerplate code and managing state, the GetIt package is designed specifically for Dependency Injection (DI) in Flutter. While Provider manages and consumes data using a provider class as the source of truth for your app's state, DI is not its primary purpose. For a more focused approach to DI, GetIt is highly effective.

Using the GetIt package for DI in Flutter involves registering your services and accessing them from anywhere in your application. GetIt acts as a simple Service Locator for Dart and Flutter projects and can replace InheritedWidget or Provider for accessing objects from your UI.

• Step 1: Setting Up GetIt

To use the GetIt package, add it to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  get_it: ^7.2.0

Alternatively, you can use the Flutter CLI to add the latest version of the package:

flutter pub add get_it

import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';
import 'services/api_service.dart';
import 'services/logging_service.dart';

final GetIt getIt = GetIt.instance;

void setup() {
  getIt.registerSingleton<ApiService>(ApiService());
  getIt.registerSingleton<LoggingService>(LoggingService());
}

void main() {
  setup();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final apiService = GetIt.instance.get<ApiService>();
    final loggingService = GetIt.instance.get<LoggingService>();

    loggingService.log("Fetching data from API");

    return Scaffold(
      appBar: AppBar(
        title: Text("Using GetIt"),
      ),
      body: Center(
        child: Text(apiService.fetchData()),
      ),
    );
  }
}

dependencies:
  flutter:
    sdk: flutter
  riverpod: 2.5.1

flutter pub add riverpod

final apiServiceProvider = Provider<ApiService>((ref) {
  return ApiService();
});

final loggingServiceProvider = Provider<LoggingService>((ref) {
  return LoggingService();
});

void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyHomePage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final apiService = ref.read(apiServiceProvider);
    final loggingService = ref.read(loggingServiceProvider);

    // Log a message using the LoggingService
    loggingService.log("Fetching data from API");

    return Scaffold(
      appBar: AppBar(
        title: Text("Using Riverpod with Two Services"),
      ),
      body: Center(
        child: Text(apiService.fetchData()),
      ),
    );
  }
}