The Complete Guide to Flutter/

...

/

Challenge: Dependency Injection

Challenge: Dependency Injection

Test your understanding of state management in Flutter by dependency injection using the GetX library.

We'll cover the following...

Goal

The goals of this challenge include:

  • Learning to implement dependency injection.
  • Using the GetX package to manage the state in your mobile app.

Specs

  • When the user adds an item to the cart, it is added to the cart.
  • Users should be able to remove items from the cart.
  • The user interface should react to changes to the cart.

Starter code

Before beginning the challenge, look at the starter code below and run it. Once done, you can dive into the challenges below.

import 'package:flutter/material.dart';

import 'constants.dart';
import 'models/product.dart';
import 'presentation/cart_screen.dart';
import 'presentation/product_detail_screen.dart';
import 'presentation/product_overview_screen.dart';

class CustomRouter {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case productsOverviewRoute:
        return MaterialPageRoute(builder: (_) => ProductsOverviewScreen());
      case productDetailRoute:
        final args = settings.arguments as Product;
        return MaterialPageRoute(
            builder: (_) => ProductDetailScreen(product: args));
      case cartScreenRoute:
        return MaterialPageRoute(builder: (_) => CartScreen());
      default:
        return MaterialPageRoute(
            builder: (_) => const Scaffold(body: Center(child: Text("404"))));
    }
  }
}
Dependency injection challenge - starter code

Challenges

Challenge 1: Add the Get package

Locate # TODO-1: Import the get dependency in the pubspec.yaml file and add the Get package:

Challenge 2:

...