Use
- Introduction
- dependency management
- routing management
- state management
- theme configuration
- multilingual configuration
- offline cache
- network request
Principles
1. Introduction
- Obx: Responsive state management, when the data source changes, the method of refreshing the component will be automatically executed
- GetX: Responsive state management, when the data source changes, it will automatically execute the method of refreshing the component
- GetBuilder: Simple state management. When the data source changes, you need to manually execute the method of refreshing the component. The inside of this state manager is actually a package of StatefulWidget, which occupies very little resources!
Two, GetBuilder
After the controller gets the data, we call the update method of the controller to update the interface. If we need to refresh the corresponding interface, we can
use GetBuilder to wrap the page that needs Builder as follows:
GetBuilder<FirstController>(builder: (controller) {
return Text('第一页');
})
If you directly update in the controller, all will be refreshed by default, but if we only want to refresh part of the interface, we can directly
add an ID to the parameter of GetBuilder, and then correspond to the parameter id in the update method.
class FirstController extends GetxController {
int count = 0;
updateData() {
update(['first']);
}
}
GetBuilder<FirstController>(
builder: (controller) {
return Text('第一页');
},
id: 'first',
)
3. ValueBuilder
Simplifying how it works is to use a callback that takes the updated value. StatefulWidget. setState
ValueBuilder<bool>(
initialValue: false,
builder: (value, updateFn) => Switch(
value: value,
onChanged: updateFn, // same signature! you could use ( newValue ) => updateFn( newValue )
),
// if you need to call something outside the builder method.
onUpdate: (value) => print("Value updated: $value"),
onDispose: () => print("Widget unmounted"),
),
Four, Getx, Obx and ObxValue
Similar to ValueBuilder, but this is the Reactive version, you pass an Rx instance (remember the magic .obs?) and it updates automatically... isn't it awesome?
obs is provided by Getx to modify variables. Variables modified by obs do not need to use GetBuilder, but they need to use another widget, that is obx, to wrap the widget that needs to be refreshed, and we do not need to update it manually.
Obx(() => Text('第一页:${controller.count}')))
class FirstController extends GetxController {
Rx<int> count = 0.obs;
updateData() {
// update(['first']);
count.value++;
}
}
Another form of writing ObxValue is as follows:
ObxValue(() => Text('第一页:${controller.count}'),count.obs)
Of course, Getx also provides a responsive widget, Getx , which and Obx are both responsive widgets that do not need to be updated manually.
class SimplePage extends StatelessWidget {
const SimplePage({
Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
Get.put(SimpleController());
return GetX<SimpleController>(builder: (controller) {
return Scaffold(
appBar: AppBar(title: const Text('Simple')),
body: GestureDetector(
onTap: () {
controller.increment();
},
child: Center(
child: Text('${controller.counter.value}'),
),
),
);
});
}
}
class SimpleController extends GetxController {
Rx<int> counter = 0.obs;
void increment() {
counter.value++;
}
}
class GetX<T extends DisposableInterface> extends StatefulWidget {
final GetXControllerBuilder<T> builder;
final bool global;
// final Stream Function(T) stream;
// final StreamController Function(T) streamController;
final bool autoRemove;
final bool assignId;
final void Function(GetXState<T> state)? initState,
dispose,
didChangeDependencies;
final void Function(GetX oldWidget, GetXState<T> state)? didUpdateWidget;
final T? init;
final String? tag;
const GetX({
this.tag,
required this.builder,
this.global = true,
this.autoRemove = true,
this.initState,
this.assignId = false,
// this.stream,
this.dispose,
this.didChangeDependencies,
this.didUpdateWidget,
this.init,
// this.streamController
});
Of course, if you want to talk about the difference between Obx and Getx, it provides more parameters, including the life cycle of the widget.
If we want to do something in the widget life cycle, I think we can use this widget.
5. GetView
GetX provides a quick Widget to access the controller in the container, ie GetView. GetView is an abstract class that inherits StatelessWidget.
GetView is a const Stateless Widget. If we only have a single controller as a dependency, then we can use GetView instead of StatelessWidget and avoid writing Get.Find().
You can see that the source code of GetView has been written for you.
abstract class GetView<T> extends StatelessWidget {
const GetView({
Key? key}) : super(key: key);
final String? tag = null;
T get controller => GetInstance().find<T>(tag: tag)!;
@override
Widget build(BuildContext context);
}
Then the registration of the controller should be written in the bindings, you can see here Flutter all-rounder GetX - Dependency Management
6. GetWidget
GetWidget is not a const Stateless view, it caches a controller. Cannot be a "const Stateless" because of caching (Cannot be a const Stateless because of caching). When we use Get.create(()=>Controller()), a new Controller will be generated each time it is called, and Get.find()` is
rarely used because we usually don’t need a cache controller.
7. Summary
In general, reactive variables can be used for most scenarios. However, each responsive variable (.obs) needs to generate a corresponding Stream. If there are enough objects, a large number of Streams will be generated, which will definitely put a lot of pressure on the memory. In this case, simple state management should be considered. up