Flutter GetX Masterclass — Chapter 3: Dependency Injection with GetX

In this chapter of our GetX Masterclass, we explore advanced navigation techniques in GetX, using our existing e-commerce application as the base. We’ll dive into different types of routing, navigate through screens, and implement a seamless checkout feature. By the end of this chapter, you’ll understand the core navigation methods in GetX and how to use them efficiently in your Flutter projects.

What We Built in Chapter 2

Previously, in Chapter 2, we implemented state management using GetX and added functionality to update the cart reactively. When a product was added or removed, the total price dynamically updated. We also introduced the Add to Cart and View Cart features.

Overview of Chapter 3

In this chapter, we’ll:

1. Add a new Checkout Page.
2. Implement navigation between views, focusing on various routing types in GetX:

• Get.to
• Get.toNamed
• Get.off
• Get.offNamed
• Get.offAll
• Get.offAllNamed
• Get.back

1. Showcase the pros and cons of each navigation method.
2. Update the routes dynamically in one central place for easier maintainability.

Setup: Defining Routes

First, we define the routes in app_pages.dart. This file centralizes all navigation paths, ensuring consistency and maintainability.

app_routes.dart

part of 'app_pages.dart';

class Routes {
  static const PRODUCT = '/product';
  static const PRODUCT_DETAILS = '/product-details';
  static const CART = '/cart';
  static const CHECKOUT = '/checkout';
}

app_pages.dart

import 'package:get/get.dart';
import 'package:getx_chapter_1/app/modules/product/views/cart_view.dart';
import 'package:getx_chapter_1/app/modules/product/views/checkout_view.dart';
import '../modules/product/views/product_view.dart';
import '../modules/product/views/product_details_view.dart';

part 'app_routes.dart';

class AppPages {
  static final routes = [
    GetPage(
      name: Routes.PRODUCT,
      page: () => ProductView(),
    ),
    GetPage(
      name: Routes.PRODUCT_DETAILS,
      page: () => ProductDetailsView(),
    ),
    GetPage(
      name: Routes.CART,
      page: () => CartView(),
    ),
    GetPage(
      name: Routes.CHECKOUT,
      page: () => CheckoutView(),
    ),
  ];
}

This structure allows us to define all our pages and their routes in one place, making navigation straightforward.

Implementing the Checkout Page

The Checkout Page is simple. It displays a confirmation message and a button to navigate back to the home screen. Here’s the code:

checkout_view.dart

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

class CheckoutView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Thank you for your purchase!", style: TextStyle(fontSize: 20)),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Get.offAllNamed(Routes.PRODUCT);
              },
              child: Text("Go Back to Home"),
            ),
          ],
        ),
      ),
    );
  }
}

This page uses Get.offAllNamed to remove all previous routes and return to the home screen.

Adding Navigation from Cart to Checkout

We add a “Proceed to Checkout” button in the Cart View. When clicked, this button navigates to the Checkout Page.

cart_view.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../routes/app_pages.dart';

class CartView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Cart")),
      body: Column(
        children: [
          Expanded(
            child: ListView(
              children: [
                // Cart items would go here
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: [
                Text("Total: \$100", style: TextStyle(fontSize: 18)),
                SizedBox(height: 10),
                ElevatedButton(
                  onPressed: () {
                    Get.toNamed(Routes.CHECKOUT);
                  },
                  child: Text("Proceed to Checkout"),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Understanding Navigation Methods in GetX

GetX provides various navigation methods, each serving a specific purpose. Here’s an overview with examples:

1. Get.to and Get.toNamed

• Get.to: Navigates to a page without defining a route name.
• Get.toNamed: Uses a named route to navigate.

Example:

Get.to(ProductDetailsView());
Get.toNamed(Routes.PRODUCT_DETAILS);

2. Get.off and Get.offNamed

• Get.off: Replaces the current page.
• Get.offNamed: Replaces the current page using a named route.

Use Case: Login/Sign-up flows.

Example:

Get.off(CartView());
Get.offNamed(Routes.CART);

3. Get.offAll and Get.offAllNamed

• Get.offAll: Clears the entire navigation stack and navigates to a page.
• Get.offAllNamed: Clears the stack using a named route.

Use Case: Checkout or logout flows.

Example:

Get.offAll(CheckoutView());
Get.offAllNamed(Routes.CHECKOUT);

4. Get.back

• Returns to the previous screen.

Example:

Get.back();

Dynamic Navigation in Product Details

We implement a back button without using an AppBar. Instead, we use the Get.back() method for navigation.

product_details_view.dart

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

class ProductDetailsView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Product Details", style: TextStyle(fontSize: 20)),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Get.back();
              },
              child: Text("Back to Product List"),
            ),
          ],
        ),
      ),
    );
  }
}

Testing the Navigation Flow

To test the navigation:

1. Add multiple products to the cart.
2. Navigate to the Cart Page and proceed to the Checkout Page.
3. Verify back navigation works as expected for different flows.

Conclusion

In this chapter, we covered:

• Adding a Checkout Page.
• Navigating between screens using different GetX methods.
• Pros and cons of each navigation technique.

In the next chapter, we’ll explore dependency injection in GetX and enhance our app by integrating controllers for improved state management. Stay tuned!

If you have any questions or suggestions, feel free to comment below. Happy coding! 🚀

GitHub Code

You can find the full code for this chapter on GitHub:

[GitHub Repository Link].