Fluro Routing for Flutter | Part 2

Yesterday I wrote an article on Implementing Fluro Routing for our Flutter apps. Since morning, I had been seeking out other stuff from this package which includes passing multiple parameters, and those other than Map, so I thought why not share with you amazing people.

PART 2

Let’s gear up

If you have jumped directly to Part 2, this one is for you:)

Adding Fluro Routing for Flutter. Here's how to do it

So let’s get straight to the point.

Passing multiple Parameters

This part is fairly simple, just as we pass a single parameter, we can pass other via the same approach.

Handler

static var screen2Handler = Handler(
    handlerFunc: (BuildContext? context, Map<String, dynamic> params) {
      return const Screen2(text1: params[0]["data1"], text2: params[0]["data1"]);
    });

defineRoutes() Function

static dynamic defineRoutes() {
  router.define("/", handler: splashHandler,transitionType: TransitionType.fadeIn);
  router.define('screen2/:data1/:data2', handler: screen2Handler,transitionType: TransitionType.inFromLeft);
}

Note: Add “/:p1/:p2” for the next parameter. You can pass as much as you can, but this would definitely be a wrong approach and will lead to a “dirty style of Programming”, which takes us to our next phase.

Passing parameters other than Map

I searched a lot about this as I was stuck on the same thing. Alhamdulillah! I figured out the solution.

This part is a bit tricky

Code Structure

Step 1

At first, establish a new Class with a name of your choice. In my scenario

class ParamClass{
  String title;
  List<String> list;
  ParamClass(this.title,this.list);
}

Step 2

Switch to the handler, we do not need to pass parameters anymore. Instead, we will make use of ModalRoutes.

ModalRoute.of(context!)!.settings.arguments as ParamClass (class that we defined above).

Considering this snippet

static var screen2Handler = Handler(
    handlerFunc: (BuildContext? context, Map<String, dynamic> params) {
      
      var data = ModalRoute.of(context!)!.settings.arguments as ParamClass;
      
      return Screen2(data: data);
    });

Step 3

We are done with the tricky part, now just need to pass these arguments via Navigator.

Navigator.pushNamed(context, 'screen2',arguments: ParamClass("first_title",["1","2","3"])),

Run the app and check out the stuff.

Grabbed some stuff out of this then 👏.

Don’t forget to follow me on Medium, YouTube & GitHub.

Mustafa Tahir

mustafatahirhussein - Overview