Search code examples
androidflutterdarthttp-redirectget

Flutter, How to add animation when redirecting screen using Get.off()?


I have this line Get.off(() => const AllergyConfigurationScreen()); which redirects to another screen. Is it possible to add animation by integrating a PageRouteBuilder?

preferences_controller.dart

case 0:
          // form validation
          if (!updateVeganFormKey.currentState!.validate()) {
            updateVeganFormKey.currentState!.save();
            return;
          }

          if (!updateDairyFormKey.currentState!.validate()) {
            updateDairyFormKey.currentState!.save();
            return;
          }

          Map<String, dynamic> Diet = {
            'Diet': {
              'IsVegan': isVegan.value,
              'IsDairyFree': isDairyFree.value,
            },
          };

          // Update the 'isVegan' field within the 'Diet' map
          Diet['Diet']['IsVegan'] = isVegan.value;
          Diet['Diet']['IsDairyFree'] = isDairyFree.value;

          // Create the data to update in Firestore
          Map<String, dynamic> dietData = {
            'Preferences': {
              'Allergy': {
                'IsEgg': userController.user.value.preferences['Allergy']
                    ?['IsEgg'],
                'IsNut': userController.user.value.preferences['Allergy']
                    ?['IsNut'],
              },
              'Diet': {
                'IsVegan': isVegan.value,
                'IsDairyFree': isDairyFree.value,
              },
            },
          };
          await userRepository.updateSingleField(dietData);

          // update the rx user value
          userController.user.value.preferences['IsVegan'] = isVegan.value;
          userController.user.update((user) {
            user?.preferences['Diet'] ??= {};
            user?.preferences['Diet']['IsVegan'] = isVegan.value;
          });

          userController.user.value.preferences['IsDairyFree'] =
              isDairyFree.value;
          userController.user.update((user) {
            user?.preferences['Diet'] ??= {};
            user?.preferences['Diet']['IsDairyFree'] = isDairyFree.value;
          });

          Get.off(() => const AllergyConfigurationScreen());
          break;

PageRouteBuilder()

PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const AllergyConfigurationScreen(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      const begin = Offset(1.0, 0.0);
      const end = Offset.zero;
      const curve = Curves.ease;

      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  );

Solution

  •   Get.off(()=>NewPage(),transition: Transition.downToUp);
    

    have you tried transition property,If you find this transition type unsuitable, feel free to change it to one that better suits your needs.