Flutter Separating logic from UI Without Context

Question

I'm new to flutter and i've been working on an app and trying to implement the MVVM architecture to separate the logic from the UI. I'm using the provider as state management and it's working fine with notifying the new data. but I have two major problems when it comes to displaying translated error messages using the AppLocalizations class and (snackbar,Toast,Alert Dialog) because the logic for validating the inputs is in the ViewModel and those libraries demands a CONTEXT to work with. i've found the Get State Management that does everything but it has too many issues like less documentation and too many responsibilities.

Note that my application is 90% data entry so validation is a major part of my logic, so what is the best solution for my case. and if I have to use Get Package what is the cons that i should be aware of. Thanks In Advance.

An easy fix would be if you have a global key on your parent navigator or parent scaffold (or add it if you dont) and then access the context over the global key with key.currentState!.context (MaterialApp has a navigator key property). — void void, May 15 '22 at 12:19

score 0 · Accepted Answer · answered May 15 '22 at 11:40

You may use GetBuilder to build you UI page and controller attached to that UI page.

Here's an example of SplashPage and SplashController

SplashPage code using GetBuilder

class SplashPage extends StatelessWidget {
      const SplashPage({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return GetBuilder<SplashController>(
            init: SplashController(),
            builder: (controller) => Scaffold(
                  body: Container(
                    child: Center(
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Image.asset(
                            AppImages.logo,
                            width: SizerUtil.width * 0.25,
                            height: SizerUtil.width * 0.25,
                          ),
                          SizedBox(width: 8.sp),
                          Image.asset(
                            AppImages.awaken,
                            width: SizerUtil.width * 0.35,
                            height: SizerUtil.width * 0.35,
                          ),
                        ],
                      ),
                    ),
                  ),
                ));
      }
    }

Here's SplashController Code

class SplashController extends GetxController {
      @override
      void onInit() {
        super.onInit();
      }
    
      @override
      void onReady() {
        Future.delayed(
            Duration(milliseconds: 1500), () => Get.off(() => OnBoardingPage()));
        super.onReady();
      }
    }

Here's the link to tutorial, how GetBuilder works https://morioh.com/p/cffd79df5304

thanks for your quick reply. but as i mentioned above i know that **Get** Package would solve all of my problems but i've heard a lot of negative feedback about it. so can you tell me how can i used it with best practices to avoid its cons. — Abanoub Refaat, May 15 '22 at 12:16
I shared my practice(MVVM) with you, I used to code using GetX this way. I find easy compared to provider or other management tools. — Kashif Niaz, May 16 '22 at 06:50

Flutter Separating logic from UI Without Context

1 Answers1