> flutter-getx-state-management
Simple and powerful reactive state management using GetX. Use when managing reactive state with GetX controllers or observables in Flutter. (triggers: **_controller.dart, **/bindings/*.dart, GetxController, Obx, GetBuilder, .obs, Get.put, Get.find, Get.lazyPut)
curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/flutter-getx-state-management?format=md"GetX State Management
Priority: P0 (CRITICAL)
Structure
lib/app/modules/home/
├── controllers/
│ └── home_controller.dart
├── bindings/
│ └── home_binding.dart
└── views/
└── home_view.dart
Implementation Guidelines
- Controllers: Extend
GetxController. Store logic and state variables here. - Reactivity:
- Use
.obsfor observable variables (e.g.,final count = 0.obs;). - Wrap UI in
Obx(() => ...)to listen for changes. - For simple state, use
update()in controller andGetBuilderin UI.
- Use
- Dependency Injection:
- Bindings: Use
Bindingsclass to decouple DI from UI. - Lazy Load: Prefer
Get.lazyPut(() => Controller())in Bindings. - Lifecycle: Let GetX handle disposal. Avoid
permanent: true.
- Bindings: Use
- Hooks: Use
onInit(),onReady(),onClose()instead ofinitState/dispose. - Architecture: Use
get_clifor modular MVVM (data, models, modules).
Anti-Patterns
- Ctx in Logic: Pass no
BuildContextto controllers. - Inline DI: Avoid
Get.put()in widgets; use Bindings +Get.find. - Fat Views: Keep views pure UI; delegate all logic to controller.
Code Example
class UserController extends GetxController {
final name = "User".obs;
void updateName(String val) => name.value = val;
}
class UserView extends GetView<UserController> {
@override
Widget build(ctx) => Scaffold(
body: Obx(() => Text(controller.name.value)),
floatingActionButton: FloatingActionButton(
onPressed: () => controller.updateName("New"),
),
);
}
Related Topics
getx-navigation | layer-based-clean-architecture | dependency-injection
> related_skills --same-repo
> typescript-tooling
Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling. (triggers: tsconfig.json, .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, vitest, build, compile, lint)
> typescript-security
Secure coding practices for TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration. (triggers: **/*.ts, **/*.tsx, validate, sanitize, xss, injection, auth, password, secret, token)
> typescript-language
Modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings. (triggers: **/*.ts, **/*.tsx, tsconfig.json, type, interface, generic, enum, union, intersection, readonly, const, namespace)
> typescript-best-practices
Idiomatic TypeScript patterns for clean, maintainable code. Use when writing or refactoring TypeScript classes, functions, modules, or async logic. (triggers: **/*.ts, **/*.tsx, class, function, module, import, export, async, promise)