Dependency injection (GetIt) in Flutter - Mini App: Build & Ship

Build: Simple Counter with GetIt

A screen that shows a counter value and a button to increment it. The counter logic is managed by a service injected using GetIt.

Target UI

---------------------
| Simple Counter    |
|-------------------|
| Count: 0          |
|                   |
| [ Increment ]     |
---------------------

Use GetIt to register and inject a CounterService.

CounterService holds an integer count and a method to increment it.

The UI shows the current count from CounterService.

Pressing the Increment button calls the increment method and updates the UI.

Starter Code

Flutter

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

// TODO: Define CounterService class here

void setupLocator() {
  // TODO: Register CounterService with GetIt
}

void main() {
  setupLocator();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

class CounterScreen extends StatefulWidget {
  const CounterScreen({super.key});

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

class _CounterScreenState extends State<CounterScreen> {
  // TODO: Get CounterService instance from GetIt

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Simple Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // TODO: Display current count
            // TODO: Add ElevatedButton to increment count
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

Flutter

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

class CounterService {
  int count = 0;

  void increment() {
    count++;
  }
}

final getIt = GetIt.instance;

void setupLocator() {
  getIt.registerSingleton<CounterService>(CounterService());
}

void main() {
  setupLocator();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

class CounterScreen extends StatefulWidget {
  const CounterScreen({super.key});

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

class _CounterScreenState extends State<CounterScreen> {
  final CounterService counterService = getIt<CounterService>();

  void _incrementCounter() {
    setState(() {
      counterService.increment();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Simple Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Count: ${counterService.count}', style: const TextStyle(fontSize: 24)),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _incrementCounter,
              child: const Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

We created a CounterService class that holds the count and an increment method. We use GetIt to register this service as a singleton in setupLocator(). In the _CounterScreenState, we get the instance of CounterService from GetIt. The UI shows the current count from the service. When the button is pressed, we call increment() on the service and call setState to update the UI. This way, the business logic is separated from the UI and injected cleanly.

Final Result

Completed Screen

---------------------
| Simple Counter    |
|-------------------|
| Count: 0          |
|                   |
| [ Increment ]     |
---------------------

Tapping the Increment button increases the count number by 1.

The displayed count updates immediately after tapping.

Stretch Goal

Add a Reset button that sets the count back to zero using the CounterService.

💡 Hint

Add a new method reset() in CounterService that sets count to 0. Add a second ElevatedButton in the UI that calls reset() and updates the UI.