GetX offers an easier, more efficient way to handle state management, routing, and dependencies all in one place. Let’s dive into setting up GetX to streamline your development process.

Step 1: Create a New Application

To begin, set up a new Flutter project by running this command in your terminal:

flutter create getx_app

This will generate a base Flutter project that you can build on. Open the project in your favorite editor like VSCode or Android Studio.

Step 2: Add Required Dependencies

In your pubspec.yaml, add GetX to the dependencies list:

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.5

Next, fetch the package:

flutter pub get

Flutter GetX integrates easily into your project with no additional setup. It’s lightweight but packed with powerful features that streamline complex app functionalities.

Step 3: Update the MaterialApp Widget

To unlock GetX’s full potential, replace MaterialApp with GetMaterialApp. This allows for advanced features like navigation without the context and centralized state management.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'GetX Example App',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomePage(),
    );
  }
}

By making this change, GetX takes over as your app’s core, providing built-in routing and state management capabilities with minimal configuration.

Step 4: Add GetX Controller

Controllers are essential in GetX for managing the logic and state of your app. Create a controller to handle a simple counter operation.

import 'package:get/get.dart';

class CounterController extends GetxController {
  var count = 0.obs;

  void increment() {
    count++;
  }
}

Explanation:

• The variable count is wrapped in .obs, which makes it observable. The observable state in GetX is reactive, meaning it can automatically notify the UI when the value changes.

• GetX Controllers, like CounterController, help you separate your business logic from your UI, following the best practices of clean architecture.

Step 5: Dependency Injection

One of the standout features of GetX is the built-in dependency injection in Flutter. You don’t need to rely on external libraries or cumbersome setup. Inject your controller with a single line of code:

void main() {
  Get.put(CounterController());  // Injects the controller
  runApp(MyApp());
}

This simple command makes you CounterController globally accessible in your app. You can access it in any widget without recreating or passing it through constructors.

Step 6: Instantiate Controller

Now that your controller is injected, let’s see how you can use it inside your app’s UI. In the HomePage, retrieve the controller instance using Get.find():

class HomePage extends StatelessWidget {
  final CounterController controller = Get.find();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('GetX Counter Example')),
      body: Center(
        child: Obx(() => Text('Count: ${controller.count}')),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: controller.increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

By calling Get.find(), you can retrieve the controller and manage its state directly within your widget. This makes the UI cleaner and reduces the need for manual state management.

Step 7: Obx Widget (Observer)

The Obx widget is GetX’s answer to updating the UI reactively. It listens to changes in observable variables and rebuilds only the part of the UI that depends on them.

Obx(() => Text('Count: ${controller.count}')),

Every time the count variable is incremented, the text widget inside Obx will automatically update. There’s no need for setState() other traditional methods.