Custom navigation action with custom route using deep links and route names

Hello friends!

This is going to be a bit long, but I think it's a pretty interesting problem!

With the intention of achieving scalable and dynamic development, I want the navigation between my pages to occur through the path of each page. In such a way, the path string comes from my SQL database in Supabase.

You may be wondering, why do you need to provide the path instead of just using the "Navigate To" action that comes by default in FlutterFlow?

Simple. I am building an educational application and the content of each class is created manually. This means that each class has a different page.

However, what I want to achieve is that using a ListView each of the classes is displayed on my 'CourseInformation' page. As you will understand, by wanting the classes to be displayed dynamically, but the content of the classes to be manual, I clearly need to store in a field of my SQL table the name or path of the content of each class and call it in my base container using a custom navigation action or the "Launch URL" action.

Here when someone will proceed to think that I can achieve this using the "Routing & Deep Linking" option found in the "App Details" section. And that's true, but not entirely!

Let's review the options to achieve this:

1. Use the "Launch URL" action with the URL Scheme

As this point in the FlutterFlow documentation explains, we can activate routes in our app and configure the links to open within our application.

Links with this structure open within our application. But, what would happen on Android if instead of using the "Navigate to" we used the "Launch URL" with the url sheme "misite://misite.url/class1". We would go directly to class 1! But what would happen if we pressed the back button on Android's bottom navigation bar? We exited (close) the application ☹️

Yes, surely someone will say: "Bro, you can activate the 'Page Are Subroutes of Root Page' option and that way every time the user presses back they would go to home." And that is true, but it is not the best solution, because what you want is for the user to go to the previous page, not the home page.

So my frist question would be: is there a way to customize the back button in FlutterFlow using a custom action?

2. Use a custom navigation action

I found this tutorial created by Dimitar Klaturov.

In this tutorial he explains that for its paths FlutterFlow uses the go_router package. And he give us a code like this for create a custom navigation action:

Future customNavigation(
  BuildContext context,
  String page,
) async {
  context.pushNamed(page);
}

The parameter of this custom code is passed the name of the route.

The problem with this is that it doesn't work! Never enters the specified page path.

So I just tried creating my own code with the help of GPT and did this:

Future customNavigation(
  BuildContext context,
  String page,
) async {
  // Add your function code here!
  // Navegar a la ruta especificada
  context.go('/$page');
}

Again, I passed the route name as a parameter.

And it worked! But it did it exactly the same as how the "Launch URL" action worked. That is, my application successfully entered the specified path (or the specified page), but when I pressed back in the android navigation bar the application closed. That is, the phone came out of it.

In conclusion, does anyone know how to navigate between pages using the path of each page and so that when the user presses back the application actually goes back and does not close? Or does anyone know how to control the back button?

I don't know much about coding in Flutter, so I would appreciate if you could help me by answering my question in an explanatory way.

IdeaGarage, you know a lot about Flutterflow and Supabase, can you think of a way to achieve this?


UPDATE: the way to do this is using the solution created by Dimitar.