GetX State Management cheat Sheet: The Ultimate Guide to GetX State Management in Flutter

Welcome to the ultimate GetX State Management cheat sheet! In this newsletter, I will share the GetX State Management cheat sheet that will help you remember the basic basics of GetX state management in Flutter. It will enhance your Flutter development journey.

1. Setup

Add Dependency

Add get package in pubspec.yaml for GetX functionality.

dependencies:
get: ^4.6.5

Import GetX

Import GetX library in your Dart files.

import 'package:get/get.dart';

»Download the GetX cheat sheet PDF for a more organized and better learning experience: Click here

2. Controller

Create Controller

Define a class extending GetxController for state management.

class CounterController extends GetxController {
  var count = 0.obs;
  void increment() => count++;
}

Use Controller

Inject controller instance with Get.put() to use across widgets.

final CounterController controller = Get.put(CounterController());

3. Observables

Reactive Variables

Use .obs to make a variable observable for state changes.

var count = 0.obs;  // or RxInt(0)
var name = ''.obs;  // or RxString('')

Update UI with Obx

Use Obx widget to rebuild UI on reactive variable changes.

Obx(() => Text("Count: ${controller.count}"));

4. Routes

Simple Route Navigation

Navigate to new pages using the Get.to() method.

Get.to(SecondPage());

Named Route Navigation

Use Get.toNamed() for navigation with named routes.

Get.toNamed('/second');

Route Setup

Define routes in GetMaterialApp for app-wide navigation.

GetMaterialApp(
  initialRoute: '/',
  getPages: [
    GetPage(name: '/', page: () => HomePage()),
    GetPage(name: '/second', page: () => SecondPage()),
  ],
);

5. Dependency Injection

Inject Dependency

Use Get.lazyPut() to lazy initialize controllers or services.

Get.lazyPut<Controller>(() => Controller());

Find Dependency

Retrieve controller instances using Get.find().

final controller = Get.find<Controller>();

6.Dialogs, Snackbars, Bottom Sheets

Show Dialog

Display custom dialogs with Get.defaultDialog().

Get.defaultDialog(title: "Title", content: Text("Content"));

Show Snackbar

Use Get.snackbar() to show snackbars for messages.

Get.snackbar('Title', 'Message');

Show Bottom Sheet

Display bottom sheets using Get.bottomSheet().

Get.bottomSheet(Container(child: Text("Bottom Sheet")));

7. Other Utilities

Show Loading

Display a loading dialog with Get.dialog().

Get.dialog(
  Center(
      child: CircularProgressIndicator()),
      barrierDismissible: false
);

Close Dialogs, Bottom Sheets, etc.

Use Get.back() to close any open widget.

Get.back();

»Read the full cheat sheet on our website: Click Here

»Download the GetX Cheat sheet PDF: Click Here

Happy coding with Flutter!

If you have any questions or need more insights, feel free to reply to this email or join our Flutter community discussions. Stay tuned for more tips and tricks in the next edition!

Best,
The Tech Vate Team

P.S. Loved this newsletter? Share it with your friends and colleagues who are also Flutter enthusiasts!