How to present page with different transition (push / modal) in Flutter with Getx?

Question

I have a page that can present in two ways, modally and push, based on where this page gets initiated.

I use toNamed to present those pages, but the problem is I can't pass fullscreenDialog flag at the call site. I expected something like this:

Get.toNamed('pageName', fullscreenDialog: false);

So, do I need to have two routes and two pages for this kind of job? Something like this:

GetPage(
  name: 'pageNameDialog',
  page: () => QuestionPage(),
  fullscreenDialog: true,
  binding: QuestionBinding(),
),

GetPage(
  name: 'pageNamePush',
  page: () => QuestionPage(),
  fullscreenDialog: false,
  binding: QuestionBinding(),
),

I think it should be a better way, but I'm really new to Flutter and getx and don't know what I should search for. Does anyone have a solution for this? Otherwise, I might have to double my route and page which is quite redundant.

did you ever figure this one out ? we have same issue where we want to dynamically change the transition animation between pages at run time, using GetPage routing in GetX. We should really be able to do something like Get.toNamed('page1', transition: Transition.fadeIn...) but if you DONT override the "transition" property, it defaults to the originally defined transition — ajonno, Sep 23 '21 at 23:59

Nirjan Munshi · Answer 1 · 2022-07-30T20:37:09.040

Create a class like this

class Go {
  /// Similar to **Navigation.push()**
  static Future<T?> to<T>(dynamic page, {dynamic arguments, Transition? transition, bool? opaque}) async {
    return await Get.to<T>(page,
        arguments: arguments,
        transition: transition ?? Transition.rightToLeft,
        duration: const Duration(milliseconds: 350),
        opaque: opaque);
  }

  /// Similar to **Navigation.pushReplacement**
  static Future<dynamic> off(dynamic page, {dynamic arguments, Transition? transition}) async {
    Get.off(
      page,
      arguments: arguments,
      transition: transition ?? Transition.rightToLeft,
      duration: const Duration(milliseconds: 350),
    );
  }

  /// Similar to **Navigation.pushAndRemoveUntil()**
  static Future<dynamic> offUntil(dynamic page, {Transition? transition}) async {
    Get.offUntil(
        GetPageRoute(
          page: page,
          transition: transition ?? Transition.rightToLeft,
          transitionDuration: const Duration(milliseconds: 350),
        ),
        (route) => false);
  }
}

then inside your view or controller

// BEST PRACTICE
// you can pass any object. 
var args = {'data': 'data that you want to pass'};
Go.to(() => const HomeView(), arguments: args);

Now to get the value that you passed in HomeView use the code below.

class HomeController extends GetxController {

  @override
  void onInit() async {
    super.onInit();

    var args = Get.arguments['data'];
    
    // ... 

  }
}

A similar approach is applicable to others also.

1

work correctly thank's. – Jawad Fadel Dec 29 '21 at 18:30

score -1 · Answer 2 · answered May 11 '21 at 08:45

-1

You can pass your flag as an argument, like this :

Get.toNamed('pageName', arguments: true);

And on the page where you are going you can tap into :

Get.arguments;

This will return true on pageName.

Now arguments parameter type is dynamic so you can pass any and also if you want multiple you can pass List or Map as well.

Hope the is what you wanted to achieve.

answered May 11 '21 at 08:45

Krish Bhanushali

1,594
1
8
16

I try to change the presentation animation not passing an argument. Is there a way I can use this argument to change the animation? – sarunw May 17 '21 at 03:34

How to present page with different transition (push / modal) in Flutter with Getx?

2 Answers2

Linked