Flutter Getx: How to create single page with url?

Question

I am trying to create an app single page by using Getx. When the user changes the URL, the page will change some widgets but Getx still moves to the same page(Observed from the movement when turning pages).

Now, I am using:

 getPages: [
        GetPage(
            name: "Page 1",
            page: () {
              globals.page= "Page 1";
              return Home();
            }),
        GetPage(
            name: "Page 2",
            page: () {
              globals.page= "Page 2";
              return Home();
            }),
    ]

How to solve it? I am looking like:

getPages: [
       GetPage(
           name: ["Page 1","Page 2"],
           page: () => Home(),
           refreshPageWidget: false,     //Don't return widget from page:
           onSamePage:  (String url) {     //Do when routing to original page.
             if(url == "Page 1"){
                globals.page= "Page 1";
             }else{
                globals.page= "Page 2";
             }
           }),
         ]

Can Getx(any package) do this?

Answer 1

It is possible but not complete. You can change the URL by using

window.history.pushState(null, 'url name', URL);
changePageWidget();
setState((){});

But This will make this app has only one route. So it can't go back or forward by using the arrow navigation button in the web browser (Although at present this flutter web is not good enough for this.) and you can't use Navigation to manage this page. You must create the function to manage this page.

The big issue with this method is You can't use stateFullWidget because the stateFullWidget will reset itself when the page widget was changed. So, you need to use state management.

In summary, you can do that as mentioned above but you can't use the arrow navigation button in the web browsers, and you can't use some functions that the flutter makes easy to use.

For me, I am using these steps for some pages that have a tab bar(only change URL).