Making Value Reactive with GetX in Widget Setup - flutter

Question

I'm new to GetX and am trying to migrate a project from Provider. I am using multi_split_view in my app to have resizable panes, and I set it up in a StatefulWidget like this:
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<PilotProApp> {
final MultiSplitViewController _splitViewController = MultiSplitViewController();
#override
Widget build(BuildContext context) {
//var menu = Provider.of<ModelMenu>(context); //<-- Old provider variable
final menu = Get.put(ControllerMenu()).menu; //<-- New GetX observable
//Update splitView areas for Dashboard
_splitViewController.areas = menu.value == 'Dashboard'
? [Area(weight: .75), Area(weight: .25)]
: [Area(weight: .25), Area(weight: .75)];
MultiSplitView splitView = MultiSplitView(
controller: _splitViewController,
children: const [
Master(),
Detail(),
],
);
MultiSplitViewTheme splitViewTheme = MultiSplitViewTheme(
data: MultiSplitViewThemeData(dividerThickness: 16),
child: splitView,
);
}
}
I know that I have to wrap a widget in Obx(()=>) in order to make it reactive, but the place I need reactivity here is where it says //Update splitView areas for Dashboard. In Provider, when the menu variable changed, it would reset the _splitViewController.areas.
But with GetX, I'm unclear on how to make a configuration change like that reactive. Where should Obx(()=>) go in this case? Or do I need to move my entire MultiSplitViewController into my ControllerMenu somehow?

Answer 1

Well that didn't take long to figure out. Let me know if I'm wrong on this, but I think I can make my widget a StatelessWidget and put my MultiSplitViewController in my controller like this:
class ControllerMenu extends GetxController {
final menu = 'Dashboard'.obs;
final splitViewController = MultiSplitViewController();
#override
void onInit() {
super.onInit();
//Watch for changes on `menu`
ever(
menu,
(value) {
//Update controller
if (value == 'Dashboard') {
splitViewController.areas = [Area(weight: .75), Area(weight: .25)];
} else {
splitViewController.areas = [Area(weight: .25), Area(weight: .75)];
}
},
);
}
}
Then I just plug in my MultiSplitViewController back into my view:
Widget build(BuildContext context) {
final splitViewController = Get.put(ControllerMenu()).splitViewController;
MultiSplitView splitView = MultiSplitView(
controller: splitViewController,
children: const [
Master(),
Detail(),
],
);
}
Seems to work great!