Learn Dependency Injection | App Architecture

Dependency injection is a design pattern that allows you to provide an object’s dependencies from outside the object, rather than having the object create them itself. In Flutter, this means you can supply services, repositories, or other resources to widgets or classes without tightly coupling them together. This approach offers several advantages:

Increases code modularity by separating object creation from usage;
Makes it easier to swap out implementations, such as using mock objects for testing;
Improves maintainability by reducing tight coupling between classes;
Facilitates scalability as your app grows in complexity.

The most common approaches to dependency injection in Flutter include constructor injection, where dependencies are passed as parameters to constructors, and using dependency injection frameworks or service locators. Constructor injection is often preferred for its simplicity and transparency, especially in smaller apps or at the widget level.

main.dart


              12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
            
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp(
    repository: CounterRepository(),
  ));
}

// A simple repository that provides a counter value.
class CounterRepository {
  int fetchInitialValue() => 5;
}

// Injecting the repository via the constructor.
class MyApp extends StatelessWidget {
  final CounterRepository repository;

  const MyApp({Key? key, required this.repository}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterScreen(repository: repository),
    );
  }
}

class CounterScreen extends StatefulWidget {
  final CounterRepository repository;

  const CounterScreen({Key? key, required this.repository}) : super(key: key);

  @override
  State<CounterScreen> createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  late int _counter;

  @override
  void initState() {
    super.initState();
    // Use the injected repository to get the initial value.
    _counter = widget.repository.fetchInitialValue();
  }

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('DI Example')),
      body: Center(child: Text('Counter: [1m$_counter[0m')),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

By injecting dependencies through constructors, as shown in the example, you gain full control over which objects are used throughout your widget tree. This makes your code easier to test, since you can pass mock or fake repositories when writing unit tests. You also avoid hard-coding dependencies inside widgets, which improves maintainability and makes it easier to update or replace dependencies as your app evolves. Constructor injection keeps your code transparent and straightforward, letting you see at a glance what each class depends on.

Everything was clear?

Thanks for your feedback!

Section 1. Chapter 3

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you give an example of constructor injection in Flutter?

What are some popular dependency injection frameworks for Flutter?

How does dependency injection improve testing in Flutter apps?

Swipe to show menu

Increases code modularity by separating object creation from usage;
Makes it easier to swap out implementations, such as using mock objects for testing;
Improves maintainability by reducing tight coupling between classes;
Facilitates scalability as your app grows in complexity.

main.dart


              12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
            
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp(
    repository: CounterRepository(),
  ));
}

// A simple repository that provides a counter value.
class CounterRepository {
  int fetchInitialValue() => 5;
}

// Injecting the repository via the constructor.
class MyApp extends StatelessWidget {
  final CounterRepository repository;

  const MyApp({Key? key, required this.repository}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterScreen(repository: repository),
    );
  }
}

class CounterScreen extends StatefulWidget {
  final CounterRepository repository;

  const CounterScreen({Key? key, required this.repository}) : super(key: key);

  @override
  State<CounterScreen> createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  late int _counter;

  @override
  void initState() {
    super.initState();
    // Use the injected repository to get the initial value.
    _counter = widget.repository.fetchInitialValue();
  }

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('DI Example')),
      body: Center(child: Text('Counter: [1m$_counter[0m')),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Everything was clear?

Thanks for your feedback!

Section 1. Chapter 3