Share data between controllers

[nllahat]

Hi guys (:
This is an example of my scenario:

• OnboardingController with it's own single page OnboardingPage.
• OnboardingColorsSubPage as one step of the onboarding which also has it's own controller OnboardingColorsController which is responsible for fetching data be shown in the OnboardingColorsSubPage.
• Another subpage OnboardingShowColorsSubPage as the second step of the onboarding which only shows data based on the user colors selections. Has it's own controller OnboardingShowColorsController

I want to save user selections in the main OnboardingController and then to fetch some data by those selections in OnboardingShowColorsController.
Can I share OnboardingController data among the third OnboardingShowColorsController ? is it an anti pattern ?

class OnboardingController extends GetxController {
  RxString someData = 'hello'.obs;
  RxList<String> _selectedColors = [].obs;

  List<String> get selectedColors => _selectedColors;

  addSelectedColor(String color) {
    _selectedColors.add(color);
  }
}

class OnboardingPage extends StatelessWidget {
  final _controller = Get.find<OnboardingController>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(child: Column(children: [Container(child: Text(_controller.someData)), OnboardingColorsSubPage(), OnboardingShowColorsSubPage()],)));
  }
}

class OnboardingColorsController extends GetxController {
  final IColorsRepository repository;

  OnboardingColorsController({@required this.repository})
      : assert(repository != null);

  RxList<String> _colors = [].obs;
  List<String> get colors => _colors;

  @override
  void onReady() async {
    _colors = await repository.fetchColors();
    super.onReady();
  }
}

class OnboardingColorsSubPage extends StatelessWidget {
  final OnboardingColorsController onboardingColorsController =
      Get.find<OnboardingColorsController>();
  final OnboardingController onboardingController =
      Get.find<OnboardingController>();

  @override
  Widget build(BuildContext context) {
    return Obx(() => Center(
          child: Container(
              child: ListView.builder(
                itemCount: onboardingColorsController.colors.length,
                itemBuilder: (context, index) {
                  final color = onboardingColorsController.colors[index];

                  return Obx(() {
                    return ListTile(
                      title: Text(color),
                      trailing: Icon(
                          onboardingController.selectedColors.contains(color)
                              ? Icons.check
                              : Icons.close),
                      onTap: () {
                        onboardingController.addSelectedColor(color);
                      },
                    );
                  });
                })),
        ));
  }
}

class OnboardingShowColorsSubPage extends StatelessWidget {
  final OnboardingShowColorsController controller =
      Get.find<OnboardingShowColorsController>();

  @override
  Widget build(BuildContext context) {
    return Obx(() => Center(
          child: Container(child:
              Text(controller.someDataBasedOnSelectedColors)),
        ));
  }
}


class OnboardingShowColorsController extends GetxController {
  // Is this a an anti-pattern ?
  final OnboardingController _onboardingController = Get.find(); 
  final ISomeRepository repository;

  OnboardingShowColorsController({@required this.repository})
      : assert(repository != null);

  RxString _someDataBasedOnSelectedColors = ''.obs;
  String get someDataBasedOnSelectedColors => _someDataBasedOnSelectedColors.value;

  @override
  void onReady() async {
    _someDataBasedOnSelectedColors = await repository.fetchSomeDataBySelectedColors(_onboardingController.selectedColors);
    super.onReady();
  }
}

[fer-ri]

since it's just a sub routes, why don't you use arguments to pass the data?

[nllahat]

Hi @ghprod (:

Not sure I understand..
How can I pass arguments to OnboardingShowColorsController ? I need the user colors selection for fetchSomeDataBySelectedColors call

[fer-ri]

Did you use Get.toNamed() to navigate between OnboardingPage -> OnboardingColorsSubPage -> OnboardingShowColorsSubPage?

Btw please use the appropriate channel since this isn't the issue.

Thanks

[nllahat]

no. this is a widget inside OnboardingPage

which channel should I use ?

[fer-ri]

Please see this link

https://github.com/jonataslaw/getx#community-channels