· flutter · 4 min read

Week 2 - Fighting Go_Router and my stupid code

I had a pain week with Go_Router, Firebase Emulator saved my mood, enjoyable Easy_Localization!

go_router

Last week I decided to add go_router to my project … well, it was a hell of a breaking change in the app :)

One of my routes had a List<int> as parameters, so I used the extra parameters to get it when I defined the route.

I had to rewrite the logic of the redirect method and also cast the parameters because it kept complaining that a List<dynamic> couldn’t be cast into a List<int> …

GoRoute(
  path: '/onboardingtwo',
  builder: (context, state) {
    final scores = List<int>.from(state.extra! as List<dynamic>);
    return OnboardingPageTwo(
      scores: scores,
    );
  },
)


// ... somewhere else

 context.pushReplacement(
    '/onboardingtwo',
    extra: scores.value.cast<int>(),
  );


// in my redirect


if (state.uri.toString().contains('/onboardingtwo')) {
  if (!userAlreadyExist) {
    return null;
  }
}

The issue was that in onboardingtwo I was calling FirebaseAuth.instance.signIn(), and because I had the refreshListenable listening to the change of a user, it was calling my redirect too soon. (That’s why now I have a check if we are on onboardingtwo and !userAlreadyExist)

So now after my onboarding is finished and the user has an account created (anonymous), I push to another route

onDone: () async {
  if (formKey.currentState!.validate()) {
    ref.read(loadingProvider.notifier).state = true;

    await ref
        .read(userRepositoryProvider.notifier)
        .signInAnonymously(
          nameController.text,
          gender.value,
          scores![0],
        );

    ref.read(loadingProvider.notifier).state = false;
    if (context.mounted) {
      context.pushReplacement('/real');
    }
  }
},

So I lost a lot of time on this go_router refactoring that my users can’t see, instead of adding new features to my project.

By the way, regarding the onboarding, my app starts with the game directly with some indications; you click on 3 balls, and then you are redirected to an “explanation” onboarding. This is why I have an “/onboarding” route and “/onboardingtwo” route defined

GoRoute(
  path: '/onboarding',
  builder: (context, state) => const OnboardingPage(),
),
GoRoute(
  path: '/onboardingtwo',
  builder: (context, state) {
    final scores = List<int>.from(state.extra! as List<dynamic>);
    return OnboardingPageTwo(
      scores: scores,
    );
  },
),

One detail about this is that before, I added onboardingtwo as a child route of onboarding, but if I did that, my pushReplacement would still allow me to go back to the “/onboarding” route. This way, going back is no longer possible.

If anyone knows how to use pushReplacement on child routes, I’m all ears.

Firebase Emulator

I should have done this before instead of polluting my production Firebase Database (auth and firestore).

It is so simple! In my main, I have this:

  if (kDebugMode) {
    await FirebaseAuth.instance.useAuthEmulator('localhost', 9099);
    FirebaseFirestore.instance.useFirestoreEmulator('localhost', 8080);
  }

Obviously, you need to configure your emulator (for that, look up how to init firebase emulator). I’ve also exported the data from firestore and imported them into my emulator. That part is a bit annoying because you have to create a bucket where you store the export (even if my db was like 1mb…) instead of having a direct download link.

Now I can pollute my emulator as much as I want and create multiple scenarios too.

I was thinking of moving to Supabase because it’s trendy and I wanted to explore … do they have emulator too?

By the way, I’ve already worked on another project with multiple flavor … it was not that easy with firebase (not impossible) but a lot of hack and configuration… It’s usefull if you are going to give a test environment to your client before, but in my case, a dev environment for myself this is more than enough.

Easy_Localization

I’ve been using this package for many projects; it just works very well. I create a json file with the keys and values. It has everything, and the debug logs are very nice - they tell you which keys you’re missing, etc.

The blast this year is with AI - I’m working with Cursor, and I can just be on a page, ask it to extract all the keys of the page and add them into my json file. At the end, I also ask Cursor to translate to another language… what a simple world we live in now.

He will try to set the language of the user first and fallback to english. I always add an option in the Settings to change the language.

change-language

This week wasn’t super productive as I couldn’t put too many hours into this project. I’ve found two or three new features that I want to implement next week that will improve the core mechanics of the game.

  • Add sound when touching the ball (I’m going to use audioplayers library probably)
  • Add haptic feedback when hitting the ball (vibration)
  • New game with colors and shapes!

If you want to have a look at the app Download for iOS or Android

Share:
Back to Blog