What is Flutter
Flutter is a tool to make phone apps. You can use it to build apps for Android and iPhone. Many people use Flutter because it is easy to learn.
What is State in Apps
State means data that can change in your app. Think of a counter app. The number goes up when you tap a button. That number is the state.
When state changes, you want your app screen to update too. This is very important for good apps.
The Problem Without Obx
In Flutter, when your data changes, the screen does not always update. You have to tell Flutter to rebuild the screen. This can be hard work.
You might write lots of code just to update one number on screen. This makes your code long and messy.
What is GetX
GetX is a package for Flutter. A package is extra code that someone else wrote. You can add it to your Flutter project.
GetX helps with many things. It helps with state management. It also helps with routes and other things.
Obx is part of GetX. It is one of the most useful parts.
What is Obx
Obx is a widget in GetX. A widget is like a building block for your app screen.
Obx watches your data. When your data changes, Obx rebuilds that part of the screen. It does this by itself. You do not need to write extra code.
Think of Obx like a smart helper. It knows when to update your screen.
How Obx Works
Obx works with observable data. Observable means the data can tell others when it changes.
In GetX, you use RxInt, RxString, and other Rx types. These are special types that Obx can watch.
When you change an RxInt, Obx sees this change. Then Obx rebuilds the widgets that use this data.
Basic Example of Obx
Here is a simple counter example:
class CounterController extends GetxController {
var count = 0.obs;
void increment() {
count++;
}
}
The .obs makes the count observable. Now Obx can watch it.
In your widget, you wrap the text with Obx:
Obx(() => Text('Count: ${controller.count}'))
When count changes, only this text rebuilds. The rest of your screen stays the same.
Why Obx is Good
Obx makes your code simple. You do not need to worry about when to update the screen.
Obx is fast. It only rebuilds the parts that need to change. This makes your app run smooth.
Obx uses less memory. It does not rebuild big parts of your app when only small things change.
Different Types of Observable Data
GetX gives you many types of observable data:
RxInt for whole numbers like 1, 2, 3 RxDouble for decimal numbers like 1.5, 2.7 RxString for text like “hello”, “world” RxBool for true or false values RxList for lists of items
All of these work with Obx.
Real Example with Button
Let us make a simple app with a button and text:
class MyController extends GetxController {
var message = "Hello".obs;
void changeMessage() {
message.value = "Button was pressed!";
}
}
In your screen:
class MyPage extends StatelessWidget {
final controller = Get.put(MyController());
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Obx(() => Text(controller.message.value)),
ElevatedButton(
onPressed: controller.changeMessage,
child: Text('Press Me'),
),
],
),
);
}
}
When you press the button, the text changes right away.
Multiple Obx Widgets
You can use many Obx widgets in one screen. Each one watches different data.
class MyController extends GetxController {
var name = "John".obs;
var age = 25.obs;
}
In your screen:
Column(
children: [
Obx(() => Text('Name: ${controller.name}')),
Obx(() => Text('Age: ${controller.age}')),
],
)
If only the name changes, only the first Obx rebuilds. The age text stays the same.
Lists with Obx
Obx works great with lists too. Use RxList for lists that change:
class ListController extends GetxController {
var items = <String>[].obs;
void addItem(String item) {
items.add(item);
}
}
Show the list with Obx:
Obx(() => ListView.builder(
itemCount: controller.items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(controller.items[index]),
);
},
))
When you add items to the list, the screen updates by itself.
Common Mistakes with Obx
Do not forget to use .obs when making observable data. Without it, Obx cannot watch the data.
Do not put Obx around big widgets. Only wrap the parts that need to change.
Do not use Obx if your data never changes. It wastes resources.
Remember to use .value when setting new values to observable data.
When to Use Obx
Use Obx when you have data that changes often. Like counters, user input, or lists.
Use Obx when you want simple state management. It is easier than other methods in Flutter.
Use Obx when you want fast updates. It only rebuilds what needs to change.
Obx vs Other Methods
Flutter has other ways to manage state. Like setState, Provider, and Bloc.
setState is simple but can be slow for big apps.
Provider is good but needs more setup code.
Bloc is powerful but hard to learn.
Obx is easy to use and fast. It is good for most apps.
Tips for Using Obx
Keep your controllers simple. Do not put too much code in them.
Use clear names for your observable data. This makes your code easy to read.
Test your code to make sure Obx updates work right.
Learn about GetX routing and other features too. They work well with Obx.
Getting Started with Obx
First, add GetX to your Flutter project. Put this in your pubspec.yaml file:
dependencies:
get: ^4.6.5
Then run flutter pub get to install it.
Change your MaterialApp to GetMaterialApp:
GetMaterialApp(
home: MyHomePage(),
)
Now you can use Obx and other GetX features.
Simple Todo App Example
Here is a basic todo app using Obx:
class TodoController extends GetxController {
var todos = <String>[].obs;
void addTodo(String todo) {
todos.add(todo);
}
void removeTodo(int index) {
todos.removeAt(index);
}
}
The screen code:
class TodoPage extends StatelessWidget {
final controller = Get.put(TodoController());
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Todo App')),
body: Obx(() => ListView.builder(
itemCount: controller.todos.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(controller.todos[index]),
trailing: IconButton(
icon: Icon(Icons.delete),
onPressed: () => controller.removeTodo(index),
),
);
},
)),
floatingActionButton: FloatingActionButton(
onPressed: () {
controller.addTodo('New Todo');
},
child: Icon(Icons.add),
),
);
}
}
This app shows a list of todos. You can add and remove todos. The screen updates right away.
Summary
Obx is a widget from GetX that makes state management easy in Flutter. It watches your data and updates the screen when data changes.
Obx is simple to use. You just wrap your widgets with Obx and use observable data types.
Obx makes your apps fast and smooth. It only rebuilds the parts that need to change.
Try using Obx in your next Flutter project. You will find it makes your code cleaner and easier to work with.
Start small with simple examples. Then try bigger projects as you learn more about Obx and GetX.
Obx is a great tool for Flutter developers who want easy state management without complex setup code.